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.
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
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 |
Nyckelordet let
låter dig deklarera en variabel med blockera omfattning.
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.
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.
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 tillåter en kort syntax för att skriva funktionsuttryck.
Du behöver inte nyckelordet function
, nyckelordet retur
och lockiga parenteser.
// 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) => 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:
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) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Läs mer om pilfunktioner i kapitlet: JavaScript-pilfunktion.
Operatorn ... expanderar en iterabel (som en array) till fler element:
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:
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>
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.
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>
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.
Att kunna använda ett objekt som nyckel är en viktig kartfunktion.
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.
// 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 ä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()
:
class ClassName {
constructor() { ... }
}
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.
När du har en klass kan du använda klassen för att skapa objekt:
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.
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.
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 */ }
);
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.
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:
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>
Symboler är alltid unika.
Om du skapar två symboler med samma beskrivning kommer de att ha olika värden:
Symbol("id") == Symbol("id"); // false
ES6 tillåter funktionsparametrar att ha standardvärden.
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>
Parametern rest (...) tillåter en funktion att behandla ett obestämt antal argument som en array:
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>
Metoden includes()
returnerar true
om en sträng innehåller ett specificerat värde, annars false
:
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>
Metoden startsWith()
returnerar true
om en sträng börjar med ett angivet värde, annars false
:
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>
Metoden endsWith()
returnerar true
om en sträng slutar med ett angivet värde, annars false
:
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>
Metoden Array.from()
returnerar ett Array-objekt från alla objekt med en längd egendom eller något itererbart objekt.
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>
Metoden keys()
returnerar ett Array Iterator-objekt med nycklarna till en array.
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>
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:
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
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:
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
ES6 lade till följande metoder till Math-objektet:
Math.trunc()
Math.sign()
Math.cbrt()
Math.log2()
Math.log10()
Math.trunc(x)
returnerar heltalsdelen av x:
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(x)
returnerar om x är negativt, null eller positivt:
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(x)
returnerar kubroten av x:
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(x)
returnerar bas 2-logaritmen för x:
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(x)
returnerar bas 10-logaritmen för x:
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>
ES6 lade till följande egenskaper till Number-objektet:
EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER
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>
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>
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>
ES6 lade till 2 nya metoder till Number-objektet:
Number.isInteger()
Number.isSafeInteger()
Metoden Number.isInteger()
returnerar true
om argumentet är ett heltal.
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>
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.
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.
ES6 har lagt till 2 nya globala nummermetoder:
isFinite()
isNaN()
Den globala metoden isFinite()
returnerar false
om argumentet är Infinity
eller NaN
.
Annars returnerar den true
:
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>
Den globala metoden isNaN()
returnerar true
om argumentet är NaN
. Annars returnerar den false
:
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>
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 importeras på två olika sätt:
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 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.