ES6功能扩展解构赋值

解构是一种打破原有数据结构，将其拆分为更小部分的过程

对象解构

在ES5中，开发者们为了从对象中获取特定数据并赋值给变量，通常是这样做

var obj = {
  name: 'wmui',
  age: 10
}

var name = obj.name, age = obj.age;

在ES6中，利用解构功能，可以这样做

let obj = {
  name: 'wmui',
  age: 10
}

let {name, age} = obj;

类似于对象字面量语法的形式，只不过放到了赋值操作符的左边

可以使用解构功能为变量赋值，它会覆盖之前的变量值

let obj = {
  name: 'wmui',
  age: 10
}
let name = 'wang', age = 20;
({name, age} = obj);

console.log(name,age) // wmui 10

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

默认值

使用解构赋值表达式时，如果指定的变量名称在对象中不存在，这个变量会被默认赋值为undefined

let obj = {
  name: 'wmui',
  age: 10
}

let {name, age, sex} = obj;
console.log(sex) // undefined

当指定的属性不存在时，可以定义一个默认值，在属性名称后添加一个等号和相应的默认值即可。

let obj = {
  name: 'wmui',
  age: 10
}

let {name, age, sex = 'boy'} = obj;
console.log(sex) // boy

重命名

如果希望使用不同命名的变量存储对象属性的值，在属性名称后添加一个冒号和新的属性名即可。

let obj = {
  name: 'wmui',
  age: 10
}

let {name: myName, age: myAge} = obj;
console.log(myName,myAge); // wmui 10

使用不同的变量名也可以设置默认值

let obj = {
  name: 'wmui',
  age: 10
}

let {name: myName, age: myAge, sex: mySex = 'boy'} = obj;
console.log(myName,myAge,mySex); // wmui 10 boy

嵌套对象解构

嵌套的对象也可以使用解构赋值，同样与对象字面量的语法相似

let obj = {
  name: 'wmui',
  age: 10,
  test: {
    a: {
      start: 2010,
      end: 2011
    },
    b: {
      start: 2013,
      end: 2015
    }
  }
}

let {test: {a}} = obj;
console.log(a.start) // 2010
console.log(a.end) // 2011

嵌套对象同样可以使用不同的变量名字存储对象属性的值

let obj = {
  name: 'wmui',
  age: 10,
  test: {
    a: {
      start: 2010,
      end: 2011
    },
    b: {
      start: 2013,
      end: 2015
    }
  }
}

let {test: {a: aa}} = obj;
console.log(aa.start) // 2010
console.log(aa.end) // 2011

数组解构

数组的解构比对象简单，数组的解构使用的是数组字面量方式，解构操作在数组内部完成。

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

占位符

在解构模式中，可以通过提供逗号占位符来省略元素，只获取自己需要的元素

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

解构赋值

数组的解构也可用于赋值上下文，和对象不同的是，它不需要小括号包裹成表达式

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

默认值

可以在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定位置的属性不存在或其值为undefined时使用默认值

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

嵌套数组解构

嵌套数组的解构只需要在原有数组模式中插入另一个数组模式即可

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

不定元素

在数组中可以通过...语法，把数组中的其余元素赋值给一个特定的变量

let colors = ['red', 'green', 'blue'];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // red
console.log(restColors.length); // 2
console.log(restColors[0]); // green
console.log(restColors[1]); // blue

可以利用不定元素实现数组复制

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

其他解构

字符串解构

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

const [a, b, c, d, e] = 'hello';
console.log(a); //"h"

类数组对象有一个length属性，可以对这个属性解构赋值

const {length}= 'hello';
console.log(length) // 5

数值和布尔值解构

解构数值和布尔值时，会先将它们转换成对象，所以可以解构它们自身或继承的属性和方法

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

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

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