005_ES6知识点总结（02）变量的解构赋值
ES6知识点整理
[toc]
02 变量的解构赋值
02.1 数组的解构赋值
基本用法：
let [x, y = 1] = [10, 20];//x:10 y:20
let [x, y = 1] = [10];//x:10 y:1
let [, y] = [10, 20];//y:20
let [x, y] = [10];//x:10 y:undefined
上例中使用了默认值，若该位置对应的值不严格等于undefined，则会使用默认值
默认值也可以使用解构赋值的其他变量，前提是其已声明
let [x = 1, y = x] = [];//x:1 y:1
let [x = y, y = 1] = [];//ReferenceError
02.2 对象的结构赋值
对象的解构赋值与数组一点不同在于：数组的元素是有序的，变量的取值取决于位置；而对象需要寻找其属性同名的变量：
let {a, b} = {b:"Hello", a:"World"};
a//World
b//Hello
而当需要变量名与属性名不同名时，可以写成如下这样：
let {a:stringA, b:stringB} = {a:"Hello",b:"World"}
a//ReferenceError
b//ReferenceError
stringA//Hello
stringB//World
注意：
如果要将一个已经声明的变量用于解构赋值，可能会产生意想不到的错误：
let a;
{a} = {a:"Hello World"};//SynaxError
产生语法错误的原因是，{a}会被js引擎解释为一个代码块，正确的方法应该是不将大括号写在行首
let a;
({a} = {a:"Hello World"});//a:Hello World
另外，由于数组也是一种特殊的对象，因此数组也可以使用对象的解构赋值：
let arr = ["Hello", "My", "World"];
let {0:First, [arr.length - 1]:Last} = arr;
First//Hello
Last//World
02.3 字符串的解构赋值
let [a,b,c] = "Hello";
a//H
b//e
c//l
//类似数组的对象都有一个length属性，下例中等于将"Hello"的length属性解构赋值给len
let {length : len} = "Hello";
len//5
02.4 数值和布尔值的解构赋值
如果使用布尔值或数值作为等号右边来解构赋值，则会先将其转换为对象，而如果是undefied或null，由于无法转换成对象，解构赋值则会报错。
02.5 函数参数的解构赋值
//例1
function add([x,y]){
return x + y;
}
add([1,2]);//3
//例2
[[1,2],[3,4]].map(([a,b]) => a+b);//[3,7]
02.6 解构赋值的应用
02.6.1 交换变量的值
以前我们需要交换两个变量的值可能会采用以下的方法：
let a = 0, b = 1;
let temp;
temp = b;
b = a;
a = temp;
a//1
b//0
应用解构赋值后，代码可以更简洁：
let a = 0, b = 1;
[a,b] = [b,a];
a//1
b//0
02.6.2 从函数返回多个值
函数只能返回一个值，如果需要返回多个值，只能放在数组或对象中返回，使用解构赋值取出这些值就会非常方便
function someResults(){
return{
a:0,
b:1,
c:2
}
}
let {a,b,c} = someResults();
02.6.3 函数参数
可以方便的将一组参数与变量对应起来,这种应用在各类js插件中很常见，比如需要设定一个options参数，用于设置插件的各项参数：
function someFunc({
color = "red",
width = "100",
height = "100"
} = {
color : "red",
width : "100",
height : "100"
}){
console.log(color,width,height);
}
someFunc();//red,100,100
someFunc({});////red,100,100
someFunc({color:"orange",width:"200"});//orange,200,100
以上函数someFunc中，使用了对象的结构赋值及函数参数的默认值来设定options参数，未设定的参数将使用默认值
02.6.4 提取JSON数据
等同于对象的解构，JSON的数据提取可以非常简洁快速
let jsonData = {
name : "Jelly",
age : 20,
account : ["622662266226","75577557757"]
}
let {name,age,account} = jsonData;
02.6.5 遍历Map结构
结合for...of循环遍历和变量的结构赋值，取出Map的键值非常方便
let map = new Map();
map.set('first','hello');
map.set('second','world');
for(let [key,value] of map){
console.log(key + ' is ' +value);
}
02.6.6 输入模块的指定方法
加载模块的指定方法时：
const {SourceMapConsumer, SourceNode} = require("source-map");
发表评论 (审核通过后显示评论)：