es6真的是非常重要,贯穿了前端的各个地方。变量的解构赋值也是我们在工作中非常常见的一项手段。虽然不是非必要,但是它会给我们带来极大地便洁。
1,概念
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
规则:
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错
2,数组的解构赋值
根据概念,数组的解构赋值基本的模式:[ ] 。等号左右两侧都是数组的形式。这时,[ ] 内部的对应位置的元素会实现一对一匹配。
特点:
1, 基本用法,完全解构,即左右结构一毛一样;
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
2,不完全解构,即左右解构不同,这时左边不能正确匹配的元素(变量)被赋值为underfined;
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
3, 如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错;
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
4,允许指定默认值;
// 下述代码中第二个因为null不是严格意义上的underfined,所以不能指定默认值
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
// 注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格
等于undefined,默认值才会生效。
// 默认值可以为一个表达式,如果是表达式那么会惰性求值,即用到时才会计算
function f() {
console.log('aaa');
}
let [x = f()] = [1];
// x=1 没有求值的原因是等号右边有不是underfined的值,所以x可以正常的解构赋值,所以function
不会计算;
//默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
let [x = 1, y = x] = []; // x=1; y=1
let [x = y, y = 1] = []; // ReferenceError: y is not defined
3,对象的解构赋值
对象的解构赋值大体上和数组是一样的,但是对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
特点:
1,同属性名相匹配进行赋值,匹配不到赋值underfined;
let { bar, foo, baz } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
baz // underfined
2,如果变量名与属性名不一致,必须写成下面这样。
//也就是说,foo进行匹配,然后将值赋值给baz。所以,foo是匹配的模式,baz才是变量。
真正被赋值的是变量baz,而不是模式foo。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
3,与数组一样,解构也可以用于嵌套结构的对象。
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
//上面代码有三次解构赋值,分别是对loc、start、line三个属性的解构赋值。
注意,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。
//另一种使用
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]
4, 对象的解构赋值可以取到继承的属性。
const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1;
foo // "bar"
5,允许指定默认值,规则和数组一样;
//默认值生效的条件是,对象的属性值严格等于undefined。
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
4,字符串的解构赋值
字符串进行解构赋值时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
5,数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
6,函数参数的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
//函数参数的解构也可以使用默认值
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]
解构赋值可以说真的很好用,在项目中也可以用到很多的方面。前提是,你真的理解和会使用它。这就需要多多的磨练了和思考了。今篇学习就到这里吧。
拜了个拜!迪迦。。。