春风得意马蹄疾
一日看尽长安花

深入理解ES6解构赋值:二、数组解构

上一篇:深入理解ES6解构赋值:一、对象解构

【数组解构】

与对象解构的语法相比,数组解构就简单多了,它使用的是数组字面量,且解构操作全部在数组内完成,而不是像对象字面量语法一样使用对象的命名属性

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

在这段代码中,我们从colors数组中解构出了"red"和"green"这两个值,并分别存储在变量firstColor和变量secondColor中。在数组解构语法中,我们通过值在数组中的位置进行选取,且可以将其存储在任意变量中,未显式声明的元素都会直接被忽略

在解构模式中,也可以直接省略元素,只为感兴趣的元素提供变量名

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"

这段代码使用解构赋值语法从colors中获取第3个元素,thirdColor前的逗号是前方元素的占位符,无论数组中的元素有多少个,都可以通过这种方法提取想要的元素,不需要为每一个元素都指定变量名

【解构赋值】

数组解构也可用于赋值上下文,但不需要用小括号包裹表达式,这一点与对象解构不同

let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

这段代码中的解构赋值与上一个数组解构示例相差无几,唯一的区别是此处的firstColor变量和secondColor变量已经被定义了

【变量交换】

数组解构语法还有一个独特的用例:交换两个变量的值。在排序算法中,值交换是一个非常常见的操作,如果要在ES5中交换两个变量的值,则须引入第三个临时变量

// 在 ES5 中互换值
let a = 1,
    b = 2,
    tmp;
tmp = a;
a = b;
b = tmp;
console.log(a); // 2
console.log(b); // 1

在这种变量交换的方式中,中间变量tmp不可或缺。如果使用数组解构赋值语法,就不再需要额外的变量了

// 在 ES6 中互换值
let a = 1,
    b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1

在这个示例中,数组解构赋值看起来像是一个镜像:赋值语句左侧(也就是等号左侧)与其他数组解构示例一样,是一个解构模式;右侧是一个为交换过程创建的临时数组字面量。代码执行过程中,先解构临时数组,将b和a的值复制到左侧数组的前两个位置,最终结果是变量互换了它们的值

注意:如果右侧数组解构赋值表达式的值为null或undefined,则会导致程序抛出错误

【默认值】

也可以在数组解构赋值表达式中为数组中的任意位置添加默认值,当指定位置的属性不存在或其值为undefined时使用默认值

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

在这段代码中,colors数组中只有一个元素,secondColor没有对应的匹配值,但是它有一个默认值"green",所以最终secondColor的输出结果不会是undefined

【嵌套数组解构】

嵌套数组解构与嵌套对象解构的语法类似,在原有的数组模式中插入另一个数组模式,即可将解构过程深入到下一个层级

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

在此示例中,变量secondColor引用的是colors数组中的值"green",该元素包含在数组内部的另一个数组中,所以seconColor两侧的方括号是一个必要的解构模式。同样,在数组中也可以无限深入去解构,就像在对象中一样

【不定元素】

函数具有不定参数,而在数组解构语法中有一个相似的概念——不定元素。在数组中,可以通过...语法将数组中的其余元素赋值给一个特定的变量

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

数组colors中的第一个元素被赋值给了firstColor,其余的元素被赋值给restColors数组,所以restColors中包含两个元素:"green"和"blue"。不定元素语法有助于从数组中提取特定元素并保证其余元素可用

【数组复制】

在ES5中,开发者们经常使用concat()方法来克隆数组

// 在 ES5 中克隆数组
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

concat()方法的设计初衷是连接两个数组,如果调用时不传递参数就会返回当前函数的副本

在ES6中,可以通过不定元素的语法来实现相同的目标

// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

在这个示例中,我们通过不定元素的语法将colors数组中的值复制到clonedColors数组中

注意:在被解构的数组中,不定元素必须为最后一个条目,在后面继续添加逗号会导致程序抛出语法错误

下一篇:深入理解ES6解构赋值:三、混合解构和其他解构

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » 深入理解ES6解构赋值:二、数组解构
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x