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

GraphQuery 发布于2019-08-20 16:02 / 954人阅读

摘要：跳过数组中的元素学会了如何按顺序从数组中提取数据。解构方法中提供了很好的解决方案。从对象中提取数据依然从最基本的开始，提取从中提取和。

本文编译：胡子大哈

翻译原文：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

这种场景下，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 感兴趣的童鞋，欢迎指点。

GPU云服务器云服务器 js，对象中增加数据的方法从视频中提取音频 js中数据和对象的关系图 js从日期中提取时间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82669.html

[译] 最深刻而易懂的ES6解构教程

摘要：被解构的数据项位于赋值运算符的右侧，可以是任何数组和对象的组合，允许随意嵌套。数组模式位于赋值运算符的左侧，被结构的数组在其右侧。解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。本文将深...

AlphaGooo 2019-08-22 10:33 评论0 收藏0
ES6系列---解构

摘要：的解构特性，可以简化这项工作。必须传值的解构参数如果调用函数时不提供被解构的参数会导致程序抛出错误程序报错缺失的第三个参数，其值为。在编码过程中，我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。ES6的解构特性，可以简化这项工作。解构是一种打破数据结构，将其拆分为更小部分的过程。未使用解构的做法 let options = { repeat: true, ...

baoxl 2019-08-20 18:52 评论0 收藏0
es6的解构赋值、扩展运算符、rest参数使用

摘要：模板字符串甚至还能嵌套解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免对象的使用。 es6中较为常用的书写风格为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1,...

xuweijian 2019-08-21 16:47 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637