核心提示:ES6之二(解构赋值)。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。解构分为以下几种:数值解构1. 情况1:少 对 多 -解构成功let...
ES6之二(解构赋值)。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。解构分为以下几种:
数值解构
1. 情况1:少 对 多 ——-解构成功
let [ , , third] = ["foo", "bar", "baz"]; third // "baz" //只输出有赋值的变量 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // [] -----解构成功,属于不完全解构 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
2. 情况2: 多 对 少 ——–解构不成功
let [foo] = []; let [bar, foo] = [1]; 两个foo输出都是undefined
如果等号的右边可遍历的结构,那么将会报错。
// 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};//不具备可以遍历的Iterator接口
对象解构
1.一一对应关系,而且被赋值的是后者,
let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" foo // error: foo is not defined
2.数组本质是特殊的对象,因此可以进行对象属性的结构
let arr = [1, 2, 3]; let {0 : first, [arr.length - 1] : last} = arr; first // 1 last // 3
方括号这种写法,属于“属性名表达式”,
字符串解构
原理:字符串被转换成了类似数组的对象,可以按照对象解构理解使用
数值和布尔值的结构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123; s === Number.prototype.toString // true s//undefined let {toString: s} = true; s === Boolean.prototype.toString // true
除了NULL和undefined以外任何值都具有toString()方法,因此变量 s 都能取到值。
解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于 undefined 和 null 无法转为对象,所以对它们进
行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError NAN和其他对象一样; //ReferenceError: NAN is not defined
函数参数解构
函数参数的解构也可以使用默认值。
function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0]
上面代码中,函数 move 的参数是一个对象,通过对这个对象进行解构,得到变量 x 和 y 的值。如果解构失败, x 和 y 等于
默认值。
注意,下面的写法会得到不一样的结果。
function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, undefined] move({}); // [undefined, undefined] move(); // [0, 0]
上面代码是为函数 move 的参数指定默认值,而不是为变量 x 和 y 指定默认值,所以会得到与前一种写法不同的结果。
undefined 就会触发函数参数的默认值。
[1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]
解构允许设置默认值
ES6 内部使用严格相等运算符( === ),判断一个位置是否有值。所以,如果一个数组成员不严格等于 undefined ,
默认值是不会生效的。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null function f() { console.log('aaa'); } let [x = f()] = [1] x//1 表达式只有用到才会赋值
默认值可以引用已经声明并且解构赋值的其他变量,
注意
由于let和const禁止重复声明的,所以解构的时候一样。但是只要没有第二个let或者const,就不会有问题了。
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法 let x; {x} = {x: 1}; // SyntaxError: syntax error //JavaScript引擎会将 {x} 理解成一个代码块,从而发生语法错误 // 正确的写法 ({x} = {x: 1});
圆括号尽量少用,会引起不必要的报错
使用解构的好处
在于数据的接受,处理和传输