ECMAScript 2015 oli JavaScriptin toinen suuri versio.
ECMAScript 2015 tunnetaan myös nimellä ES6 ja ECMAScript 6.
Tässä luvussa kuvataan ES6:n tärkeimmät ominaisuudet.
Let-avainsana
Const avainsana
Nuolitoiminnot
Operaattori
For/of
Karttaobjektit
Aseta objektit
Luokat
Lupaukset
Symboli
Oletusparametrit
Function Rest -parametri
String.includes()
String.startsWith()
String.endsWith()
Array.from()
Taulukkonäppäimet()
Array find()
Array findIndex()
Uudet matemaattiset menetelmät
Uudet numeroominaisuudet
Uudet numeromenetelmät
Uudet globaalit menetelmät
Objektimerkinnät
JavaScript-moduulit
Safari 10 ja Edge 14 olivat ensimmäiset selaimet, jotka tukevat täysin ES6:ta:
Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
Avainsana let
mahdollistaa muuttujan ilmoittamisen lohkon laajuus.
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Kokeile itse →
<!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>
Lue lisää letistä
luvusta: JavaScript Let.
Avainsanalla const
voit ilmoittaa vakion (a JavaScript-muuttuja, jolla on vakioarvo).
Vakiot ovat samanlaisia kuin let-muuttujat, paitsi että arvoa ei voi muuttaa.
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Kokeile itse →
<!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>
Lue lisää const
:sta luvussa: JavaScript Const.
Nuolifunktiot mahdollistavat lyhyen syntaksin funktiolausekkeiden kirjoittamiseen.
Et tarvitse avainsanaa funktio
, return
-avainsanaa ja kiharat hakasulkeet.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Kokeile itse →
<!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>
Nuolifunktioilla ei ole omaa tätä
. Ne eivät sovellu hyvin objektimenetelmien määrittämiseen.
Nuolitoimintoja ei nosteta. Ne on määritettävä ennen niiden käyttöä.
Käytetään const
on turvallisempaa kuin var
, koska funktiolauseke on aina vakio arvo.
Voit jättää pois avainsanan return
ja hakasulkeet vain, jos funktio on yksi lause. Tästä syystä saattaa olla hyvä tapa pitää ne aina:
const x = (x, y) => { return x * y };
Kokeile itse →
<!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>
Lisätietoja nuolifunktioista on luvussa: JavaScript-nuolifunktio.
...-operaattori laajentaa iteroitavan (kuten taulukon) useammiksi elementiksi:
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];
Kokeile itse →
<!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>
...-operaattoria voidaan käyttää laajentamaan iterable useammiksi argumenteiksi funktiokutsuille:
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);
Kokeile itse →
<!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>
JavaScriptin for/of
-lauseen silmukat iteroitavien objektien arvojen kautta.
for/of
mahdollistaa tietorakenteiden silmukan jotka ovat iteroitavissa, kuten Arrays, Strings, Maps, NodeLists ja paljon muuta.
for/of
-silmukalla on seuraava syntaksi:
for (variable of iterable) {
// code block to be executed
}
muuttuja - jokaiselle iteraatiolle seuraavan ominaisuuden arvo on määritetty muuttujalle. Muuttuja voidaan ilmoittaa käyttämällä const
, let
tai var
.
iteroitava - Objekti, jolla on iteroitavia ominaisuuksia.
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Kokeile itse →
<!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 + " ";
}
Kokeile itse →
<!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>
Lue lisää luvusta: JavaScript Loop For/In/Of.
Mahdollisuus käyttää objektia avaimena on tärkeä kartta-ominaisuus.
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Kokeile itse →
<!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>
Lisätietoja karttaobjekteista sekä kartan ja taulukon eroista on luvussa: JavaScript-kartat.
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Kokeile itse →
<!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>
Lue lisää Set-objekteista luvussa: JavaScript-joukot.
JavaScript-luokat ovat JavaScript-objektien malleja.
Luo luokka avainsanalla luokka
.
Lisää aina menetelmä nimeltä constructor()
:
class ClassName {
constructor() { ... }
}
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Yllä oleva esimerkki luo luokan nimeltä "Auto".
Luokassa on kaksi alkuominaisuutta: "nimi" ja "vuosi".
JavaScript-luokka ei ole objekti.
Se on malli JavaScript-objekteille.
Kun sinulla on luokka, voit käyttää luokkaa objektien luomiseen:
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Kokeile itse →
<!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>
Lue lisää luokista luvussa: JavaScript-luokat.
Lupaus on JavaScript-objekti, joka linkittää "Producing Code" ja "Consuming Code".
"Koodin tuottaminen" voi kestää jonkin aikaa, ja "Koodin kulutuksen" on odotettava tulosta.
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;
});
Kokeile itse →
<!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>
Lisätietoja lupauksista on luvussa: JavaScript-lupaukset.
JavaScript-symboli on primitiivinen tietotyyppi, kuten numero, merkkijono tai looginen.
Se edustaa ainutlaatuista "piilotettua" tunnistetta, johon mikään muu koodi ei voi vahingossa päästä käsiksi.
Jos esimerkiksi eri koodaajat haluavat lisätä person.id-ominaisuuden henkilöobjektiin, joka kuuluu kolmannen osapuolen koodiin, he voivat sekoittaa toistensa arvoja.
Symbol():n käyttäminen yksilöllisten tunnisteiden luomiseen ratkaisee tämän ongelman:
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
Kokeile itse →
<!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>
Symbolit ovat aina ainutlaatuisia.
Jos luot kaksi symbolia samalla kuvauksella, niillä on eri arvot:
Symbol("id") == Symbol("id"); // false
ES6 sallii toimintoparametreille oletusarvot.
function myFunction(x, y = 10) { // y is 10 if not passed or undefined return x + y;
}
myFunction(5); // will return 15
Kokeile itse →
<!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>
Loput-parametri (...) sallii funktion käsitellä määräämättömän määrän argumentteja taulukkona:
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);
Kokeile itse →
<!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>
Metodi includes()
palauttaa true
, jos merkkijono sisältää määritetyn arvon, muuten false
:
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
Kokeile itse →
<!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>
Metodi startsWith()
palauttaa true
jos merkkijono alkaa tietyllä arvolla, muussa tapauksessa false
:
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
Kokeile itse →
<!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>
Metodi endsWith()
palauttaa true
jos merkkijono päättyy tiettyyn arvoon, muussa tapauksessa false
:
var text = "John Doe";
text.endsWith("Doe") // Returns true
Kokeile itse →
<!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>
Metodi Array.from()
palauttaa Array-objektin mistä tahansa objektista, jonka pituus on omaisuutta tai toistettavaa objektia.
Luo taulukko merkkijonosta:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Kokeile itse →
<!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>
Metodi keys()
palauttaa Array Iterator -objektin taulukon avaimilla.
Luo Array Iterator -objekti, joka sisältää taulukon avaimet:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Kokeile itse →
<!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>
Metodi find()
palauttaa ensimmäisen taulukon elementin arvon, joka läpäisee testitoiminto.
Tämä esimerkki löytää (palauttaa arvon) ensimmäisen elementin, joka on suurempi kuin 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Kokeile itse →
<!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>
Huomaa, että funktiolla on 3 argumenttia:
Tuotteen arvo
Tavaran indeksi
Itse sarja
Metodi findIndex()
palauttaa ensimmäisen taulukkoelementin indeksin läpäisee testitoiminnon.
Tämä esimerkki etsii ensimmäisen elementin indeksin, joka on suurempi kuin 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Kokeile itse →
<!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>
Huomaa, että funktiolla on 3 argumenttia:
Tuotteen arvo
Tavaran indeksi
Itse sarja
ES6 lisäsi seuraavat menetelmät Math-objektiin:
Math.trunc()
Math.sign()
Math.cbrt()
Math.log2()
Math.log10()
Math.trunc(x)
palauttaa x:n kokonaislukuosan:
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
Kokeile itse →
<!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)
palauttaa, jos x on negatiivinen, tyhjä tai positiivinen:
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
Kokeile itse →
<!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)
palauttaa x:n kuutiojuuren:
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
Kokeile itse →
<!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)
palauttaa x:n 2 kantalogaritmin:
Math.log2(2); // returns 1
Kokeile itse →
<!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)
palauttaa x:n 10 peruslogaritmin:
Math.log10(10); // returns 1
Kokeile itse →
<!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 lisäsi seuraavat ominaisuudet Number-objektiin:
EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER
let x = Number.EPSILON;
Kokeile itse →
<!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;
Kokeile itse →
<!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;
Kokeile itse →
<!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 lisäsi 2 uutta menetelmää Number-objektiin:
Number.isInteger()
Number.isSafeInteger()
Metodi Number.isInteger()
palauttaa true
, jos argumentti on kokonaisluku.
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
Kokeile itse →
<!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>
Turvallinen kokonaisluku on kokonaisluku, joka voidaan esittää täsmälleen kaksinkertaisena tarkkuuslukuna.
Metodi Number.isSafeInteger()
palauttaa true
, jos argumentti on turvallinen kokonaisluku.
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Kokeile itse →
<!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>
Turvalliset kokonaisluvut ovat kaikki kokonaislukuja -(253 - 1) - +(253 - 1).
Tämä on turvallista: 9007199254740991. Tämä ei ole turvallista: 9007199254740992.
ES6 lisäsi 2 uutta globaalia numeromenetelmää:
isFinite()
isNaN()
Globaali isFinite()
-menetelmä palauttaa false
, jos argumentti on Infinity
tai NaN
.
Muussa tapauksessa se palauttaa true
:
isFinite(10/0); // returns false
isFinite(10/1); // returns true
Kokeile itse →
<!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>
Globaali isNaN()
-menetelmä palauttaa true
, jos argumentti on NaN
. Muussa tapauksessa se palauttaa false
:
isNaN("Hello"); // returns true
Kokeile itse →
<!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>
Luo Array Iterator ja iteroi sitten avain/arvo-parien yli:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Kokeile itse →
<!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>
Metodi entries()
palauttaa Array Iterator -objektin avain/arvo-parien kanssa:
[0, "Banaani"]
[1, "Orange"]
[2, "omena"]
[3, "Mango"]
Metodi entries()
ei muuta alkuperäistä taulukkoa.
Moduulit tuodaan kahdella eri tavalla:
Tuo nimetyt viennit tiedostosta person.js:
import { name, age } from "./person.js";
Kokeile itse →
<!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>
Tuo oletusvienti tiedostosta message.js:
import message from "./message.js";
Kokeile itse →
<!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>
Lisätietoja moduuleista: JavaScript-moduulit.