从数组中提取数据

假设我们有一个存着名字的数组：

const names = ['Luke', 'Eva', 'Phil'];

接下来让我们用解构来从中提取数据。

从数组中提取元素

让我们从最最基本的提取第一个元素开始：

const [first] = names;
console.log(first); // Luke

现在，我们来分析这段代码做了些什么。一个变量被方括号包含，这就意味着我们想从 names 数组拿到第一个元素并且将这个元素赋值给变量，在我们的例子中首先把数组中第一个元素的值赋给了变量。

现在，假如我们想从数组中拿到多个元素的值，比如说第一和第二个，我们该如何做？其实很简单，我们只需要在方括号中添加多个变量就可以实现。这样在数组前列的新元素就会被提取并且赋值给定义的变量。

const [first, second] = names;
console.log(first, second); // Luke Eva

假设我们从只有三个元素的数组中解析四个元素，会发生什么?

const [first, second, third, fourth] = names;  
console.log(fourth); // undefined

在这种情况下，fourth 为 undefied 。
我们可以给第四个元素设置一个默认的值，当结构时数组元素不足时，第四个值默认就是我们设置的值。

const [first, second, third, fourth='Martin'] = names;  
console.log(fourth); // 'Martin'

现在我们已经知道了从数组开始时解构，但是，我们经常遇见我们只需要数组中一部分的值，所以就会存在略过数组的值的情况。
不过很棒的地方就是，解构其实可以满足我们这种需求：

var [first, , second] = names;  
console.log(first, second); // 'Luke' 'Phil'

其实很简单只需要把略过的值得逗号加上，就可以略过数组中的值。

解构不同的值现在变得很简单，但是很多情况下我们需要保留一部分没有被解构的数组。
我们现在来看看如何做到：

var [first, ...rest] = names;  
console.log(rest); // ['Eva','Phil']

在变量前加上 ... 就能够将剩下部分数组保存到变量中。

我们已经知道了如何解构数组，现在让我们来看看如何从对象中解构值，先看这个对象

const person = {  
  name: 'Luke',
  age: '24',
  facts: {
    hobby: 'Photo',
    work: 'Software Developer'
  }
}

我们从最基础的开始，从Person 对象中解构name 和 age 的值。
···
const {name, age} = person;
console.log(name, age); // 'Luke' '24'
···
我们可以看到，几乎和数组的写法一致，只是把方括号换成大括号。

假设我们现在想解构对象深层次的值，比如说 person 对象的 hobby：

const {facts: {hobby}} = person;  
console.log(hobby); // 'Photo'

通过冒号，我们可以找到属性的路径，从而可以解析我们需要哪个值。

我们在解析数组时可以给解构变量设置默认值，对象也同样可以。为了看到是怎样做的，我们我们可以尝试解构默认值为 Unknow 的 hometown。

const {hometown = 'Unknown'} = person;  
console.log(hometown); // 'Unknown'

结束之前，我们来看看解构最后一个应用，函数参数解构。假设你的函数有一个对象类型的参数，然后你就可以直接在参数表中解构变量。
我们尝试写一个叫做 tostring 的函数，函数中将打印一个人的名字和年龄。

const toString = ({name, age}) => {  
  return `${name} is ${age} years old`;
}

toString(person); // Luke is 24 years old

译者注

本文翻译至这里，译者水平有限，错漏缺点在所难免，希望读者批评指正。另：欢迎大家留言讨论。