JS解构赋值

定义

解构赋值，可以同时对一组变量进行赋值。

传统做法

利用数组将一组值传递给一个变量，并且使用下标进行引用

var array = [1, 'one', true];
console.log(array[0]);
//控制台输出1，一般的浏览器可以直接按F12直接调出控制台进行查看

ES6做法

将一组值按照匹配的格式进行赋值，前面对应的格式可以没有变量接受，也可以少于后面给定的值，但是格式要一致。

//例子
var [x, y] = [5, 'a'];
console.log(x);//5
console.log(y);//a

嵌套

形式一致地进行赋值

var [a, [b, c]] = [1, [2, 3]];
//a b c 分别被赋值为 1 2 3

省略元素接受

var [, , c] = [1, 2, 3];
//c 被赋值为 3

以上例子说明可以省略变量，可接受的值可以超出接受的变量

直接对嵌套的对象属性进行赋值

var object = {
id : '01',
name : 'hong'
};
var {id, name} = object;
//id name 会被赋值为01 hong

//也可以省略某些接受的变量
var {id} = object;
//id 会被赋值为 01

//使用别名
let {id:personId} = object;
//此时引用的名字变为personId，会被赋值为 01

//如果定义的变量不存在对象中，会被赋值为undifined
var {id, age} = object;
//id 会被赋值为 01
// age会被赋值为undifined

//可以默认值，让没有定义的变量也不会为未定义
var {id, age=32} = object;
//id 会被赋值为 01
// age会被赋值为32

// 声明变量:
var x, y;
// 解构赋值:
//{x, y} = { name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =
//原因  这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。
//解决方法是用小括号括起来
({x, y} = { name: '小明', x: 100, y: 200});

实战

//交换两个变量x和y的值
var x=1, y=2;
[x, y] = [y, x]
//快速获取当前页面的域名和路径
var {hostname:domain, pathname:path} = location;
//快速创建一个Date对象
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
}
//调用函数生成一个Date对象
var dateObj = buildDate({ year: 2017, month: 1, day: 1 });
// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)