JavaScript ES2019

İçindekiler

İçindekiler tablosunu göster

JavaScript Sürüm Numaraları

Eski JS sürümleri sayılarla adlandırılır: ES5 (2009) ve ES6 (2015).

2016'dan itibaren sürümler yıllara göre adlandırılmıştır: ECMAScript 2016, 2017, 2018, 2019, ...

ES2019'daki Yeni Özellikler

String.trimStart()
String.trimEnd()
Object.fromEntries
İsteğe bağlı yakalama bağlama
Dizi.flat()
Array.flatMap()
Revize Edilmiş Array.Sort()
JSON.stringify() revize edildi
Dize harflerinde ayırıcı sembollere izin verilir
Revize Edilmiş Function.toString()

Uyarı

Bu özellikler nispeten yenidir.

Daha eski tarayıcıların alternatif bir koda (Polyfill) ihtiyacı olabilir

JavaScript Dizesi trimStart()

ES2019, JavaScript'e trimStart() String yöntemini ekledi. <p>trimStart() yöntemi, trim() gibi çalışır, ancak boşlukları yalnızca başlangıçtan kaldırır. dizi.

Örnek

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript Dizesi trimStart(), Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
Apr 2018	Jan 2020	Jun 2018	Sep 2018	May 2018

JavaScript Dizesi trimEnd()

ES2019, JavaScript'e trimEnd() String yöntemini ekledi. <p>trimEnd() yöntemi, trim() gibi çalışır, ancak yalnızca sonundaki boşlukları kaldırır. dizi.

Örnek

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript Dizesi trimEnd(), Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
Apr 2018	Jan 2020	Jun 2018	Sep 2018	May 2018

Entries()'tan JavaScript Nesnesi

ES2019, JavaScript'e fromEntries() Object yöntemini ekledi. <p>fromEntries() yöntemi yinelenebilir anahtar/değer çiftlerinden bir nesne oluşturur.

Örnek

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>

<p>The number of pears are:</p>
<p id="demo"></p>

<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>

</body>
</html>

JavaScript Nesnesi fromEntries(), Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:


Chrome 73	Edge 79	Firefox 63	Safari 12.1	Opera 60
Mar 2019	Jan 2020	Oct 2018	Mar 2019	Apr 2019

İsteğe bağlı yakalama Bağlama

ES2019'dan ihtiyacınız yoksa catch parametresini atlayabilirsiniz:.

Örnek

2019'dan önce:

try {
  // code
} catch (err) {
  // code
}

2019'dan sonra:

try {
  // code
} catch {
  // code
}

İsteğe bağlı yakalama bağlama, Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:


Chrome 66	Edge 79	Firefox 58	Safari 11.1	Opera 53
Apr 2018	Jan 2020	Jan 2018	Mar 2018	May 2018

JavaScript Dizisi düz()

ES2019, JavaScript'e Array flat() yöntemini ekledi.

flat() yöntemi, iç içe geçmiş bir diziyi düzleştirerek yeni bir dizi oluşturur.

Örnek

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

JavaScript Dizisi flat(), Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:


Chrome 69	Edge 79	Firefox 62	Safari 12	Opera 56
Sep 2018	Jan 2020	Sep 2018	Sep 2018	Sep 2018

JavaScript Dizisi flatMap()

ES2019, JavaScript'e Array flatMap() yöntemini ekledi.

flatMap() yöntemi ilk olarak bir dizinin tüm öğelerini eşler ve ardından diziyi düzleştirerek yeni bir dizi oluşturur.

Örnek

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

<p id="demo"></p>

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Kararlı Dizi sıralama()

ES2019, Array sort() yöntemini revize etti.

2019'dan önce spesifikasyon, QuickSort gibi kararsız sıralama algoritmalarına izin veriyordu.

ES2019'dan sonra tarayıcıların kararlı bir sıralama algoritması kullanması gerekir:

Öğeleri bir değere göre sıralarken, öğelerin aynı değere sahip diğer öğelere göre göreceli konumlarını korumaları gerekir.

Örnek

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Yukarıdaki örnekte fiyata göre sıralama yapılırken diğer göreceli konumdaki isimlerle sonuç çıkmasına izin verilmiyor. bunun gibi:

JSON.stringify() revize edildi

ES2019, JSON stringify() yöntemini revize etti.

2019'dan önce JSON,\ile kodlanmış karakteri dizilemiyordu.

Örnek

let text = JSON.stringify("\u26D4");

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>

<p id="demo"></p>

<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>

</body>
</html>

ES2019'dan önce, UTF-8 kod noktalarında (U+D800'den U+DFFF'ye) JSON.stringify()JSON kullanılıyordu �� gibi bozuk Unicode karakterleri döndürdü.

Bu revizyondan sonra UTF-8 kod noktasına sahip dizeler JSON.stringify() ile güvenli bir şekilde dönüştürülür, ve JSON.parse() kullanarak orijinaline geri dönün.

Ayırıcı Sembolleri

<p>Satır ayırıcılara ve paragraf ayırıcı sembollerine (\u2028 ve \u2029) artık dize değişmezlerinde izin veriliyor.

2019'dan önce bunlar hat sonlandırıcı olarak değerlendiriliyordu ve hata istisnalarıyla sonuçlanıyordu:

Örnek

// This is valid in ES2019:
let text = "\u2028";

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>

<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>

<p id="demo"></p>

<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Not

Artık JavaScript ve JSON eşit kurallara sahip.

ES2019'dan önce:

text=JSON.parse('"\u2028"'), '' olarak ayrıştırılır.

text='"\u2028"' sözdizimi hatası verir.

Revize Edilmiş İşlev toString()

ES2019, Function toString() yöntemini revize etti.

toString() yöntemi, bir işlevin kaynak kodunu temsil eden bir dize döndürür.

2019'dan itibaren toString() işlevi, yorumlar da dahil olmak üzere işlevin kaynak kodunu döndürmelidir. boşluklar ve sözdizimi ayrıntıları.

2019'dan önce farklı tarayıcılar, işlevin farklı varyantlarını döndürüyordu (örneğin, yorum ve boşluk olmadan). 2019'dan itibaren fonksiyon tam olarak yazıldığı gibi döndürülmelidir.

Örnek

function myFunction(p1, p2) {
    return p1 * p2;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>