ES6中变量的解构赋值
2018-03-13 17:29
603 查看
数组的解构赋值
数组的解构赋值,从数组中提取值,按照对应位置,对变量进行赋值。本质上是属于“模式匹配”,只要等号两边的模式相同,左边的变量就会赋予对应的值。
let [head, ...tail] = [1, 2, 3, 4];
1 解构不成功,变量的值就等于undefined。
let [x, y, ...z] = ['a']; let [foo] = []; let [bar, baz] = [1];
2 不完全解构,即等号左边的模式,只能匹配一部分等号右边的数组,这种情况下,解构依然成功
let [x, y] = [1,2,3]; console.log(x, y); // 1, 2 let [a, , d] = [1, [2, 3], 4]; console.log(a, b, d); // 1, 2, 4
3 默认值
let [x, y='b'] = ['a']; console.log(x, y); // a b let [x, y='b'] = ['a', undefined]; // x=a y=undefined
[b]注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
let [x = 1] = [undefined]; // x = 1 let [x = 1] = [null]; // x = null
对象的解构赋值
对象的解构和数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。let {bar, foo} = {foo: 'aaa', bar: 'bbb'}; // bar=bbb foo=aaa let {baz} = {bar: 'aaa', foo: 'bbb'}; // baz=undefined
1 对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let {foo: baz} = {foo: "aaa", bar: "bbb"}; console.log(foo, baz); // foo not defined, baz = aaa
上面的代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo
2 默认值
var {x =3} = {}; // x=3 var {x, y=5} = {x: 1}; // x=1, y=5 var {x: y = 3} = {x: 5}; // y=5
默认值生效的条件,对象的属性值严格等于undefined
var {x = 3} = {x: undefined}; // x = 3 var {x = 3} = c657 {x: null}; // x = null
字符串的解构赋值
const [a, b, c, d, e] = "hello"; // a=h, b=e, c=l, d=l, e=o
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
上面的代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象,由于undefined和null无法转为对象,所以对它们两个数据进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
函数参数的解构赋值
函数的参数也可以使用解构赋值。function add([x, y]){ return x + y; } add([1, 2]); // 3
上面的代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。
[[1, 2], [3, 4]].map( ([a,b]) => a+b ) // [3, 7]
函数参数的解构也可以使用默认值
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指定默认值,所以会得到与前一种写法不同的结果
用途
1 交换变量的值let x = 1; let y = 2; [x, y] = [y, x]; console.log(x); console.log(y);
2 从函数返回多个值
函数只能返回一个值, 如果要返回多个值,只能将它们放在数组或对象里面返回。有了解构赋值,取出这些值就非常方便了。
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // a=1, b=2, c=3 // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example(); // foo=1, bar=2
3 函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
// 函数参数的定义:参数是一组有序的值 function f([x, y, z]) { // todo } f([3, 1, 2]); // 参数是一组无序的值 function f({x, y, z}) { // todo } f({z: 2, y: 1, x: 3});
4 提取JSON数据
// 提取JSON数据 let jsonData = { id: 42, status: "ok", data: [867, 520] }; let {id, status, data: number} = jsonData; console.log(id, status, number); // 42 "ok" [867, 520]
5 函数参数默认值
jQuery.ajax = function (url, { async = true, beforeSend = function() {}, cache = true, complete = function() {}, crossDomain = false, global = true }){ };
6 遍历Map结构
const map = new Map(); map.set("first", "hello"); map.set("second", "world"); for(let [key, value] of map) { console.log(key + ":" + value); } // first: hello // second: world
本博客内容摘抄自
阮一峰老师写的ECMAScript6入门一书
相关文章推荐
- ES6学习之变量的解构赋值
- 【es6】【变量的解构赋值】【数组解构赋值】
- 【es6】【变量的解构赋值】【字符串,数值和布尔值解构】【函数参数的解构赋值】【用途】
- ES6中的变量解构赋值的书写模式
- ES6--变量的解构赋值
- js -- ES6(三)-- 变量的解构赋值(根据阮一峰ES6标准入门整理 更新中。。。)
- es6学习篇之 let和const命令 、变量的解构赋值
- ES6:变量的解构赋值
- ES6学习3章:变量的解构赋值
- es6-变量的解构赋值
- 变量的解构赋值 ES6
- ES6—变量 解构赋值
- ES6--变量的声明及解构赋值
- js-es6-变量的解构赋值
- ES6 变量的解构赋值
- ES6变量解构赋值
- es6分享——变量的解构赋值
- 【ES6】变量的解构赋值
- ES6-变量的解构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值