JavaScript ES2019

Indholdsfortegnelse

    Vis indholdsfortegnelse

JavaScript-versionsnumre

Gamle JS-versioner er navngivet med numre: ES5 (2009) og ES6 (2015).

Fra 2016 er versionerne navngivet efter år: ECMAScript 2016, 2017, 2018, 2019, ...

Nye funktioner i ES2019

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Valgfri fangebinding

  • Array.flat()

  • Array.flatMap()

  • Revideret Array.Sort()

  • Revideret JSON.stringify()

  • Separatorsymboler tilladt i strengbogstaver

  • Revideret Function.toString()

Advarsel

Disse funktioner er relativt nye.

Ældre browsere kan have brug for en alternativ kode (Polyfill)

JavaScript-streng trimStart()

ES2019 føjede strengmetoden trimStart() til JavaScript. <p>trimStart()-metoden fungerer som trim(), men fjerner kun mellemrum fra starten af en snor.

Eksempel

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

Prøv det selv →

<!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-strengen trimStart() er understøttet i alle moderne browsere siden januar 2020:

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

JavaScript-streng trimEnd()

ES2019 føjede strengmetoden trimEnd() til JavaScript. <p>trimEnd()-metoden fungerer som trim(), men fjerner kun mellemrum fra slutningen af en snor.

Eksempel

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

Prøv det selv →

<!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-strengen trimEnd() er understøttet i alle moderne browsere siden januar 2020:

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

JavaScript-objekt fra Entries()

ES2019 føjede objektmetoden fromEntries() til JavaScript. <p>Metoden fromEntries() opretter et objekt fra iterable nøgle/værdipar.

Eksempel

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

const myObj = Object.fromEntries(fruits);

Prøv det selv →

<!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-objekt fromEntries() er understøttet i alle moderne browsere siden januar 2020:

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

Valgfri fange Indbinding

Fra ES2019 kan du udelade catch-parameteren, hvis du ikke har brug for den:.

Eksempel

Før 2019:

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

Efter 2019:

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

Valgfri catch-binding er understøttet i alle moderne browsere siden januar 2020:

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

JavaScript Array flat()

ES2019 tilføjede Array flat() metoden til JavaScript.

Metoden flat() opretter en ny matrix ved at fladlægge en indlejret matrix.

Eksempel

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

Prøv det selv →

<!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 Array flat() er understøttet i alle moderne browsere siden januar 2020:

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

JavaScript Array flatMap()

ES2019 tilføjede Array flatMap() metoden til JavaScript.

Metoden flatMap() kortlægger først alle elementer i et array og opretter derefter et nyt array ved at udjævne arrayet.

Eksempel

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

Prøv det selv →

<!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>

Stable Array sort()

ES2019 reviderede Array sort()-metoden.

Før 2019 tillod specifikationen ustabile sorteringsalgoritmer som QuickSort.

Efter ES2019 skal browsere bruge en stabil sorteringsalgoritme:

Når du sorterer elementer på en værdi, skal elementerne bevare deres relative position i forhold til andre elementer med samme værdi.

Eksempel

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 }
];

Prøv det selv →

<!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>

I eksemplet ovenfor, når der sorteres på pris, må resultatet ikke komme ud med navnene i en anden relativ position som f.eks. sådan her:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

Revideret JSON.stringify()

ES2019 reviderede JSON stringify()-metoden.

Før 2019 kunne JSON ikke stringify tegn kodet med \.

Eksempel

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

Prøv det selv →

<!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>

Før ES2019, ved brug af JSON.stringify()JSON på UTF-8 kodepunkter (U+D800 til U+DFFF) returnerede ødelagte Unicode-tegn som ���.

Efter denne revision konverteres strenge med UTF-8 kodepunkter sikkert med JSON.stringify(), og tilbage til originalen ved hjælp af JSON.parse().

Separatorsymboler

<p>Linjeadskillere og afsnitsadskillersymboler (\u2028 og \u2029) er nu tilladt i strenge bogstaver.

Før 2019 blev disse behandlet som linjeterminatorer og resulterede i fejlundtagelser:

Eksempel

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

Prøv det selv →

<!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>

Bemærk

Nu har JavaScript og JSON lige regler.

Før ES2019:

text=JSON.parse('"\u2028"') ville parse til ''.

text='"\u2028"' ville give syntaksfejl.

Revideret funktion toString()

ES2019 reviderede metoden Function toString().

Metoden toString() returnerer en streng, der repræsenterer kildekoden til en funktion.

Fra 2019 skal toString() returnere kildekoden for funktionen inklusive kommentarer, mellemrum og syntaksdetaljer.

Før 2019 returnerede forskellige browsere forskellige varianter af funktionen (som uden kommentarer og mellemrum). Fra 2019 skal funktionen returneres præcis som den er skrevet.

Eksempel

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

Prøv det selv →

<!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>