11

本文编译:胡子大哈

翻译原文:http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6
英文连接:ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript

转载请注明出处,保留原文链接以及作者信息

ES6 有很多新特性,它很大程度上提升了 JavaScript 的编程体验,并且也告诉外界,JavaScript 依旧强势。

其中一个新特性是其对数组和对象的解构,通过解构方法从数组和对象中提取数据变得非常简单和方便。接下来看一下它是如何做到的,我们从数组开始讲起。

从数组中提取数据

假设你有如下的数组,里面是几个人的名字:

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

接下来,使用解构从里面提取数据。

从数组中取元素

首先从最基本的开始——提取数组中第一个元素。

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

ok,下面分析一下这个语法都做了什么。把一个变量用中括号括起来,表示我们想要取得 names 数组中的第一个元素,并且把它分配给指定的变量,本例中即变量 first

那么现在想要提取几个元素,比如第一个和第二个怎么办呢?很简单,在中括号中添加变量就可以。这样会从数组中顺序提取几个元素分配给指定的变量。

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

元素缺失时的默认值

以上面的数组为例,如果我们要取 4 个值,而数组中只有 3 个值会发生什么呢?

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

这种场景下,fourthunderfined

这在很多场景下都是我们不想见到的,所以可以当数组中没有那么多的值的时候,我们可以提前给变量赋上默认值。

    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']  

通过在最后一个变量前加 ... 标记,这个意思是分配数组中剩下的所有元素给 rest 变量。

解构对象

ok,数组的解构已经都学会了,下面看一下从对象中提取数据,假设有如下描述一个人的对象。

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

从对象中提取数据

依然从最基本的开始,提取从 person 中提取 nameage

    const {name, age} = person;  
    console.log(name, age); // 'Luke' '24'  

可以看到,和从数组中提取数据的语法都是一样的,唯一的不同是把方括号替换成了花括号。

提取嵌套值

假设想要提取对象结构中深层次的值该怎么处理?比如 person 中的 hobby。代码如下。

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

通过冒号可以描述对象中的路径,这样就可以取到对象中深层的嵌套值了。

数据缺失时的默认值

如在解构数组时的处理方案一样,当想要抽取的值不存在时,也可以给对象里的值赋默认值。如下面代码,想要提取 hometown 属性,并且给定 Unknown 默认值。

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

解构函数参数

在结束本文之前,我们来看最后一个例子——解构函数参数。

假设你有一个函数,接受一个对象作为参数。那么你可以直接在参数列表中对对象进行解构。例如下面这个 toString 函数,打印出 nameage

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

不过要提醒大家的是,这不是一个好的编程习惯,如果别人使用你的函数,很容易造成误解,调试起来特别不方便,这里只是告诉大家可以这样进行解构而已。

ok,那么到现在对于数组和对象的解构问题大家应该都学会了,后面也还会介绍一些 JavaScript 的一些新特性,欢迎大家对我保持关注。

如果你认为文章中还需要注意什么,或者添加什么,请让我知道


我最近正在写一本《React.js 小书》,对 React.js 感兴趣的童鞋,欢迎指点


胡子大哈
1.7k 声望1.6k 粉丝

前百度高级工程师,知乎“前端大哈”专栏作者,全栈架构师。