Javascript ES6
ECMAScript 2015 was die tweede groot hersiening van JavaScript.
ECMAScript 2015 staan ook bekend as ES6 en ECMAScript 6.
Hierdie hoofstuk beskryf die belangrikste kenmerke van ES6.
Nuwe kenmerke in ES6
- Die laat sleutelwoord
- Die const sleutelwoord
- Pyltjie funksies
- Vir/van
- Kaartvoorwerpe
- Stel voorwerpe
- Klasse
- Beloftes
- Simbool
- Verstek parameters
- Funksie Rus Parameter
- String.includes()
- String.startsWith()
- String.endsWith()
- Skikking.from()
- Skikking sleutels ()
- Skikking vind()
- Skikking findIndex()
- Nuwe Wiskunde Metodes
- Nuwe nommer-eienskappe
- Nuwe Getalmetodes
- Nuwe globale metodes
- Iterables Object.inskrywings
- JavaScript-modules
Blaaierondersteuning vir ES6 (2015)
Safari 10 en Edge 14 was die eerste blaaiers wat ES6 ten volle ondersteun:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript laat
Die letsleutelwoord laat jou toe om 'n veranderlike met blokomvang te verklaar.
Voorbeeld
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Lees meer oor letin die hoofstuk: JavaScript Let .
JavaScript-konst
Die constsleutelwoord laat jou toe om 'n konstante ('n JavaScript-veranderlike met 'n konstante waarde) te verklaar.
Konstante is soortgelyk aan laat veranderlikes, behalwe dat die waarde nie verander kan word nie.
Voorbeeld
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Lees meer oor constin die hoofstuk: JavaScript Const .
Pyltjie funksies
Pyltjiefunksies laat 'n kort sintaksis toe vir die skryf van funksie-uitdrukkings.
Jy het nie die functionsleutelwoord, die returnsleutelwoord en die
krulhakies nodig nie .
Voorbeeld
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Pyltjiefunksies het nie hul eie nie this. Hulle is nie goed geskik om objekmetodes te definieer nie .
Pylfunksies word nie gehys nie. Hulle moet gedefinieer word voordat hulle gebruik word.
Om te gebruik const
is veiliger as om te gebruik var, want 'n funksie-uitdrukking is altyd 'n konstante waarde.
Jy kan slegs die returnsleutelwoord en die krulhakies weglaat as die funksie 'n enkele stelling is. As gevolg hiervan kan dit 'n goeie gewoonte wees om hulle altyd te hou:
Voorbeeld
const x = (x, y) => { return x * y };
Kom meer te wete oor Pyltjiefunksies in die hoofstuk: JavaScript Pyltjiefunksie .
Die vir/van lus
Die JavaScript for/of-stelling loop deur die waardes van 'n herhaalbare voorwerp.
for/oflaat jou lus oor datastrukture wat herhaalbaar is, soos skikkings, stringe, kaarte, nodelyste, en meer.
Die for/oflus het die volgende sintaksis:
for (variable of iterable) {
// code block to be executed
}
veranderlike - Vir elke iterasie word die waarde van die volgende eienskap aan die veranderlike toegeken. Veranderlike kan verklaar word met
const, let, of var.
iterable - 'n Voorwerp wat iterable eienskappe het.
Loop oor 'n skikking
Voorbeeld
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Loop oor 'n tou
Voorbeeld
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Kom meer te wete in die hoofstuk: JavaScript-lus vir/in/van .
JavaScript-kaartvoorwerpe
Om 'n voorwerp as 'n sleutel te kan gebruik, is 'n belangrike kaartkenmerk.
Voorbeeld
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Kom meer te wete oor kaartvoorwerpe in die hoofstuk: JavaScript Map() .
JavaScript stel voorwerpe
Voorbeeld
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Kom meer te wete oor Stel-objekte in die hoofstuk: JavaScript Set() .
JavaScript-klasse
JavaScript-klasse is sjablone vir JavaScript-objekte.
Gebruik die sleutelwoord classom 'n klas te skep.
Voeg altyd 'n metode by met die naam constructor():
Sintaksis
class ClassName {
constructor() { ... }
}
Voorbeeld
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Die voorbeeld hierbo skep 'n klas met die naam "Kar".
Die klas het twee aanvanklike eienskappe: "naam" en "jaar".
'n JavaScript-klas is nie 'n objek nie.
Dit is 'n sjabloon vir JavaScript-objekte.
Die gebruik van 'n klas
Wanneer jy 'n klas het, kan jy die klas gebruik om voorwerpe te skep:
Voorbeeld
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Kom meer te wete oor klasse in die hoofstuk: JavaScript-klasse .
JavaScript-beloftes
'n Belofte is 'n JavaScript-objek wat "Producing Code" en "Consuming Code" koppel.
"Produseer kode" kan 'n rukkie neem en "Verbruik kode" moet wag vir die resultaat.
Belofte Sintaksis
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 */ }
);
Voorbeeld deur 'n belofte te gebruik
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Kom meer te wete oor beloftes in die hoofstuk: JavaScript-beloftes .
Die simbooltipe
'n JavaScript-simbool is 'n primitiewe datatipe, net soos Getal, String of Boolean.
Dit verteenwoordig 'n unieke "versteekte" identifiseerder waartoe geen ander kode per ongeluk toegang kan kry nie.
Byvoorbeeld, as verskillende kodeerders 'n person.id-eienskap wil byvoeg by 'n persoon-objek wat aan 'n derdeparty-kode behoort, kan hulle mekaar se waardes meng.
Die gebruik van Symbol() om 'n unieke identifiseerders te skep, los hierdie probleem op:
Voorbeeld
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
Simbole is altyd uniek.
As jy twee simbole met dieselfde beskrywing skep, sal hulle verskillende waardes hê.
Symbol("id") == Symbol("id") // false
Verstekparameterwaardes
ES6 laat funksieparameters toe om verstekwaardes te hê.
Voorbeeld
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Funksie Rus Parameter
Die res parameter (...) laat 'n funksie toe om 'n onbepaalde aantal argumente as 'n skikking te hanteer:
Voorbeeld
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);
String.includes()
Die includes()metode gee terug trueas 'n string 'n gespesifiseerde waarde bevat, anders false:
Voorbeeld
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
Die startsWith()metode gee terug true
as 'n string met 'n gespesifiseerde waarde begin, anders false:
Voorbeeld
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
Die endsWith()metode gee terug true
as 'n string eindig met 'n gespesifiseerde waarde, anders false:
Voorbeeld
var text = "John Doe";
text.endsWith("Doe") // Returns true
Skikking.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
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
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true