Javascript ES6
ECMAScript 2015 là bản sửa đổi lớn thứ hai của 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
- Từ khóa cho phép
- Từ khóa const
- Chức năng mũi tên
- Người điều hành ...
- Cho/của
- Đối tượng bản đồ
- Đặt đối tượng
- Các lớp học
- Lời hứa
- Biểu tượng
- Thông số mặc định
- Tham số nghỉ chức năng
- String.includes()
- String.startsWith()
- String.endsWith()
- Mục nhập mảng()
- Mảng.from()
- Phím mảng()
- Tìm mảng()
- Mảng findIndex()
- Math.trunc
- Toán.sign
- Math.cbrt
- Toán.log2
- Toán.log10
- Số.EPSILON
- Số.MIN_SAFE_INTEGER
- Số.MAX_SAFE_INTEGER
- Number.isInteger()
- Number.isSafeInteger()
- Phương pháp toàn cầu mới
- Mô-đun JavaScript
Hỗ trợ trình duyệt cho ES6 (2015)
ES6 được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
| Chrome 51 |
Edge 15 |
Firefox 54 |
Safari 10 |
Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
ES6 không được hỗ trợ trong Internet Explorer.
Hãy để JavaScript
Từ khóa let cho phép bạn khai báo một biến có phạm vi khối.
Đọc thêm về let trong chương: JavaScript Let .
hằng số JavaScript
Từ khóa const cho phép bạn khai báo một hằng số (một biến JavaScript có giá trị không đổi).
Các hằng số tương tự như các biến let, ngoại trừ giá trị không thể thay đổi.
Đọc thêm về const trong chương: JavaScript Const .
Chức năng mũi tên
Hàm mũi tên cho phép sử dụng cú pháp ngắn để viết biểu thức hàm.
Bạn không cần từ khóa function , từ khóa return và dấu ngoặc nhọn .
Ví dụ
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Hãy tự mình thử » Chức năng mũi tên không có this riêng của nó. Chúng không phù hợp lắm để định nghĩa các phương thức đối tượng .
Chức năng mũi tên không được nâng 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 , vì biểu thức hàm luôn là giá trị không đổi.
Bạn chỉ có thể bỏ qua từ khóa return và dấu ngoặc nhọn nếu hàm là một câu lệnh. Vì lý do này, việc luôn giữ chúng có thể là một thói quen tốt:
Tìm hiểu thêm về Hàm mũi tên trong chương: Hàm mũi tên trong JavaScript .
Toán tử Spread (...)
Toán tử ... mở rộng một iterable (như một mảng) thành nhiều phần tử hơn:
Ví dụ
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];
Hãy tự mình thử »Toán tử ... có thể được sử dụng để mở rộng một iterable thành nhiều đối số hơn cho các lệnh gọi hàm:
Vòng lặp For/Of
Câu lệnh for/of JavaScript lặ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 qua 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 nút, v.v.
Vòng lặp for/of có cú pháp như 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 , let hoặc var .
iterable - Một đối tượng có thuộc tính có thể lặp lại.
Vòng lặp trên một mảng
Ví dụ
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Hãy tự mình thử »Vòng lặp trên một chuỗi
Ví dụ
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Hãy tự mình thử »Tìm hiểu thêm trong chương: Vòng lặp JavaScript For/In/Of .
Bản đồ JavaScript
Có thể sử dụng Đối tượng làm khóa là một tính năng quan trọng của Bản đồ.
Ví dụ
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Hãy tự mình thử »Tìm hiểu thêm về các đối tượng Bản đồ và sự khác biệt giữa Bản đồ và Mảng trong chương: Bản đồ JavaScript .
Bộ JavaScript
Ví dụ
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Hãy tự mình thử »Tìm hiểu thêm về Đặt đố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.
Luôn thêm một phương thức có tên constructor() :
Cú pháp
class ClassName {
constructor() { ... }
}
Ví dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Ví dụ trên tạo ra một lớp có tên là "Ô tô".
Lớp này có hai thuộc tính ban đầu: "tên" và "năm".
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
Khi bạn có một lớp, bạn có thể sử dụng lớp đó để tạo các đối tượng:
Tìm hiểu thêm về các lớp trong chương: Lớp JavaScript .
Lời hứa 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 chờ kết quả.
Cú pháp hứa hẹn
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 */ }
);
Ví dụ sử dụng một lời hứa
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Tìm hiểu thêm về Lời hứa trong chương: Lời hứa JavaScript .
Loại ký hiệu
Biểu tượng JavaScript là 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 mã nào khác có thể vô tình truy cập được.
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 người thuộc mã của bên thứ ba, họ có thể trộn lẫn các giá trị của nhau.
Sử dụng Symbol() để tạo mã định danh duy nhất, giải quyết vấn đề này:
Ví 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
Hãy tự mình thử »Ghi chú
Các biểu tượng luôn độc đáo.
Nếu bạn tạo hai ký hiệu có cùng mô tả thì 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ố hàm có giá trị mặc định.
Ví dụ
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15 Hãy tự mình thử »Tham số nghỉ chức năng
Tham số còn lại (...) cho phép một hàm xử lý số lượng đối số không xác định dưới dạng một mảng:
Ví 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);
Hãy tự mình thử »String.includes()
Phương thức includes() trả về true nếu một chuỗi chứa một giá trị được chỉ định, nếu không thì false :
Ví dụ
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
Hãy tự mình thử »String.startsWith()
Phương thức startsWith() 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 thì false :
Ví dụ
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
Hãy tự mình thử »String.endsWith()
Phương thức endsWith() 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 thì false :
Mục nhập mảng()
Ví dụ
Tạo một Trình vòng lặp mảng, sau đó lặp lại các cặp khóa/giá trị:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Hãy tự mình thử » Phương entries() trả về một đối tượng Array Iterator với các cặp khóa/giá trị:
[0, "Chuối"]
[1, "Cam"]
[2, "Táo"]
[3, "Xoài"]
Phương thứcentry entries() không thay đổi mảng ban đầu.
Mảng.from()
Phương thức Array.from() trả về một đối tượng Array từ bất kỳ đối tượng nào có thuộc tính độ dài hoặc bất kỳ đối tượng có thể lặp lại nào.
Phím mảng()
Phương thức keys() trả về một đối tượng Array Iterator với các khóa của một mảng.
Ví dụ
Tạo một đối tượng Array Iterator, chứa các khóa của mảng:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Hãy tự mình thử »Tìm mảng()
Phương thức find() trả về giá trị của phần tử mảng đầu tiên vượt qua hàm kiểm tra.
Ví dụ này tìm (trả về giá trị của ) phần tử đầu tiên lớn hơn 18:
Ví dụ
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Mảng findIndex()
Phương thức findIndex() trả về chỉ mục của phần tử mảng đầu tiên vượt qua hàm kiểm tra.
Ví dụ này tìm chỉ mục của phần tử đầu tiên lớn hơn 18:
Ví dụ
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Phương pháp toán mới
ES6 đã thêm các phương thức sau vào đối tượng Math:
-
Math.trunc() -
Math.sign() -
Math.cbrt() -
Math.log2() -
Math.log10()
Phương thức Math.trunc()
Math.trunc(x) trả về phần nguyên của x:
Ví dụ
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
Hãy tự mình thử »Phương thức Math.sign()
Math.sign(x) trả về nếu x âm, null hoặc dương:
Ví dụ
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
Hãy tự mình thử »Phương thức Math.cbrt()
Math.cbrt(x) trả về căn bậc ba của x:
Ví dụ
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
Hãy tự mình thử »Phương thức Math.log2()
Math.log2(x) trả về logarit cơ số 2 của x:
Phương thức Math.log10()
Math.log10(x) trả về logarit cơ số 10 của x:
Thuộc tính số mới
ES6 đã thêm các thuộc tính sau vào đối tượng Number:
-
EPSILON -
MIN_SAFE_INTEGER -
MAX_SAFE_INTEGER
Phương thức Number.isInteger()
Phương thức Number.isInteger() trả về true nếu đối số là số nguyên.
Ví dụ
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
Hãy tự mình thử »Phương thức Number.isSafeInteger()
Số nguyên an toàn là số nguyên có thể được biểu diễn chính xác dưới dạng số có độ chính xác kép.
Phương thức Number.isSafeInteger() trả về true nếu đối số là số nguyên an toàn.
Ví dụ
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Hãy tự mình thử » Số nguyên an toàn là tất cả các số nguyên từ -(2 53 - 1) đến +(2 53 - 1).
Số này an toàn: 9007199254740991. Số này không an toàn: 9007199254740992.
Phương pháp toàn cầu mới
ES6 đã thêm 2 phương thức số toàn cầu mới:
-
isFinite() -
isNaN()
Phương thức isFinite()
Phương thức toàn cục isFinite() trả về false nếu đối số là Infinity hoặc NaN .
Ngược lại nó trả về true :
Phương thức isNaN()
Phương thức toàn cục isNaN() trả về true nếu đối số là NaN . Ngược lại nó trả về false :
Mô-đun
Các mô-đun được nhập theo hai cách khác nhau:
Nhập từ xuất khẩu có tên
Nhập các bản xuất có tên từ tệp Person.js:
import { name, age } from "./person.js";
Nhập từ xuất mặc định
Nhập bản xuất mặc định từ tệp tin nhắn.js:
import message from "./message.js";
Tìm hiểu thêm về Mô-đun trong: Mô-đun JavaScript .
