变量的解构赋值
2017-08-08 18:36
501 查看
数组的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [x, , y] = [1, 2, 3]; x // 1 y // 3
如果解构不成功,变量的值就等于undefined。
//undefined let [foo] = []; let [bar, foo] = [1];
如果等号的右边不是数组,那么将会报错。
// 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};
解构赋值允许指定默认值。但如果一个数组成员不严格等于undefined,默认值是不会生效的。
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
对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。let { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined
如果变量名与属性名不一致,必须写成下面这样。
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world'
对象的解构也可以指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。
var {x = 3} = {x: undefined}; x // 3 var {x = 3} = {x: null}; x // null
如果解构失败,变量的值等于undefined
let {foo} = {bar: 'baz'}; foo // undefined
字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" //类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。 let {length : len} = 'hello'; len // 5
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true //上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。
函数参数的解构赋值
函数的参数也可以使用解构赋值。function add([x, y]){ return x + y; } add([1, 2]); // 3 //函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。
变量的解构赋值用途
交换变量的值let x = 1; let y = 2; [x, y] = [y, x];
从函数返回多个值
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
函数参数的定义。解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
快速提取 JSON 数据的值。
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
相关文章推荐
- ES6:变量的解构赋值
- ES6 - 变量的解构赋值
- es6-变量解构赋值
- ES6之变量的解构赋值
- ECMAScript6.0学习之第四篇变量的解构赋值
- 分针网——每日分享:ECMAScript 6之变量的解构赋值
- ES6(四) 变量的解构赋值
- 《ES6入门(第二版)》学习笔记【精华】(2)-变量的解构赋值
- 3.变量的解构赋值
- 【ES6】变量的解构赋值
- 变量的赋值---字符串的解构赋值
- 《ES6标准入门》:变量的解构赋值
- es6学习篇之 let和const命令 、变量的解构赋值
- ES6小实验-变量的解构赋值
- 变量的解构赋值 ES6
- ES6之——变量的解构赋值
- ES6—变量 解构赋值
- ES6--变量的解构赋值
- 变量的解构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值