JavaScript ES6


Sisällysluettelo

    Näytä sisällysluettelo

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.

Uusia ominaisuuksia ES6:ssa

  • 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


Selaintuki ES6:lle (2015)

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

JavaScript anna

Avainsana let mahdollistaa muuttujan ilmoittamisen lohkon laajuus.

Esimerkki

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.


JavaScript const

Avainsanalla const voit ilmoittaa vakion (a JavaScript-muuttuja, jolla on vakioarvo).

Vakiot ovat samanlaisia kuin let-muuttujat, paitsi että arvoa ei voi muuttaa.

Esimerkki

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.



Nuolitoiminnot

Nuolifunktiot mahdollistavat lyhyen syntaksin funktiolausekkeiden kirjoittamiseen.

Et tarvitse avainsanaa funktio, return-avainsanaa ja kiharat hakasulkeet.

Esimerkki

// 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) =&gt; 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:

Esimerkki

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) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Lisätietoja nuolifunktioista on luvussa: JavaScript-nuolifunktio.


The Spread (...) -operaattori

...-operaattori laajentaa iteroitavan (kuten taulukon) useammiksi elementiksi:

Esimerkki

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:

Esimerkki

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>

For/Of Loop

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.

Silmukoiminen taulukon yli

Esimerkki

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>

Silmukoiminen merkkijonon yli

Esimerkki

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.


JavaScript-kartat

Mahdollisuus käyttää objektia avaimena on tärkeä kartta-ominaisuus.

Esimerkki

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.


JavaScript-sarjat

Esimerkki

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

JavaScript-luokat ovat JavaScript-objektien malleja.

Luo luokka avainsanalla luokka.

Lisää aina menetelmä nimeltä constructor():

Syntaksi

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

Esimerkki

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.


Luokan käyttäminen

Kun sinulla on luokka, voit käyttää luokkaa objektien luomiseen:

Esimerkki

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.


JavaScript lupaukset

Lupaus on JavaScript-objekti, joka linkittää "Producing Code" ja "Consuming Code".

"Koodin tuottaminen" voi kestää jonkin aikaa, ja "Koodin kulutuksen" on odotettava tulosta.

Lupaa syntaksi

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

Esimerkki lupauksen käyttämisestä

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.


Symbolityyppi

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:

Esimerkki

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>

Huomautus

Symbolit ovat aina ainutlaatuisia.

Jos luot kaksi symbolia samalla kuvauksella, niillä on eri arvot:

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

Parametrien oletusarvot

ES6 sallii toimintoparametreille oletusarvot.

Esimerkki

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>



Function Rest -parametri

Loput-parametri (...) sallii funktion käsitellä määräämättömän määrän argumentteja taulukkona:

Esimerkki

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>

String.includes()

Metodi includes() palauttaa true, jos merkkijono sisältää määritetyn arvon, muuten false:

Esimerkki

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>

String.startsWith()

Metodi startsWith() palauttaa true jos merkkijono alkaa tietyllä arvolla, muussa tapauksessa false:

Esimerkki

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>

String.endsWith()

Metodi endsWith() palauttaa true jos merkkijono päättyy tiettyyn arvoon, muussa tapauksessa false:

Esimerkki

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>

Array.from()

Metodi Array.from() palauttaa Array-objektin mistä tahansa objektista, jonka pituus on omaisuutta tai toistettavaa objektia.

Esimerkki

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>

Taulukkonäppäimet()

Metodi keys() palauttaa Array Iterator -objektin taulukon avaimilla.

Esimerkki

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>

Array find()

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:

Esimerkki

 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


Array findIndex()

Metodi findIndex() palauttaa ensimmäisen taulukkoelementin indeksin läpäisee testitoiminnon.

Tämä esimerkki etsii ensimmäisen elementin indeksin, joka on suurempi kuin 18:

Esimerkki

 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


Uudet matemaattiset menetelmät

ES6 lisäsi seuraavat menetelmät Math-objektiin:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()


Math.trunc() -menetelmä

Math.trunc(x) palauttaa x:n kokonaislukuosan:

Esimerkki

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() -menetelmä

Math.sign(x) palauttaa, jos x on negatiivinen, tyhjä tai positiivinen:

Esimerkki

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() -menetelmä

Math.cbrt(x) palauttaa x:n kuutiojuuren:

Esimerkki

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() -menetelmä

Math.log2(x) palauttaa x:n 2 kantalogaritmin:

Esimerkki

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() -menetelmä

Math.log10(x) palauttaa x:n 10 peruslogaritmin:

Esimerkki

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>

Uudet numeroominaisuudet

ES6 lisäsi seuraavat ominaisuudet Number-objektiin:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

Esimerkki EPSILON

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>

MIN_SAFE_INTEGER Esimerkki

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>

MAX_SAFE_INTEGER Esimerkki

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>

Uudet numeromenetelmät

ES6 lisäsi 2 uutta menetelmää Number-objektiin:

  • Number.isInteger()

  • Number.isSafeInteger()


Number.isInteger() -menetelmä

Metodi Number.isInteger() palauttaa true, jos argumentti on kokonaisluku.

Esimerkki

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>

Number.isSafeInteger() -menetelmä

Turvallinen kokonaisluku on kokonaisluku, joka voidaan esittää täsmälleen kaksinkertaisena tarkkuuslukuna.

Metodi Number.isSafeInteger() palauttaa true, jos argumentti on turvallinen kokonaisluku.

Esimerkki

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.


Uudet globaalit menetelmät

ES6 lisäsi 2 uutta globaalia numeromenetelmää:

  • isFinite()

  • isNaN()


IsFinite() -menetelmä

Globaali isFinite()-menetelmä palauttaa false, jos argumentti on Infinity tai NaN.

Muussa tapauksessa se palauttaa true:

Esimerkki

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>

isNaN()-menetelmä

Globaali isNaN()-menetelmä palauttaa true, jos argumentti on NaN. Muussa tapauksessa se palauttaa false:

Esimerkki

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>

Objektimerkinnät()

Esimerkki

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

Moduulit tuodaan kahdella eri tavalla:

Tuo nimetyistä viennistä

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 oletusviennistä

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.