es6-变量的解析赋值

主要分以下7个内容

1. 数组的解析赋值
2. 对象的解析赋值
3. 字符串的解析赋值
4. 函数参数的解析赋值
5. 数字和布尔类型的解析赋值
6. 解析赋值与圆括号
7. 用途

数组的解析赋值
本质上，数组解析赋值的写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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

let [,,z] = [1,2,3];
// z = 3;

let [a,b,...c] = [1,2,3,4,5];
// a = 1, b = 2, c = [3,4,5];

let [q,w,e] = [1,2]
//q =1, w =2 ,e = undefined

let [a,[s,d]] = [1,[2,3]];
//a = 1, s =2 , d = 3

//默认值
let [z = 1,x = 2] = [4];
// z = 4, x =2
//当某一项的值严格等于undefined时，就会进行默认赋值

对象的解析赋值
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let {x, y } = {x : 1 , y :2};
//x = 1, y = 2

let {foo:a, bar:s } = {foo:2, bar:3}
// a = 2, s =3

//默认值
let {z = 3,x,c} = { x : 1, c:2};
//z = 3, x = 1 ,c =2 
//同数组的解析赋值的默认值，当某一项的值严格等于undefined时，进行默认赋值


//嵌套
let { p, p:[
    x,{y,z=3}
] } = {p:[1,{y:44} ] };

//p = [1,{y:44}]
//x = 1, y = 44, z =3

字符串的解析赋值
字符串的解析赋值会将字符串转换成数组，同时添加一个length属性

let [a,b,c] = "qwer";
let {length:T} = "qwer"
// a = 'q', b ='w', c = 'e', T= 4;

函数参数的解析赋值

function move([x,y]){
    return [x,y]
}
move([1,2]); // [1,2]

function  move2({x = 2 ,y = 3} ){
    return [x,y]
}
move2({x:3 , y:4}); //[3,4]
move2(); // [2,3]

function  move3({x,y} = {x:4,y:5}){
    return [x,y]
}
move3({x:1,y:3} );//[1,3]

//注意move3和move2的区别
//虽然都是默认赋值，但是move2使用的是参数变量的默认赋值
//而move3使用的是参数的默认赋
//值，两者是不一样的

move2({x:5});// [5,4]
move3({x:5}); // [5,undefined]
move3({x:5,y:undefined});// [5,undefined]
//注意这里并不是解析构造赋值
move3({x:5,y});// [5,5]

//函数move2的参数是一个对象，通过对这个对象进行解构
//得到变量x和y的值。如果解构失败，x和y等于默认值。
//函数move2是为参数指定默认值，而不是为变量x和y指定默认值，
//所以会得到与前一种写法不同的结果。

数字和布尔类型的解析赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

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

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

解析赋值与圆括号
解构赋值虽然很方便，但是解析起来并不容易，因此尽量不要在模式中放置圆括号。

用途

• 交换值

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

• 函数返回多个值

function  math(){
    //****code
    return [sin,cos,tan]
}
let [sin,cos,tan] = math();

function  example(){
    return {
        x:1,
        y:2
    }
}

let {x,y} = example();

• 函数参数的定义

//参数有序
function  f([x,y,z]){...}
f([1,2,3]);
//参数无序
function t({x,y,z}){...}
t({z:2,x:1,y: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]

• 函数参数默认值
  指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

• 遍历 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);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}

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

const { SourceMapConsumer, SourceNode } = require("source-map");

本文参考文章如下

• http://es6.ruanyifeng.com/#docs/destructuring