Toán tử Spread JavaScript

Tìm hiểu kiến thức cơ bản về Toán tử Spread 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ụng toán tử spread....

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 = (foo, bar) => {}
const a = [1, 2]
f(...a)

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]
const [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 result = 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 }

Đây cũng là cách hoàn hảo để hợp nhất hai đối tượng đơn giản thành một:

const object1 = {
  name: 'Flavio'
}

const object2 = { age: 35 }

const object3 = {…object1, …object2 }

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: