Javascript ES6

ECMAScript 2015 là bản sửa đổi lớn thứ hai cho JavaScript.

ECMAScript 2015 còn được gọi là ES6 và ECMAScript 6.

Chương này mô tả các tính năng quan trọng nhất của ES6.

Các tính năng mới trong ES6

Hỗ trợ trình duyệt cho ES6 (2015)

Safari 10 và Edge 14 là những trình duyệt đầu tiên hỗ trợ đầy đủ ES6:


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

JavaScript let

Từ letkhóa cho phép bạn khai báo một biến với phạm vi khối.

Thí dụ

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

Đọc thêm về letchương: JavaScript Let .

JavaScript const

Từ constkhóa cho phép bạn khai báo một hằng số (một biến JavaScript có giá trị không đổi).

Hằng tương tự như biến let, ngoại trừ giá trị không thể thay đổi.

Thí dụ

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

Đọc thêm về constchương: JavaScript Const .

Hàm mũi tên

Hàm mũi tên cho phép viết một cú pháp ngắn gọn để viết biểu thức hàm.

Bạn không cần functiontừ khóa, returntừ khóa và dấu ngoặc nhọn .

Thí dụ

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

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

Các hàm mũi tên không có hàm riêng của chúng this. Chúng không phù hợp để xác định các phương thức đối tượng .

Các chức năng mũi tên không được kéo lên. Chúng phải được xác định trước khi sử dụng.

Sử dụng const an toàn hơn sử dụng var, bởi vì biểu thức hàm luôn là một giá trị không đổi.

Bạn chỉ có thể bỏ qua returntừ khóa và dấu ngoặc nhọn nếu hàm là một câu lệnh duy nhất. Bởi vì điều này, có thể là một thói quen tốt để luôn giữ chúng:

Thí dụ

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

Tìm hiểu thêm về Hàm mũi tên trong chương: Hàm mũi tên trong JavaScript .

Vòng lặp For / Of

Câu lệnh JavaScript for/oflặp qua các giá trị của một đối tượng có thể lặp lại.

for/of cho phép bạn lặp lại các cấu trúc dữ liệu có thể lặp lại như Mảng, Chuỗi, Bản đồ, Danh sách Node, v.v.

Vòng for/oflặp có cú pháp sau:

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

biến - Đối với mỗi lần lặp, giá trị của thuộc tính tiếp theo được gán cho biến. Biến có thể được khai báo bằng const, lethoặc var.

có thể lặp lại - Một đối tượng có các thuộc tính có thể lặp lại.

Vòng qua một mảng

Thí dụ

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

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

Vòng qua một chuỗi

Thí dụ

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

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

Tìm hiểu thêm trong chương: JavaScript Loop For / In / Of .

Đối tượng bản đồ JavaScript

Có thể sử dụng Đối tượng làm khóa là một tính năng Bản đồ quan trọng.

Thí dụ

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

Tìm hiểu thêm về các đối tượng Bản đồ trong chương: JavaScript Map () .

Đối tượng tập hợp JavaScript

Thí dụ

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

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

Tìm hiểu thêm về Bộ đối tượng trong chương: Bộ JavaScript () .

Các lớp JavaScript

Các lớp JavaScript là các mẫu cho các Đối tượng JavaScript.

Sử dụng từ khóa classđể tạo một lớp học.

Luôn thêm một phương thức có tên constructor():

Cú pháp

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

Thí dụ

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

Ví dụ trên tạo một lớp có tên là "Xe".

Lớp có hai thuộc tính ban đầu: "name" và "year".

Một lớp JavaScript không phải là một đối tượng.

Nó là một mẫu cho các đối tượng JavaScript.

Sử dụng một lớp học

Khi bạn có một lớp, bạn có thể sử dụng lớp đó để tạo các đối tượng:

Thí dụ

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

Tìm hiểu thêm về các lớp trong chương: Lớp JavaScript .

Lời hứa về JavaScript

Lời hứa là một đối tượng JavaScript liên kết "Mã sản xuất" và "Mã tiêu thụ".

"Mã sản xuất" có thể mất một chút thời gian và "Mã tiêu thụ" phải đợi kết quả.

Cú pháp Promise

Ví dụ sử dụng một lời hứa

Tìm hiểu thêm về Lời hứa trong chương: Lời hứa trong JavaScript .

Loại ký hiệu

Biểu tượng JavaScript là một kiểu dữ liệu nguyên thủy giống như Số, Chuỗi hoặc Boolean.

Nó đại diện cho một mã định danh "ẩn" duy nhất mà không có mã nào khác có thể vô tình truy cập.

Ví dụ: nếu các lập trình viên khác nhau muốn thêm thuộc tính person.id vào đối tượng person thuộc mã của bên thứ ba, họ có thể kết hợp các giá trị của nhau.

Sử dụng Symbol () để tạo số nhận dạng duy nhất, giải quyết vấn đề này:

Thí dụ

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

Các biểu tượng luôn là duy nhất.

Nếu bạn tạo hai biểu tượng với cùng một mô tả, chúng sẽ có các giá trị khác nhau.

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

Giá trị tham số mặc định

ES6 cho phép các tham số của hàm có giá trị mặc định.

Thí dụ

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

Tham số phần còn lại của chức năng

Tham số còn lại (...) cho phép một hàm coi một số lượng vô hạn đối số là một mảng:

Thí dụ

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

Phương includes()thức trả về truenếu một chuỗi chứa một giá trị được chỉ định, nếu không false:

Thí dụ

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

String.startsWith ()

Phương startsWith()thức trả về true nếu một chuỗi bắt đầu bằng một giá trị được chỉ định, nếu không false:

Thí dụ

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

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

String.endsWith ()

Phương endsWith()thức trả về true nếu một chuỗi kết thúc bằng một giá trị được chỉ định, nếu không false:

Thí dụ

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

Array.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:

EPSILON
MIN_SAFE_INTEGER
MAX_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 -(2⁵³ - 1) to +(2⁵³ - 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

❮ Previous Next ❯

Hướng dẫn JS

Phiên bản JS

Đối tượng JS

Các hàm JS

Lớp JS

JS Async

JS HTML DOM

BOM trình duyệt JS

API web JS

JS AJAX

JS JSON

JS so với jQuery

Đồ họa JS

Ví dụ về JS

Tham khảo JS

Javascript ES6

Các tính năng mới trong ES6

Hỗ trợ trình duyệt cho ES6 (2015)

JavaScript let

Thí dụ

JavaScript const

Thí dụ

Hàm mũi tên

Thí dụ

Thí dụ

Vòng lặp For / Of

Vòng qua một mảng

Thí dụ

Vòng qua một chuỗi

Thí dụ

Đối tượng bản đồ JavaScript

Thí dụ

Đối tượng tập hợp JavaScript

Thí dụ

Các lớp JavaScript

Cú pháp

Thí dụ

Sử dụng một lớp học

Thí dụ

Lời hứa về JavaScript

Cú pháp Promise

Ví dụ sử dụng một lời hứa

Loại ký hiệu

Thí dụ

Giá trị tham số mặc định

Thí dụ

Tham số phần còn lại của chức năng

Thí dụ

String.includes ()

Thí dụ

String.startsWith ()

Thí dụ

String.endsWith ()

Thí dụ

Array.from ()

Example

Array keys()

Example

Array find()

Example

Array findIndex()

Example

New Math Methods

The Math.trunc() Method

Example

The Math.sign() Method

Example

The Math.cbrt() Method

Example

The Math.log2() Method

Example

The Math.log10() Method

Example

New Number Properties

Example

Example

Example

New Number Methods

The Number.isInteger() Method

Example