JavaScript ES6


Innehållsförteckning

    Visa innehållsförteckning

ECMAScript 2015 var den andra stora revisionen av JavaScript.

ECMAScript 2015 är också känt som ES6 och ECMAScript 6.

Detta kapitel beskriver de viktigaste egenskaperna hos ES6.

Nya funktioner i ES6

  • Nyckelordet let

  • Nyckelordet const

  • Pilfunktioner

  • Operatören

  • För av

  • Kartobjekt

  • Ställ in objekt

  • Klasser

  • Löften

  • Symbol

  • Standardparametrar

  • Funktion Vila Parameter

  • String.includes()

  • String.startsWith()

  • String.endsWith()

  • Array.from()

  • Array-nycklar()

  • Array hitta()

  • Array findIndex()

  • Nya matematiska metoder

  • Nya nummeregenskaper

  • Nya nummermetoder

  • Nya globala metoder

  • Objektposter

  • JavaScript-moduler


Webbläsarstöd för ES6 (2015)

Safari 10 och Edge 14 var de första webbläsarna som fullt ut stödde ES6:

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

JavaScript låtit

Nyckelordet let låter dig deklarera en variabel med blockera omfattning.

Exempel

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

Prova själv →

<!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 mer om let i kapitlet: JavaScript Let.


JavaScript-konst

Nyckelordet const låter dig deklarera en konstant (a JavaScript-variabel med ett konstant värde).

Konstanter liknar låtvariabler, förutom att värdet inte kan ändras.

Exempel

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

Prova själv →

<!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 mer om const i kapitlet: JavaScript Const.



Pilfunktioner

Pilfunktioner tillåter en kort syntax för att skriva funktionsuttryck.

Du behöver inte nyckelordet function, nyckelordet retur och lockiga parenteser.

Exempel

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

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

Prova själv →

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

Pilfunktioner har inte sin egen detta. De är inte väl lämpade för att definiera objektmetoder.

Pilfunktionerna är inte upplyfta. De måste definieras innan de används.

Använder const är säkrare än att använda var, eftersom ett funktionsuttryck är alltid ett konstant värde.

Du kan bara utelämna nyckelordet return och hakparenteserna om funktionen är en enskild sats. På grund av detta kan det vara en god vana att alltid behålla dem:

Exempel

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

Prova själv →

<!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äs mer om pilfunktioner i kapitlet: JavaScript-pilfunktion.


The Spread (...) Operatör

Operatorn ... expanderar en iterabel (som en array) till fler element:

Exempel

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

Prova själv →

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

Operatorn ... kan användas för att utöka en iterabel till fler argument för funktionsanrop:

Exempel

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

Prova själv →

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

För/av-loopen

JavaScript för/av-satsen loopar genom värdena för ett itererbart objekt.

för/av låter dig loopa över datastrukturer som är itererbara såsom Arrays, Strings, Maps, NodeLists och mer.

för/av-slingan har följande syntax:

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

variabel - För varje iteration är värdet på nästa egenskap tilldelas variabeln. Variabel kan deklareras med const, let eller var.

iterable - Ett objekt som har iterable egenskaper.

Slingor över en Array

Exempel

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

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

Prova själv →

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

Slinga över en sträng

Exempel

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


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

Prova själv →

<!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äs mer i kapitlet: JavaScript Loop For/In/Of.


JavaScript-kartor

Att kunna använda ett objekt som nyckel är en viktig kartfunktion.

Exempel

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

Prova själv →

<!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äs mer om kartobjekt och skillnaden mellan en karta och en array i kapitlet: JavaScript-kartor.


JavaScript-uppsättningar

Exempel

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

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

Prova själv →

<!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äs mer om Set-objekt i kapitlet: JavaScript-uppsättningar.


JavaScript-klasser

JavaScript-klasser är mallar för JavaScript-objekt.

Använd nyckelordet klass för att skapa en klass.

Lägg alltid till en metod som heter constructor():

Syntax

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

Exempel

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

Exemplet ovan skapar en klass som heter "Bil".

Klassen har två initiala egenskaper: "namn" och "år".

En JavaScript-klass är inte ett objekt.

Det är en mall för JavaScript-objekt.


Använda en klass

När du har en klass kan du använda klassen för att skapa objekt:

Exempel

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

Prova själv →

<!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äs mer om klasser i kapitlet: JavaScript-klasser.


JavaScript-löften

Ett löfte är ett JavaScript-objekt som länkar "Producing Code" och "Consuming Code".

"Producera kod" kan ta lite tid och "Consuming Code" måste vänta på resultatet.

Löftsyntax

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 */ }
);

Exempel på att använda ett 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;
});

Prova själv →

<!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äs mer om löften i kapitlet: JavaScript-löften.


Symboltypen

En JavaScript-symbol är en primitiv datatyp precis som Number, String eller Boolean.

Den representerar en unik "dold" identifierare som ingen annan kod kan komma åt av misstag.

Till exempel, om olika kodare vill lägga till en person.id-egenskap till ett personobjekt som tillhör en tredjepartskod, de kunde blanda varandras värderingar.

Att använda Symbol() för att skapa unika identifierare löser detta problem:

Exempel

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

Prova själv →

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

Notera

Symboler är alltid unika.

Om du skapar två symboler med samma beskrivning kommer de att ha olika värden:

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

Standardparametervärden

ES6 tillåter funktionsparametrar att ha standardvärden.

Exempel

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

Prova själv →

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

Parametern rest (...) tillåter en funktion att behandla ett obestämt antal argument som en array:

Exempel

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);

Prova själv →

<!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() returnerar true om en sträng innehåller ett specificerat värde, annars false:

Exempel

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

Prova själv →

<!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() returnerar true om en sträng börjar med ett angivet värde, annars false:

Exempel

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

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

Prova själv →

<!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() returnerar true om en sträng slutar med ett angivet värde, annars false:

Exempel

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

Prova själv →

<!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() returnerar ett Array-objekt från alla objekt med en längd egendom eller något itererbart objekt.

Exempel

Skapa en matris från en sträng:

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

Prova själv →

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

Array-nycklar()

Metoden keys() returnerar ett Array Iterator-objekt med nycklarna till en array.

Exempel

Skapa ett Array Iterator-objekt som innehåller arrayens nycklar:

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

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

Prova själv →

<!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 hitta()

Metoden find() returnerar värdet på det första matriselementet som skickar en testfunktion.

Det här exemplet hittar (returnerar värdet av ) det första elementet som är större än 18:

Exempel

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

Prova själv →

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

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen


Array findIndex()

Metoden findIndex() returnerar indexet för det första matriselementet som klarar en testfunktion.

Det här exemplet hittar indexet för det första elementet som är större än 18:

Exempel

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

Prova själv →

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

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen


Nya matematiska metoder

ES6 lade till följande metoder till Math-objektet:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()


Math.trunc()-metoden

Math.trunc(x) returnerar heltalsdelen av x:

Exempel

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

Prova själv →

<!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) returnerar om x är negativt, null eller positivt:

Exempel

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

Prova själv →

<!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) returnerar kubroten av x:

Exempel

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

Prova själv →

<!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) returnerar bas 2-logaritmen för x:

Exempel

Math.log2(2);    // returns 1

Prova själv →

<!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) returnerar bas 10-logaritmen för x:

Exempel

Math.log10(10);    // returns 1

Prova själv →

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

Nya nummeregenskaper

ES6 lade till följande egenskaper till Number-objektet:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

EPSILON Exempel

let x = Number.EPSILON;

Prova själv →

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

let x = Number.MIN_SAFE_INTEGER;

Prova själv →

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

let x = Number.MAX_SAFE_INTEGER;

Prova själv →

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

Nya nummermetoder

ES6 lade till 2 nya metoder till Number-objektet:

  • Number.isInteger()

  • Number.isSafeInteger()


Number.isInteger()-metoden

Metoden Number.isInteger() returnerar true om argumentet är ett heltal.

Exempel

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

Prova själv →

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

Ett säkert heltal är ett heltal som exakt kan representeras som ett dubbelt precisionstal.

Metoden Number.isSafeInteger() returnerar true om argumentet är ett säkert heltal.

Exempel

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

Prova själv →

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

Säkra heltal är alla heltal från -(253 - 1) till +(253 - 1).
Detta är säkert: 9007199254740991. Det här är inte säkert: 9007199254740992.


Nya globala metoder

ES6 har lagt till 2 nya globala nummermetoder:

  • isFinite()

  • isNaN()


Metoden isFinite()

Den globala metoden isFinite() returnerar false om argumentet är Infinity eller NaN.

Annars returnerar den true:

Exempel

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

Prova själv →

<!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 globala metoden isNaN() returnerar true om argumentet är NaN. Annars returnerar den false:

Exempel

isNaN("Hello");       // returns true

Prova själv →

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

Objektposter()

Exempel

Skapa en Array Iterator och iterera sedan över nyckel/värdeparen:

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

Prova själv →

<!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() returnerar ett Array Iterator-objekt med nyckel/värdepar:

[0, "Banan"]
[1, "Orange"]
[2, "Äpple"]
[3, "Mango"]

Metoden entries() ändrar inte den ursprungliga arrayen.


Moduler

Moduler importeras på två olika sätt:

Importera från namngivna exporter

Importera namngivna exporter från filen person.js:

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

Prova själv →

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

Importera från standardexporter

Importera en standardexport från filen message.js:

import message from "./message.js";

Prova själv →

<!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äs mer om moduler i: JavaScript-moduler.