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");