Series về ES6: Rest params, Destructuring and For...of

Đào Xuân Truyền -

Trong phần trước thì chúng ta đi tìm hiểu về cách khai báo biến và một vài chức năng mới. Trong phần tiếp theo của series,  chúng ta tiếp tục đi giới thiệu về

  • Rest params
  • Destructuring
  • For...of
  1. Rest params

ES6 cung cấp thêm cho người dùng một loại tham số mới gọi là rest params có tiền tố là dấu ba chấm (...). Nó cho phép biểu diễn số lượng vô hạn các đối số dưới dạng mảng.

const [a, b, ...arr] = [1, 2, 3, 4, 5]
console.log(arr) // [3, 4, 5]

//object 
function myFunc(a, b, ...args) {
  console.log(args)
}

myFunc({a: 1}, {b: 2}, {c: 3}, {d: 4}); // {c: 3}, {d: 4}

Lưu ý rằng các tham số còn lại phải nằm ở cuối danh sách đối số. Đoạn mã sau sẽ dẫn đến lỗi:

const [a, ...arr, b] = [1, 2, 3, 4, 5]
console.log(arr) // SyntaxError: Rest element must be last element

Sử dụng với arrow function:

Trong một arrow function không có truyền vào đối tượng arguments. Do vậy, nếu muốn truyền một đối số cho arrow function, chúng ta có thể dử dụng rest parameters.

const username = (...name) => {
    return name.reduce(function (prev, curr) {
		return prev + " " + curr;
	});
}
let fullName = username("Hello", "my", "name");
console.log(fullName)  // Hello my name

2. Destructuring

Destructuring là một cách thức mà nó cho phép bạn gán các thuộc tính của một Object hoặc một Array.  Đây là kỹ thuật giúp chúng ta tạo ra các variable bằng cú pháp ngắn gọn và bớt lặp lại code.

  • Sử dụng để khởi tạo giá trị mặc định là thành phần của array hoặc thuộc tính của object là undefined:

Ví dụ Array

const [age = 0, name] = [undefined, "Haposoft"];
console.log(age); // Output: 0
console.log(name); // Output: Haposoft

Ví dụ Object

const { age = 0, name } = { age: undefined, name: "Haposoft" };

console.log(age); // Output: 0
console.log(name); // Output: Haposoft
  • Nếu muốn lấy một thuộc tính ở sâu trong một object:

Cách lấy giá trị thông thường

// Nếu muốn lấy firstName
const { person } = { person: { fullName: { firstName: "Hapo", lastName: "soft" }, {age: 20} } };
const { fullName } = person;
const { firstName } = fullName;

console.log(firstName) //Output: Hapo

Cách lấy giá trị ngắn gọn với object

// Nếu muốn lấy firstName
const { person: { fullName: { firstName } } } = { person: { fullName: { firstName: "Hapo", lastName: "soft" }, age: 18 } };

console.log(firstName) //Output: Hapo
  • Giúp ích trong việc tránh khởi tạo bị trùng tên biến trong phạm vi
const name = "Haposoft";
const { name } = { person: { name: "Haposoft" } };
console.log(name) // SyntaxError: Identifier 'name' has already been declared

Có thể khai báo lấy object để tránh bị trùng lặp tên biến

const name = "Haposoft";
const { person: { name: anotherName } } = { person: { name: "Haposoft" } };

console.log(anotherName) // Output: Haposoft

3. For...of

For of mới được sử dụng trong ES6 còn For in thì đã được sử dụng trong javascript từ trước.  For of giống với spread operator, cũng chỉ sử dụng được với các interable object. 

//array
const currencies = ['Dong', 'USD', 'euro', 'yuan'];

for (const index in currencies) {
    console.log(index, currencies[index]);
}
// 0 Dong
// 1 USD
// 2 euro
// 3 yuan

for (const value of currencies) {
    console.log(value);
}
// Dong
// USD
// euro
// yuan

for of bao gồm cả key, value:

for (const [index, value] of currencies.entries()) {
    console.log(value);
}
// 0 Dong
// 1 USD
// 2 euro
// 3 yuan

for of khá là đa năng khi nó có thể thực hiện loop với array, object, DOM nodes. 

//object
const ratings = [
    {user: 'John',score: 3},
    {user: 'Jane',score: 4},
    {user: 'David',score: 5},
    {user: 'Peter',score: 2},
];

let sum = 0;
for (const {score} of ratings) {
    sum += score;
}

console.log(`Total scores: ${sum}`);

4. Tổng kết

Hy vọng những thứ mình chia sẻ trên sẽ giúp ích nhiều cho các bạn mới bắt đầu học Javascript và ES6. Trong phần tiếp theo của series, chúng ta  trung tìm hiểu về class trong ES6

Tài liệu tham khảo: https://www.javascripttutorial.net/es6/

Xem tiếp phần tiếp theo của series tại đây.

hoặc tham khảo phần trước của series tại đây.