JavaScript ECMAScript 2020

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 ES2020

BigInt
String matchAll()
The Nullish Coalescing Operator (??)
Den valgfrie kædeoperatør (?.)
Logisk AND Assignment Operator (&&=)
Logisk ELLER-tildeling (||=)
Nullish Coalescing Assignment (??=)
Promise allSettled():
style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]). derefter {}
Dynamisk import

Advarsel

Disse funktioner er relativt nye.

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

JavaScript BigInt

JavaScript BigInt-variabler bruges til at gemme store heltalsværdier der er for store til at blive repræsenteret af et normalt JavaScript nummer.

JavaScript-heltal er kun nøjagtige op til omkring 15 cifre.

Heltalseksempel

let x = 999999999999999;
let y = 9999999999999999; // too big

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

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

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

BigInt eksempel

let x = 9999999999999999;
let y = 9999999999999999n;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

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

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

For at oprette en BigInt skal du tilføje n til slutningen af et heltal eller et opkald BigInt():

Eksempel

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

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

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

JavaScript type en BigInt er "bigint":

Eksempel

let x = BigInt(999999999999999);
let type = typeof x;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

BigInt er understøttet i alle moderne browsere siden september 2020:


Chrome 67	Edge 79	Firefox 68	Safari 14	Opera 54
May 2018	Jan 2020	Jul 2019	Sep 2020	Jun 2018

JavaScript-streng matchAll()

Før ES2020 var der ingen strengmetode, der kunne bruges til at søge efter alle forekomster af en snor i en snor.

Eksempel

const iterator = text.matchAll("Cats");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Hvis parameteren er et regulært udtryk, skal det globale flag (g) indstilles ellers en TypeError vises.

Eksempel

const iterator = text.matchAll(/Cats/g);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Hvis du vil søge ufølsomt mellem store og små bogstaver, skal det ufølsomme flag (i) indstilles:

Eksempel

const iterator = text.matchAll(/Cats/gi);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Bemærk

ES2021 introducerede strengmetoden replaceAll().

The Nullish Coalescing Operator (??)

Operatoren ?? returnerer det første argument, hvis det ikke er nullish (null eller udefineret).

Ellers returnerer den anden.

Eksempel

let name = null;
let text = "missing";
let result = name ?? text;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

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

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>

Nullish-operatøren er understøttet i alle moderne browsere siden marts 2020:


Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020

Den valgfrie kædeoperatør (?.)

Valgfri kædeoperatør returnerer udefineret, hvis et objekt er undefined eller null (i stedet for at smide en fejl).

Eksempel

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Operatoren ?.= er understøttet i alle moderne browsere siden marts 2020:


Chrome 80	Edge 80	Firefox 74	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Mar 2020	Mar 2020	Mar 2020

&&=-operatøren

Logical AND Assignment Operator bruges mellem to værdier.

Hvis den første værdi er sand, tildeles den anden værdi.

Logisk OG opgaveeksempel

let x = 10;
x &&= 5;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

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

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Operatøren &&= er understøttet i alle moderne browsere siden september 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

||=-operatøren

Logical OR Assignment Operator bruges mellem to værdier.

Hvis den første værdi er false, tildeles den anden værdi.

Eksempel på logisk ELLER tildeling

let x = 10;
x ||= 5;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Operatoren ||= er understøttet i alle moderne browsere siden september 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

??= Operatøren

Nullish Coalescing Assignment Operator bruges mellem to værdier.

Hvis den første værdi er undefined eller null, tildeles den anden værdi.

Nullish Coalescing Assignment Eksempel

let x;
x ??= 5;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

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

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

Operatøren ??= er understøttet i alle moderne browsere siden september 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020