ES6充满着乐趣,它不但真正提升了我们对 JavaScript 的编程体验,而且显示了 JavaScript 值得活下来。
它有一个从数组和对象中解构值的新特性,使得我们很方便的就能从数组和对象中提取到数据。
让我们看看是如何做到的,我们先从数组开始。
从数组中提取数据
假设我们有一个存着名字的数组:
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
译者注
本文翻译至这里,译者水平有限,错漏缺点在所难免,希望读者批评指正。另:欢迎大家留言讨论。