解构赋值的定义
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,本质是一种模式匹配。
数组的解构赋值
按照对应位置,对变量赋值,如果解构不成功,变量的值就等于undefined。
同时解构赋值允许指定默认值。只有当一个数组成员严格等于undefined,默认值才会生效。
let [a, b, c] = [1, 2, 3]; //a=1,b=2,c=3
let [x, , y] = [1, 2, 3]; //x=1,y=3
let [foo] = []; //foo=undefined
let [foo = 1] = []; //foo=1
let [foo = 1] = [null]; //foo=null
对象的解构赋值
对象的解构是按照属性来进行解构赋值的。如果解构不成功,变量的值就等于undefined。
对象的解构也可以指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。
let { a: foo, b: bar } = { a: "123", b: "456" } //foo=123 bar =456
let { a: a, b: b } = { a: "123", b: "456" } //a=123 b=456
let { a, b } = { a: "123", b: "456" } //a=123 b=456
//第三种写法等于第二种,因为es6中可以在对象中直接写入变量
let { a, c } = { a: "123", b: "456" } //a=123 c=undefined
let { a, c = 3 } = { a: "123", b: "456" } //a=123 c=3
其他的解构赋值
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。
let { toString: s } = 123 //s是对象的toString方法
let { toString: s } = true; //s是对象的toString方法
let { prop: x } = undefined; //报错
let { prop: y } = null; // 报错
const [a, b, c, d, e] = "hello" // a=h b=e ...
const { 0: a, 1: b, 2: c, 3: d, 4: e } = "hello" //a=h b=e ...
//字符串被转为类数组对象,故可以使用数组和对象解构赋值
解构赋值的用途
- 交换变量的值
let x = 1 let y = 2 [x, y] = [y, x]
- 方便取值
let obj = { a:1, b:2, c: function(){return 1} } let {a,b} = obj //代替以前 let a= obj.a, b=obj.b 的写法
- 输入模块的指定方法
import {a,b} from 'a.js'
- 遍历 Map 结构
- 函数参数的定义(不建议使用,容易产生混乱)
注意点
ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。(不要在模式中放置圆括号)
有几个简单的规则:
- 变量声明语句,解构赋值不得使用圆括号
- 函数参数,解构赋值不得使用圆括号
- 赋值语句的模式,解构赋值不得使用圆括号
let [(a)] = [1]; //报错 变量声明语句
let ({x: c}) = {}; //报错 变量声明语句
([a]) = [5]; //报错 赋值语句的模式
[(b)] = [3]; // 正确 赋值语句的非模式部分,可以使用圆括号。可以使用圆括号的唯一情况
({x} = {x: 1}); // 正确
总之,能不使用圆括号尽量不使用。