使用Rest and Spread处理对象和数组

学习两种现代技术来处理JavaScript中的数组和对象

您可以使用点差算子 ...

让我们从一个数组示例开始。给定

const a = [1, 2, 3]

您可以使用创建一个新数组

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

您还可以使用创建一个数组的副本

const c = [...a]

这也适用于对象。克隆对象:

const newObj = { ...oldObj }

使用字符串,spread运算符使用字符串中的每个字符创建一个数组:

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

该运算符有一些非常有用的应用程序。最重要的一个功能是以一种非常简单的方式将数组用作函数参数的能力:

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

(过去,您可以使用f.apply(null, a)但这不是很好的可读性)

休息元素在使用时很有用阵列解构

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

传播元素

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

ES2018引入了其他属性,其余属性与对象相同。

休息属性

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 }

价差属性允许通过组合在点差运算符之后传递的对象的属性来创建新对象:

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

免费下载我的JavaScript初学者手册


更多js教程: