ECMAScript笔记——解构赋值

变量的的解构赋值

ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。
解构赋值在实际开发中可以大量减少代码量，并且让程序结构更清晰。

数组的解构赋值

举例1：

通常情况下，为一组变量赋值：

let a = 0;
let b = 1;
let c = 2;

现在可以通过数组解构的方式进行赋值：

let [a,b,c] = [1,2,3];

二者的效果是一样的，但解构赋值的方式大量减少了代码量，而且结构更清晰了。

举例2：

{
	//一个变量时
	let [a = true] = [];
	console.log(a);	//输出结果，true
}

{
	//两个变量时
	let [a,b] = ['1'];	//a赋值为1，b没有赋值
	console.log(a + ',' + b);	//输出结果，1，undefined
}

{
	//两个变量时
	let [a,b = '2'] = ['1'];	//a赋值为1，b为2
	console.log(a + ',' + b);	//输出结果，1,2
}

在解构赋值时，是允许使用默认值（缺省值）的，当变量没有赋值时，使用默认值。

举例3：

{
	let [a,b = '2'] = ['1',undefined];	//虽然b被赋值undefined，但是b会采用默认值
	console.log(a + ',' + b);
}

{
	let [a,b = '2'] = ['1',null];	//b被赋值为null
	console.log(a + ',' + b);	//输出结果，1，null
}

上方代码分析：

• undefined：相当于什么都没有，此时b采用默认值。
• null：相当于有值，但值为null。

对象的解构赋值

举例1：

let {a,b} = {b:'2',a:'1'};
console.log(a + ',' + b);	//输出结果，1，2

上方代码分析：

• 对象的解构与数组的解构，有一个重要的区别：数组的元素是按次序排列的，变量的取值由它的位置决定。
• 对象的属性没有次序，是根据键来取值的。

举例2：

let a = 'Hello';
{a} = {a:'1'};
console.log(a);

如果变量a在解构之前就已经定义了，此时你再去解构，就会出问题。
要解决报错，只要在解构的语句外边，加一个()即可：

let a = 'Hello';
({a} = {a:'1'});
console.log(a);	//输出结果，1

字符串解构

var str = 'helloWorld';
var [a,b,c,d,e,f] = str;
console.log(a);	//输出结果，h
console.log(b);	//输出结果，e
console.log(typeof a);	//输出结果，string

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

For of 循环

举例1：

let arr1 = [1,2,3];

for(let key in arr1){
	console.log(key);	//输出结果，0,1,2
}

for(let value of arr1){
	console.log(value);	//输出结果，1,2,3
}

举例2：

let user = new Map();
user.set('username','admin');
user.set('password','12345');
console.log(user);

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

打印结果：

• for of循环可以避免开拓内存空间，增加代码运行效率。
• for of获取的是数组的值，for in获取的是index索引值。
• for of既可以遍历数组，也可以遍历Map对象。