Spread Operator

Unpack Array

Ta có thể dùng spread operator để phân rã một mảng:

const evens = [0, 2, 4, 6, 8, 10]
const evenNumbers = [...evens]
 
const odds = [1, 3, 5, 7, 9]
const oddNumbers = [...odds]
 
const wholeNumbers = [...evens, ...odds]
 
console.log(evenNumbers) // [0, 2, 4, 6, 8, 10]
console.log(oddNumbers) // [1, 3, 5, 7, 9]
console.log(wholeNumbers) // [0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9]

Dễ thấy, toán tử spread đã phân tách một mảng (evens/odds) thành nhiều nhiều phần tử đơn lẻ và cho vào mảng khác (evenNumbers, oddNumbers, wholeNumbers).

Đoạn code trên xuất hiện trong phần tìm union của hai JS Set.

Unpack Object

Tương tự, cũng có thể phân rã object bằng spread operator:

const user = {
  name: "Quan",
  title: "Programmer",
  country: "Viet Nam",
  city: "Ho Chi Minh",
}
 
const copiedUser = { ...user, title: "Student" }
 
console.log(copiedUser) // { name: "Quan", title: "Student", country: "Viet Nam", city: "Ho Chi Minh" }

Tip

Trong lúc phân rã, cũng có thể chỉnh sửa dữ liệu (trong ví dụ trên ta đã chuyển title thành “Student”).

Sao chép hai object vào một object:

const person = {
  name: "Quân",
  age: 20,
  school: "HCMUS",
}
 
const skills = {
  fe: "ReactJS",
  be: "NodeJS",
}
 
const dev = {
  ...person,
  ...skills,
}

Use with Arguments

Có thể dùng spread operator kèm theo tên của một mảng hoặc đối tượng bất kỳ để làm đối số truyền vào hàm:

function sumThree(a, b, c) {
  return a + b + c
}
 
const numbers = [1, 4, 5]
 
console.log(sumThree(...numbers)) // 10