JavaScript ES6

Hvad er ECMAScript 6?

ECMAScript 6 også kaldes ES6 og ECMAScript 2015.

Nogle kalder det JavaScript 6.

Dette kapitel introducerer nogle nye funktioner i ES6.

  • JavaScript let
  • JavaScript const
  • Potens (**)
  • Standardparametre
  • Array.find()
  • Array.findIndex()

Browserstøtte for ES6 (ECMAScript 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 let

let sætningen giver dig mulighed for at deklarere variabler med blokbrætning.

Eksempel

var x = 10;
// Her er x 10
{ 
  let x = 2;
  // Her er x 2
}
// Her er x 10

Prøv det selv

JavaScript const

const en sætning, der giver dig mulighed for at deklarere konstanter (JavaScript variabler med konstante værdier).

Konstanter ligner let variable, men kan ikke ændre værdien.

Eksempel

var x = 10;
// Her er x 10
{ 
  const x = 2;
  // Her er x 2
}
// Her er x 10

Prøv det selv

på vores JavaScript Let / Const Læs mere om let og const indholdet.

potensoperator

Tag potensoperatoren (**）hæver den første operand til den anden operands potens.

Eksempel

var x = 5;
var z = x ** 2;          // Resultatet er 25

Prøv det selv

x ** y resultatet er lig med Math.pow(x,y) Samme:

Eksempel

var x = 5;
var z = Math.pow(x,2);   // Resultatet er 25

Prøv det selv

Standardparametre

ES6 Funktioner kan have standardparametre.

Eksempel

function myFunction(x, y = 10) {
  // y er 10, hvis ikke angivet eller undefined
  return x + y;
}
myFunction(5); // vil returnere 15

Prøv det selv

Array.find()

find() Metoden returnerer værdien til den første arrayelement, der passer testfunktionen.

Dette eksempelet søger (returnerer) den første element (værdi) der er større end 18:

Eksempel

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

Prøv det selv

Bemærk at denne funktion accepterer 3 parametre:

  • elementets værdi
  • elementets indeks
  • arrayet selv

Array.findIndex()

findIndex() Metoden returnerer indekset til den første arrayelement, som passer testfunktionen.

Dette eksempelet bestemmer indeksen til det første elementet der er større end 18:

Eksempel

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

Prøv det selv

Bemærk at denne funktion accepterer 3 parametre:

  • elementets værdi
  • elementets indeks
  • arrayet selv

nye talegenskaper

ES6 har tilføjet følgende egenskaper til Number objektet:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Eksempel

var x = Number.EPSILON;

Prøv det selv

Eksempel

var x = Number.MIN_SAFE_INTEGER;

Prøv det selv

Eksempel

var x = Number.MAX_SAFE_INTEGER;

Prøv det selv

nye talmetoder

ES6 har tilføjet 2 nye metoder til Number objektet:

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger() metoden

hvis parameteren er et heltal Number.isInteger() metoden returnerer true.

Eksempel

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

Prøv det selv

Number.isSafeInteger() metoden

Sikre heltal er heltal som kan representeres nøyaktig som dobbelt presisjons tall.

hvis parameteren er en sikker heltal Number.isSafeInteger() metoden returnerer true.

Eksempel

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

Prøv det selv

Sikre heltal er alle heltal fra -(253 - 1) til +(253 - 1).

Dette er sikkert: 9007199254740991. Dette er usikkert: 9007199254740992.

nye globale metoder

ES6 har også tilføjet 2 nye globale talmetoder:

  • isFinite()
  • isNaN()

isFinite() metoden

hvis parameteren er Infinity eller NaNså global isFinite() metoden returnerer false.

ellers returnerer true:

Eksempel

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

Prøv det selv

isNaN() metoden

hvis parameteren er NaNså global isNaN() metoden returnerer true. Hvis ikke, returnerer false:

Eksempel

isNaN("Hello");       // Returnerer true

Prøv det selv

arrow funktioner (Arrow Function)

arrow funktioner tillader brug af en kortere syntaks til at skrive funktionsekspressioner.

du ikke har brug for function nøgleord,return nøgleord samtklammesæt.

Eksempel

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

Prøv det selv

arrow funktioner har ingen egen this. De er ikke egnet til at definereobjektmetoder.

arrow funktioner er ikke ophøjet. De skal brugesførfor at definere.

bruge const i stedet for at bruge var sikrere, fordi funktionsekspressioner altid er konstante værdier.

Hvis funktionen kun er én sætning, kan man undlade return Nøgleord og klammesæt. Derfor kan det være en god vane at beholde dem:

Eksempel

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

Prøv det selv