es6 解构

对象解构

(一) 对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量

let data = {
    type: 'JSON',
    name: 'bottle',
}

let { type, name } = data;
console.log(type); // "JSON"
console.log(name); // "bottle"

(二) 给已经声明过的变量赋值：(一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程)

let data = {
    type: 'JSON',
    name: 'bottle',
}
type = "Literal",
name = 5;
// 使用解构来分配不同的值
({ type, name } = data);
console.log(type); // "JSON"
console.log(name); // "bottle"

(三) 默认值：使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined。为此，我们可以为它指定一个默认值。

let data = {
    type: 'JSON',
    name: 'bottle',
}
let { type, name, value = true, size } = data;
console.log(value); // true
console.log(size); // undefined

(四) 为非同名局部变量赋值：如果希望使用不同命名的局部变量来存储对象属性的值，可以这样做：

let data = {
    type: 'JSON',
    name: 'bottle',
}
let { type: binType, name: binName } = data;
console.log(binType); // "JSON"
console.log(binName); // "bottle"

(五) 嵌套解构

let data = {
    type: {
        type1: 'JSON',
        type2: 'BIN',
    },
}
let {type: {type1,type2}} = data;
console.log(type1); // JSON
console.log(type2); // BIN

数组的解构

(一) 与对象解构的语法相比，数组解构就简单多了，它使用的是数组字面量，且解构操作全部在数组内完成，而不是像对象字面量语法一样使用对象的命名属性。

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"

(二) 解构赋值：（不需要像对象解构一样加小括号）

let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

(三) 使用解构实现变量交换

let a = 1,b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1

(四) 数组解构同样可以设置默认值

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

(五) 不定参数 (...语法)

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(restColors); // ["green","blue"]

(六) 数组的复制:

// es5 中可以使用 concat() 方法实现数组的克隆
var colors = ['red', 'green', 'blue'];
var cloneColors = colors.concat();
console.log(cloneColors);  // ["red", "green", "blue"]

// es6 中可以直接使用解构实现数组克隆
const [...cloneColors1] = colors; 
console.log(cloneColors1); // ["red", "green", "blue"]

concat(): 用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。当我们没有给他传参数时，就返回一个调用该函数的数组的副本，相当于克隆了该数组。

const arr = [0, 1, 2];
const arr1 = [3, 4, 5];
console.log(arr.concat(arr1)); // [0, 1, 2, 3, 4, 5]

字符串解构

字符串也可以解构赋值。这是因为，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
console.log(a,b,c,d,e);//  "h"、"e" 、"l"、"l"、"o"
const {length} = 'hello';
console.log(length);//5

数值和布尔值解构

解构赋值时，如果等号右边是数值，则会先转为 Number 对象。

let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true

解构赋值时，如果等号右边是布尔值，则会先转为 Boolean 对象。

let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError