ES6中的解构赋值

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

var str = 'hello word';es6

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

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 

 

解构赋值也是可嵌套的:spa

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;

更进一步,默认值一样也能够被指定:rest

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

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

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

 当默认值不存在,变量值就等于 undefinedhtm

let [missing] = [];  
console.log(missing);  // undefined 

这里的数组,指的是部署了 [Iterator](http://www.2ality.com/2015/02/es6-iteration.html) 接口的数据结构。

对象的解构赋值

和数组的用法相相似,一个主要的不一样点是,对象是无次序排列的,因此变量必须和属性名相同。

let person = {firstName: "John", lastName: "Doe"};
let {firstName, lastName} = person;

解构另外一个特性是,变量 keys 可使用计算后的属性名,可是若是你对这容易混淆的话,不建议使用。

let person = {firstName: "John", lastName: "Doe"};
let {firstName: name, lastName} = person;
// `name`变量将会被声明为 `person.firstName` 的值

函数参数的解构赋值

函数的参数也能够解构赋值。

function add({x: 0, y: 0}){
    return x+y;
}
add({1,2}); // 3

null 和 undefined

当尝试解构 null 和 undefined 的时候会报错。这是由于使用对象赋值模式时,被解构的值必需可以转换成一个对象(object)。大多数的类型均可以转换为一个对象,但null和undefined却并不能被转换。

其它

解构赋值的好处有不少,好比

  • 两个值的交换

  • 函数参数默认值

  • 函数返回值

  • 正则匹配的返回值

  • 快速处理 JSON 数据

  • 遍历Map结构ES6 的解构赋值给 JS 的书写带来了很大的便利性,同时也提升了代码的可读性。可是也须要注意一些问题,避免拔苗助长。

    • 关于圆括号的问题,欢迎翻看阮一峰老师的博客

    • 解构的嵌套尽可能不要太深

    • 函数有多个返回值时,尽可能使用对象解构而不用数组解构,避免出现顺序对应问题

    • 已声明过的变量不能用于解构

相关文章
相关标签/搜索