JS的对象、数组等处理方法：解构

对象方法简写

你可以在定义方法时省略function和 :：

const obj = {

  insteadOfThis: function() {

    // do stuff

  },

  youCanDoThis() {

    // do stuff

  }

}

请注意，以上不是箭头函数，只是对象方法的简写语法。

解构对象

对象解构是获取对象并将其内部属性提取到对象外部变量的一种方法：

const obj = { x: 1, y: 2 }

// 不使用解构语法

const x = obj.x

const y = obj.y

// 使用解构语法

const { x, y } = obj

x // 1

y // 2

// 你也可以在函数参数中使用解构

// 注意这里函数的参数只有一个

function add({ x, y }) {

  return x + y

}

add({ x: 3, y: 4 }) // 7

刚开始你可能会有点混乱，因为现在花括号不仅可以用来声明对象，也可以用来根据上下文对其进行解构。

// 如果花括号在等式的右边，那么你正在声明一个对象

const obj = { x: 1, y: 2 }

// 如果花括号在等式左边，那么你正在解构一个对象

const { x } = obj;

解构数组

数组解构的工作原理与对象解构几乎相同，但使用方括号而不是花括号：

const arr = ['michael', 'jackson']

const [first, last] = arr

first // michael

last // jackson

它们之间的另一个区别是对象具有属性名称，因此必须在解构的时候使用这些属性名称。由于数组值是按顺序排列的，并且没有名称，因此，解构的顺序与我们获得的值是相关联的。换句话说，first是解构中的第一个变量，因此它获取数组的第一个值。

对象属性简写

如果属性名称与对象中的变量名称相同，则可以使用属性简写：

// 这里需要写两遍 name

const name = 'Michael'

const person = { name: name }

// 对象属性简写

const person = { name }

... 展开语法

创建对象或数组时，一种从现有对象或数组的属性创建新属性的方法。

// 定义一个person数组

const person = ['Michael', 'Jackson']

// 如果要把 person 数组加到新的 profile 数组里，按下面这么写的话

const profile = [person, 'developer']

// 结果会是数组里包含着一个数组

profile // [['Michael', 'Jackson'], 'developer']

profile[0] // 这是个数组 ['Michael', 'Jackson']

profile[1] // 这是字符串 'developer'

// 现在 我们用 ...展开语法

const profile = [...person, 'developer']

// 结果就变成了

profile // ['Michael', 'Jackson', 'developer']

// 对象也可以用 ...展开语法

const person = { first: 'Michael', last: 'Jackson' }

const profile = { ...person, occupation: 'developer' }

profile // { first: 'Michael', last: 'Jackson', occupation: 'developer' }

... 剩余语法

剩余语法(Rest syntax) 看起来和展开语法完全相同，不同点在于, 剩余参数用于解构数组和对象。从某种意义上说，剩余语法与展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。

const profile = { first: 'Michael', last: 'Jackson', occupation: 'developer' }

const { occupation, ...rest } = profile

occupation // developer

rest // { first: 'Michael', last: 'Jackson' }

剩余语法用于函数参数

function myFunction(first, last, ...rest) {

  return rest

}

console.log(myFunction('Michael', 'Jackson', 'Developer', 'California'))

// output: ['Developer', 'California']