ES6：解构——JavaScript 从数组和对象中提取数据的文雅要领

2019年8月31日 302次阅读 来源: 胡子大哈

本文编译：胡子大哈

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

转载请说明出处，保存原文链接以及作者信息

《ES6：解构——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 感兴趣的童鞋，迎接指导。

    原文作者：胡子大哈
    原文地址: https://segmentfault.com/a/1190000009173072
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞