码迷,mamicode.com
首页 > 其他好文 > 详细

ES6中的解构赋值

时间:2017-07-03 13:53:30      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:声明   简单   strong   nbsp   rest   john   log   []   code   

在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值。

var str = ‘hello word‘;

左边一个变量名,右边可以是字符串,数组或对象。

ES6 中增加了一种更为便捷的赋值方式。称为 Destructuring 。好像大家普遍翻译为解构。解构赋值允许我们将数组或对象的属性赋予给任何变量,该变量的定义语法与数组字面量或对象字面量很相似。举个例子可以直观的说明。

let [speak, name] = [‘hello‘, ‘destructuring‘];
console.log( speak + ‘ ‘ + name ); // hello destructuring

数组的解构赋值

用更加直白的话来描述就是,等号两边保持相同的形式(数组对应数组,对象对应对象),则左边的变量就会被赋予对应的值。如果对应的右边值缺失,缺失部分变量值为 undefined ,如果右边值多余,依旧能够正常解构。

 

// ES6 中
let arr = [1,2,3,4,5];
let [el1, el2] = [arr];
// 或者
let [el1, el2] = [1,2,3,4,5];
// el1 => 1, el2 => 2 

 

解构赋值也是可嵌套的:

let value = [1, 2, [3, 4, 5]];
let [el1, el2, [el3, el4]] = value;

同样可以通过简单地在指定位置省略变量来忽略数组中的某个元素:

let value = [1, 2, 3, 4, 5];
let [el1, , el3, , el5] = value;

更进一步,默认值同样也可以被指定:

let [firstName = "John", lastName = "Doe"] = [];

ES6中,提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法——“rest“模式:

let [head, ...tail] = [1, 2, 3, 4];  
console.log(tail);  // [2, 3, 4]  

 

ES6中的解构赋值

标签:声明   简单   strong   nbsp   rest   john   log   []   code   

原文地址:http://www.cnblogs.com/ke-nan/p/7110551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!