es6-变量的解构赋值
2017-12-26 18:29
721 查看
es6中变量赋值的方式
1.方式1-直接赋值let a = 1; let b = 2; let c = 3;
2.模式匹配”左右结构相等赋值
let [a, b, c] = [1, 2, 3]; //a=1; //b=2; //c=3
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []
3.如果解构不成功,变量的值就等于undefined。
let [foo] = []; let [bar, foo] = [1]; //foo=undefined;
4.结构不完全相等,依然能够解析成功
let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
6.如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。
// 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};
7.赋值带有默认值
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null
对象的解析
1.基本解析let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"
2.对象的解析和位置没有关系,和键名有关系
let { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined
3.变量名和属性名不一样
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world'
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" foo // error: foo is not defined 上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
3.嵌套赋值
let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
4.对象的解析模式也可以设置默认值
var {x, y = 5} = {x: 1}; x // 1 y // 5
5.解析不成功的时候
默认值生效的条件是,对象的属性值严格等于undefined。 var {x = 3} = {x: undefined}; x // 3 var {x = 3} = {x: null}; 4000 x // null
let {foo} = {bar: 'baz'}; foo // undefined
6.如果子对象所在的父对象是undefined那么报错,
// 报错 let {foo: {bar}} = {baz: 'baz'};
上面代码中,等号左边对象的foo属性,对应一个子对象。该子对象的bar属性,解构时会报错。原因很简单,因为foo这时等于undefined,再取子属性就会报错,请看下面的代码
7.给一个已经声明的变量再次声明时,要注意。
// 错误的写法 let x; {x} = {x: 1}; // SyntaxError: syntax error 上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。 // 正确的写法 let x; ({x} = {x: 1});
8.特殊的解析
({} = [true, false]); ({} = 'abc'); ({} = []); 上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
相关文章推荐
- ES6第二章 关于“变量的解构赋值”不得不说的事~
- ES6中变量的解构赋值
- ES6中的变量解构赋值的书写模式
- 【es6】【变量的解构赋值】【数组解构赋值】
- 【es6】【变量的解构赋值】【字符串,数值和布尔值解构】【函数参数的解构赋值】【用途】
- ES6学习之变量的解构赋值
- es6学习篇之 let和const命令 、变量的解构赋值
- js -- ES6(三)-- 变量的解构赋值(根据阮一峰ES6标准入门整理 更新中。。。)
- es6 变量的解构赋值
- ES6小实验-变量的解构赋值
- ES6变量解构赋值的应用
- ES6(二) Destructuring-变量的解构赋值
- ES6入门——变量的解构赋值
- es6分享——变量的解构赋值
- 【ES6】变量的解构赋值
- ES6—变量 解构赋值
- ES6--变量的解构赋值
- ES6:变量的解构赋值
- ES6学习——变量的解构赋值
- ES6学习3章:变量的解构赋值