Làm việc với các đối tượng và mảng bằng Rest and Spread

Tìm hiểu hai kỹ thuật hiện đại để làm việc với mảng và đối tượng trong JavaScript

Bạn có thể mở rộng một mảng, một đối tượng hoặc một chuỗi bằng cách sử dụngnhà điều hành trải rộng ....

Hãy bắt đầu với một ví dụ về mảng. Được

const a = [1, 2, 3]

bạn có thể tạo một mảng mới bằng cách sử dụng

const b = [...a, 4, 5, 6]

Bạn cũng có thể tạo bản sao của một mảng bằng cách sử dụng

const c = [...a]

Điều này cũng hoạt động cho các đối tượng. Sao chép một đối tượng với:

const newObj = { ...oldObj }

Sử dụng chuỗi, toán tử spread tạo một mảng với mỗi ký tự trong chuỗi:

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

Nhà điều hành này có một số ứng dụng khá hữu ích. Điều quan trọng nhất là khả năng sử dụng một mảng làm đối số hàm theo một cách rất đơn giản:

const f = (arg1, arg2) => {}
const a = [1, 2]
f(...a)

(trước đây bạn có thể làm điều này bằng cách sử dụngf.apply(null, a)nhưng nó không đẹp và dễ đọc)

Cácphần còn lạihữu ích khi làm việc vớicấu trúc mảng:

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

lan truyền các yếu tố:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018 giới thiệu các thuộc tính nghỉ, giống nhau nhưng đối với các đối tượng.

Thuộc tính còn lại:

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

Thuộc tính trải rộngcho phép tạo một đối tượng mới bằng cách kết hợp các thuộc tính của đối tượng được truyền sau toán tử spread:

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: