ES6：解构——JavaScript 从数组和对象中提取数据的优雅方法

本文编译：胡子大哈

翻译原文：huziketang.com/blog/posts/…

英文链接：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复制代码

这种场景下，fourth 是 underfined。

这在不少场景下都是咱们不想见到的，因此能够当数组中没有那么多的值的时候，咱们能够提早给变量赋上默认值。

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 中提取 name 和 age。

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 函数，打印出 name 和 age。

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

    toString(person); // Luke is 24 years old复制代码

不过要提醒你们的是，这不是一个好的编程习惯，若是别人使用你的函数，很容易形成误解，调试起来特别不方便，这里只是告诉你们能够这样进行解构而已。

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

若是你认为文章中还须要注意什么，或者添加什么，请让我知道。

---

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