ES6之数组解构

从数组中提取数据

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值