解构赋值的学习笔记-ES6系列2

解构赋值的学习参考了以下几位大大们的博客~仅为自己的学习笔记。
http://es6.ruanyifeng.com/#docs/destructuring

1. 基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
在以前，我们想要为变量赋值，只能直接指定值。如

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

在ES6中，可以为变量解构赋值，即

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

相当于一一对应，按照对应的位置来给对应的变量赋值。

1.1 数组的解构赋值

可以这样为数组的元素进行解构赋值：

let [ , , third] = ['a','b','c']
console.log(third) //c

也可以使用…代表解构从当前索引到最后索引的值，赋值为一个数组：

let [head,...tail] = [1,2,3,4]
console.log(head) // 1
console.log(tail) // [2,3,4]

如果结构不成功，变量的值等于undefined

let [x,y,...z] = ['a']
console.log(x) //a
console.log(y) //undefined
console.log(z) //[]

如果等号的右边不是数组(严格来说，不是可遍历的结构)，就会报错。

let [foo] = 1 //报错

1.2 默认值

解构赋值允许指定默认值

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

默认值可以引用其他变量，但该变量必须已经被声明。

let [x=1,y=x] = [];
console.log(x) // 1
console.log(y) // 1

若写成下面会报错，因为变量y还未声明。

let[x=y,y=1]=[] //报错

1.3 对象的解构赋值

解构不仅可以用于数组，还可以用于对象

let {foo, bar} = {foo:'aaa', bar:'bbb'}
console.log(foo) //'aaa'
console.log(bar) //'bbb'

与数组的解构赋值不同，数组的解构是按照索引来的，而对象的解构是按照命名来的。
也就是说，变量必须与属性同名，才能取到正确的值。

let {baz} = {foo:'aaa', bar:'bbb'};
console.log(baz) //undefined

如果变量名和属性名不一致，必须写成下面这个样子才能取到正确的值。

let {foo:baz} = {foo:'aaa',bar:'bbb'};
console.log(baz) // 'aaa'

对象的结构赋值，可以很方便地将现有对象的方法，赋值到某个变量中。
例如我们常用的console.log，其实就是console对象的log方法，用于打印输出语句。我们尝试着将console.log用一个log来实现。

let {log} = console;
log("hello解构")

1.4 嵌套的解构赋值

解构可以用于嵌套结构的对象，如

let obj = {
	p:['Hello',{y:'World'}]
}
let {p:[x,{y}]} = obj
console.log(x) //'Hello'
console.log(y) //'World'
console.log(p) //报错

在这里，p是模式，不是变量，因此不会被赋值。如果想要p作为变量被赋值，应当写成：

let obj = {
	p:['Hello',{y:'World'}]
}
let {p, p:[x,{y}]} = obj
console.log(x) //'Hello'
console.log(y) //'World'
console.log(p) //['Hello',{y:'World'}]

1.5 字符串的解构赋值

字符串也可以解构赋值。在进行结构赋值时，字符串被转换成了一个类似数组的对象，且具有length属性。

let str = 'hello'
let [a,b,c,d,e]= str
let {length:len} = str
console.log(a) //h
console.log(b) //e
console.log(c) //l
console.log(d) //l
console.log(e) //o
console.log(len) //5

1.6 函数参数的结构赋值

函数的参数也可以使用解构赋值

function add([x,y]){
	return x+y
}
console.log(add([1,2])); //3

函数参数的解构也可以使用默认值

function move({x=0, y=0}={}){
	return [x,y];
}
console.log(move()); // [0,0]
console.log(move({x:3})) // [3,0]

函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果无法解构到对应的值，则变量x和y使用其默认值。

2. 解构赋值的用途

2.1 变换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]

2.2 从函数返回的对象中取值

//若函数返回数组
function returnArray(){
	return [1,2,3]
}
let [a,b,c] = returnArray();
//若函数返回对象
function returnObj(){
	return{
		foo:1;
		bar:2;
	}
}
let {foo,bar} = returnObj();

2.3 提取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]

2.4 输入模块的指定方法

const {methodA,methodB} = require("method-module")

2.5 遍历map结构

任何部署了Iterator接口的对象，都可以用for…of循环遍历。使用解构赋值获取键名和键值非常方便

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){
}
//获取键值
for(let [,value] of map){
}