ES6之数组解构

╰+攻爆jí腚メ 2022-05-24 10:34 203阅读 0赞

## 从数组中提取数据 ##

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

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` 变量。

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6语法之：解构赋值

先要知道，这个用法有一套提取值的**模式**。解构就是“按照一定模式，从数组和对象中提取值”。其次，了解一些使用场合，比如下面，一次从对象p取得两个值。 c...

喜欢ヅ旅行/ 2024年04月20日 00:19/ 0 赞/ 57 阅读

相关 es6 数组解构

let \[a, b, c,d\] = \["aa", "bb", 77,88\]; 嵌套数组解构 let \[a,b,\[c,d\],e\] =\["aa",'

悠悠/ 2022年06月09日 14:44/ 0 赞/ 182 阅读

相关 ES6之数组解构

从数组中提取数据假设你有如下的数组，里面是几个人的名字： const names = ['Luke', 'Eva', 'Phil']; 接下来，使用解构从里

╰+攻爆jí腚メ/ 2022年05月24日 10:34/ 0 赞/ 204 阅读

相关 ES6之对象解构

最基本的解构在对象中提取某个字段 const user = { id: 123, name: 'hehe' };

谁践踏了优雅/ 2022年05月24日 10:24/ 0 赞/ 288 阅读

相关《深入理解ES6》——对象解构和数组解构

为何使用解构功能在ES5及早期版本中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码，如下： let options

冷不防/ 2022年05月09日 10:26/ 0 赞/ 257 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 369 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 425 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 489 阅读

相关 es6 数组解构

1. 用法 [a, b] = [b, a] let [a, b] = [1, 2] // a=1, b=2 l

不念不忘少年蓝@/ 2021年09月18日 21:54/ 0 赞/ 420 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 449 阅读