JavaScript ES6

Indholdsfortegnelse

    Vis indholdsfortegnelse

ECMAScript 2015 var den anden store revision af JavaScript.

ECMAScript 2015 er også kendt som ES6 og ECMAScript 6.

Dette kapitel beskriver de vigtigste funktioner i ES6.

Nye funktioner i ES6

  • Søgeordet lad

  • Nøgleordet const

  • Pile funktioner

  • Den ... Operatør

  • For/af

  • Kortobjekter

  • Indstil objekter

  • Klasser

  • Løfter

  • Symbol

  • Standardparametre

  • Funktion hvileparameter

  • String.includes()

  • String.startsWith()

  • String.endsWith()

  • Array.from()

  • Matrixnøgler()

  • Array find()

  • Array findIndex()

  • Nye matematiske metoder

  • Nye nummeregenskaber

  • Nye talmetoder

  • Nye globale metoder

  • Objektindtastninger

  • JavaScript moduler

Browserunderstøttelse til ES6 (2015)

Safari 10 og Edge 14 var de første browsere, der fuldt ud understøttede ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript ladet

let nøgleordet giver dig mulighed for at erklære en variabel med blokere omfang.

Eksempel

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

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

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Læs mere om let i kapitlet: JavaScript Let.

JavaScript-konst

Søgeordet const giver dig mulighed for at erklære en konstant (a JavaScript-variabel med en konstant værdi).

Konstanter ligner ladvariabler, bortset fra at værdien ikke kan ændres.

Eksempel

var x = 10;
// Here x is 10
{ 
  const x = 2;
    // Here x is 2
}
// Here x is 10

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

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

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Læs mere om const i kapitlet: JavaScript Const.

Pile funktioner

Pilefunktioner tillader en kort syntaks til at skrive funktionsudtryk.

Du behøver ikke funktion søgeordet, retur søgeordet og krøllede parenteser.

Eksempel

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Pilefunktioner har ikke deres eget dette. De er ikke velegnede til at definere objektmetoder.

Pilefunktioner er ikke hejst. De skal defineres før de bruges.

Brug af const er sikrere end at bruge var, fordi et funktionsudtryk er altid en konstant værdi.

Du kan kun udelade nøgleordet retur og de krøllede parenteser, hvis funktionen er en enkelt sætning. På grund af dette kan det være en god vane altid at beholde dem:

Eksempel

const x = (x, y) => { return x * y };

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Lær mere om pilefunktioner i kapitlet: JavaScript pilefunktion.

Sprednings-(...)-operatøren

Operatoren ... udvider en iterabel (som et array) til flere elementer:

Eksempel

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

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

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

Operatoren ... kan bruges til at udvide en iterabel til flere argumenter for funktionskald:

Eksempel

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

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

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

document.getElementById("demo").innerHTML = maxValue; 
</script>

</body>
</html>

For/Of-løkken

JavaScript for/of-sætningsløkkerne gennem værdierne af gentagelige objekter.

for/of giver dig mulighed for at gå over datastrukturer der er iterable såsom Arrays, Strings, Maps, NodeLists og mere.

for/of-løkken har følgende syntaks:

for (variable of iterable) {
      // code block to be executed
}

variabel - For hver iteration er værdien af den næste egenskab tildelt variablen. Variabel kan erklæres med const, let eller var.

iterbar - Et objekt, der har iterable egenskaber.

Sløjfe over et array

Eksempel

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

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

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

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

</body>
</html>

Sløjfe over en streng

Eksempel

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

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

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

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

</body>
</html>

Lær mere i kapitlet: JavaScript Loop For/In/Of.

JavaScript-kort

At kunne bruge et objekt som en nøgle er en vigtig kortfunktion.

Eksempel

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Lær mere om kortobjekter og forskellen mellem et kort og et array i kapitlet: JavaScript-kort.

JavaScript sæt

Eksempel

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

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

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Lær mere om sæt-objekter i kapitlet: JavaScript-sæt.

JavaScript klasser

JavaScript-klasser er skabeloner til JavaScript-objekter.

Brug søgeordet klasse til at oprette en klasse.

Tilføj altid en metode med navnet constructor():

Syntaks

class ClassName {
   constructor() { ... }
}

Eksempel

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Eksemplet ovenfor opretter en klasse med navnet "Bil".

Klassen har to indledende egenskaber: "navn" og "år".

En JavaScript-klasse er ikke et objekt.

Det er en skabelon til JavaScript-objekter.

Brug af en klasse

Når du har en klasse, kan du bruge klassen til at oprette objekter:

Eksempel

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

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

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Lær mere om klasser i kapitlet: JavaScript-klasser.

JavaScript løfter

Et løfte er et JavaScript-objekt, der forbinder "Producing Code" og "Consuming Code".

"Producer kode" kan tage noget tid, og "forbrugende kode" skal vente på resultatet.

Løftesyntaks

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Eksempel på brug af et løfte

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Lær mere om løfter i kapitlet: JavaScript løfter.

Symboltypen

Et JavaScript-symbol er en primitiv datatype ligesom tal, streng eller boolesk.

Det repræsenterer en unik "skjult" identifikator, som ingen anden kode ved et uheld kan få adgang til.

For eksempel, hvis forskellige kodere ønsker at tilføje en person.id-egenskab til et personobjekt, der tilhører en tredjepartskode, de kunne blande hinandens værdier.

Brug af Symbol() til at oprette en unik identifikator, løser dette problem:

Eksempel

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

Bemærk

Symboler er altid unikke.

Hvis du opretter to symboler med samme beskrivelse, vil de have forskellige værdier:

Symbol("id") == Symbol("id"); // false

Standardparameterværdier

ES6 tillader funktionsparametre at have standardværdier.

Eksempel

function myFunction(x, y = 10) {	  // y is 10 if not passed or undefined	  return x + y;
}
myFunction(5); // will return 15

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

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

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

Funktion hvileparameter

Parameteren rest (...) tillader en funktion at behandle et ubestemt antal argumenter som en matrix:

Eksempel

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

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

<script>
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

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

</body>
</html>

String.includes()

Metoden includes() returnerer true, hvis en streng indeholder en specificeret værdi, ellers false:

Eksempel

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

Metoden startsWith() returnerer true hvis en streng begynder med en specificeret værdi, ellers false:

Eksempel

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

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

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

Metoden endsWith() returnerer true hvis en streng slutter med en specificeret værdi, ellers false:

Eksempel

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

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

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Array.from()

Metoden Array.from() returnerer et Array-objekt fra ethvert objekt med en længde egenskab eller ethvert iterabelt objekt.

Eksempel

Opret et array fra en streng:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Prøv det selv →

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

<p>Return an array object from any object with a length property or any iterable object.</p>

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

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

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Matrixnøgler()

Metoden keys() returnerer et Array Iterator-objekt med nøglerne til et array.

Eksempel

Opret et Array Iterator-objekt, der indeholder nøglerne til arrayet:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

Prøv det selv →

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

<p>Return an Array Iterator object with the keys of the array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

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

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Array find()

Metoden find() returnerer værdien af det første array-element, der passerer en test funktion.

Dette eksempel finder (returnerer værdien af ) det første element, der er større end 18:

Eksempel

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Prøv det selv →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Array findIndex()

Metoden findIndex() returnerer indekset for det første matrixelement, der består en testfunktion.

Dette eksempel finder indekset for det første element, der er større end 18:

Eksempel

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Prøv det selv →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Nye matematiske metoder

ES6 føjede følgende metoder til Math-objektet:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()

Math.trunc()-metoden

Math.trunc(x) returnerer heltalsdelen af x:

Eksempel

Math.trunc(4.9);    // returns 4
Math.trunc(4.7);    // returns 4
Math.trunc(4.4);    // returns 4
Math.trunc(4.2);    // returns 4
Math.trunc(-4.2);    // returns -4

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

Math.sign()-metoden

Math.sign(x) returnerer, hvis x er negativ, null eller positiv:

Eksempel

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

Math.cbrt()-metoden

Math.cbrt(x) returnerer terningeroden af x:

Eksempel

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

Math.log2()-metoden

Math.log2(x) returnerer basis 2-logaritmen af x:

Eksempel

Math.log2(2);    // returns 1

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

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

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

Math.log10()-metoden

Math.log10(x) returnerer basis 10-logaritmen af x:

Eksempel

Math.log10(10);    // returns 1

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

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

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

Nye nummeregenskaber

ES6 føjede følgende egenskaber til Number-objektet:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

EPSILON Eksempel

let x = Number.EPSILON;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

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

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

</body>
</html>

MIN_SAFE_INTEGER Eksempel

let x = Number.MIN_SAFE_INTEGER;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

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

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

</body>
</html>

MAX_SAFE_INTEGER Eksempel

let x = Number.MAX_SAFE_INTEGER;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

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

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

</body>
</html>

Nye talmetoder

ES6 tilføjede 2 nye metoder til Number-objektet:

  • Number.isInteger()

  • Number.isSafeInteger()

Number.isInteger()-metoden

Metoden Number.isInteger() returnerer true, hvis argumentet er et heltal.

Eksempel

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Number.isSafeInteger()-metoden

Et sikkert heltal er et heltal, der nøjagtigt kan repræsenteres som et dobbelt præcisionstal.

Metoden Number.isSafeInteger() returnerer true, hvis argumentet er et sikkert heltal.

Eksempel

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Sikre heltal er alle heltal fra -(253 - 1) til +(253 - 1).
Dette er sikkert: 9007199254740991. Dette er ikke sikkert: 9007199254740992.

Nye globale metoder

ES6 tilføjede 2 nye globale talmetoder:

  • isFinite()

  • isNaN()

isFinite()-metoden

Den globale isFinite() metode returnerer false, hvis argumentet er Infinity eller NaN.

Ellers returnerer den true:

Eksempel

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

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

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

isNaN()-metoden

Den globale isNaN() metode returnerer true, hvis argumentet er NaN. Ellers returnerer den false:

Eksempel

isNaN("Hello");       // returns true

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Objektindgange()

Eksempel

Opret en Array Iterator, og gentag derefter nøgle/værdi-parrene:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

Metoden entries() returnerer et Array Iterator-objekt med nøgle/værdi-par:

[0, "Banana"]
[1, "Orange"]
[2, "Æble"]
[3, "Mango"]

Metoden entries() ændrer ikke det oprindelige array.

Moduler

Moduler importeres på to forskellige måder:

Import fra navngivne eksporter

Importer navngivne eksporter fra filen person.js:

import { name, age } from "./person.js";

Prøv det selv →

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

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

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

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

</body>
</html>

Importer fra standardeksporter

Importer en standardeksport fra filen message.js:

import message from "./message.js";

Prøv det selv →

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

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

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Lær mere om moduler i: JavaScript-moduler.