学习阮一峰老师ES6系列(解构赋值)

57 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第4天

1.数组的解构

基本用法

ES6允许按照一定模式(模式匹配),从数组和对象中提取值,对变量进行赋值,这被称为解构赋值,如下所示:

let [a., b, c] = [1, 2, 3];
let [foo] = [];
let [a, b] = [1];
console.log(foo); //undefined
console.log(b); //undefined

本质上就是模式匹配,只要等号两边的模式相同,左边的变量就会被赋予右边相对应的值,如果解构不成功,变量的值就等于undefined

默认值

解构赋值允许指定默认值

let [foo = true] = [];
console.log(foo);  // output: true

let [x, y = 'b'] = ['a'];
console.log(x, y); //output: a, b

2.对象的解构赋值

对象的解构赋值,变量必须与属性同名,才能取到正确的值,如果解构失败,变量的值等于undefined

let {name, age} = { name: 'samba', age:22 }
console.log(name); // output: samba
console.log(age); //output: 22

let { age } = { name: 'samba' };
console.log(age); //output: undefined

默认值

对象的解构也可以指定默认值,默认值生效的条件是,对象的属性值严格等于undefined

let { x = 3 } = {};
console.log(x); //output: 3

3.字符串的解构赋值

字符串也可以解构赋值,在解构时,它会被当做一个类似数组的对象

const [a, b, c, d, e] = 'Hello';
console.log(a, b, c, d, e); //output: H e l l o

类似数组的对象都有一个length属性,因此也可以对length属性进行解构赋值

let { length: len } = 'Hello';
console.log(len); //output: 5

4.数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会被转为对象再进行解构赋值。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

解构赋值的规则:只要等号右边的值不是对象或数组,就先将其转变为对象,由于undefined和null无法转为对象,所以对他们进行解构赋值会报错。

5.函数参数的解构

函数的参数也可以解构赋值,如下所示:

function add([x, y]) {
	return x + y;
}

add([1, 2]);

add函数的数组参数[1,2]在传入的那一刻就被解构为变量x和变量y。

函数参数的解构也可以使用默认值,如下所示:

function move({x = 0, y = 0} = {}) {
	return [x, y];
}

move({x:3, y:8}); //output: [3,8]
move({x:3});  //output: [3,0]
move({});  //output: [undefined, undefined]
move();  //output: [0, 0]

函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和变量y的值,如果解构失败,x和y等于默认值。

function move({x, y} = {x: 0, y: 0}) {
	return [x, y];
}

move({x:3, y:8}); //output: [3,8];
move({x:3});  //output: [3, undefined]
move({});  //output: [undefined, undefined]
move(); //output: [0, 0]

上面的代码为函数move的参数指定默认值,而不是为变量x和y指定默认值

6.圆括号情况

尽可能的不在解构赋值中使用圆括号

不能使用圆括号的情景

1、变量声明语句。2、函数参数。 3、赋值语句

可以使用圆括号的情景

赋值语句的非模式部分,可以使用圆括号。如下所示:

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

7.解构赋值的用途

交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];
console.log(x,y); //output: 2, 1

从函数返回多个值

一般情况函数只能返回一个值,想要返回多个值,只能放在数组或者对象里返回。有了解构赋值,可以将这些值方便的取出。

function example() {
	return [1,2,3];
}
let [a, b, c] = example();

function example1() {
	return {
		foo: 1,
		bar: 2,
	}
}

let {foo, bar} = example1();

函数参数的定义

解构赋值可以将一组参数与变量名对应起来

//参数是一组有序的值
function f([x, y, z]) {....};
function f([1, 2, 3]);

//参数是一组无序的值
function func({x,y,z}) {...};
func({z:3, x:2, y:1});

提取JSON数据

解构赋值对于提取JSON对象中的数据,尤其有用

let jsonData = {
	id: 42,
	status: 'ok',
	data: [1, 323]
};

let {id, status, data: number} = jsonData;

console.log(id, status, numer);

指定函数参数的默认值

function drawChart({ size = 'big', coords = { x:0, y: 0 }, radius = 25} = {}) {
	console.log(size, coords, radius);
}

drawChart({
	coords: { x: 18, y: 39 },
	radius: 30,
}); //output: big, {x: 18, y: 39} 30

遍历Map结构

只要是部署了Iterator接口的对象,都可以用for..of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,可以获取键名和键值。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
	console.log(key + ' is ' + value);
}

如果只想获取键名,或者只想获取键值,代码如下

for (let [key] of map) {
	console.log(key);
}

for (let [, value] of map) {
	console.log(value);
}

输入模块的指定方法

加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。