ES6快速入门第一章------解构赋值（可私信解惑）

概念

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

如下面变量赋值

var a=1;
var b=2;
var c=3;

在ES6语法中可以写为

var [a,b,c]=[1,2,3];    // 等号两边的模式相同

如果解构不成功，变量的值就等于undefined。

如果等号的右边不是数组（不是可遍历的结构），将会报错。

解构赋值不仅适用于var命令，也适用于let和const命令。

var [foo, [[bar], baz]] = [1, [[2], 3]];    //可以嵌套
foo // 1
bar // 2
baz // 3

var [ , , third] = ["foo", "bar", "baz"];    // 可以忽略
third // "baz"

var [x, , y] = [1, 2, 3];
x // 1
y // 3

var [head, ...tail] = [1, 2, 3, 4];    // ... 表示剩余运算符
head // 1
tail // [2, 3, 4]

var  [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

设置默认值

解构赋值允许指定默认值。当等式右边没值或是undefined时，使用默认值。

语法    let [变量=默认值]=[赋值]

let [num=2]=[];    // 输出为2
let [num1,num2=10]=[5];     //输出 num1为5, num2为10
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2];     // x=1; y=2
let [x = y, y = 1] = [];     // 报错,因为x用到默认值y时，y还没有声明
[x, y = 'b'] = ['a', undefined];  

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

 var { name, age } = { name: "sss", bar: "12" };    // name：sss ，age：12

注意变量必须与属性同名，才能取到正确的值，位置顺序没关系。

 

如果变量名与属性名不一致，必须写成下面这样：

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };        //  baz ："aaa"

let obj = { first: 'hello', last: 'world' };
let { first: a, last: b } = obj;        //a的值为hello，b的值为world

这说明对象的解构赋值是下面的简写

 var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };    // foo：aaa，bar：bbb

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

 

字符串的解构赋值

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

  let [a, b, c, d] = 'nice';     // a为n，b为i，c为c，d为e

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : name} = 'hello'; 
console.log(name)        // len：5

函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x, y]){

  return x + y;

}

add([1, 2]);     // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们接收的参数就是x和y。

 

函数参数的解构也可以使用默认值。

function move({x = 1, y = 2} = {}) {    // 默认参数 x=1,y=2

  return [x, y];
}

move({x: 3, y: 8});     // [3, 8]
move({x: 3});     // [3, 2]
move({});     // [1, 2]
move();     // [1, 2]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

不能使用圆括号的情况

ES6的规则，只要有可能导致解构的歧义，就不得使用圆括号。因此，建议只要有可能，就不要在解构中放置圆括号。

不能使用圆括号的情况

• 变量声明语句中，不能带有圆括号。

 // 全部报错
var [(a)] = [1];
var {a: (c)} = {};
var ({a: c}) = {};
var {(a: c)} = {};
var {(a): c} = {};

• 函数参数中，模式不能带有圆括号。

function f([(a)]) { return a; }        // 报错

• 赋值语句中，不能将整个模式或嵌套模式中的一层，放在圆括号之中。

 // 全部报错
({ a: b}) = { a: 42 };
([a]) = [5];

 

解构赋值的使用场景

• 交换变量的值

[x, y] = [y, x];

• 方便从函数取值

 function func() {

  return [1, 2, 3];
}

var [a, b, c] = func();

• 函数参数的定义

// 参数是一组无次序的值
function f({x, y, z}) { ... }

f({z: 1, y: 2, x: 3});

• 提取JSON数据

var jsonData = {
  id: 12,
  name: "sss",
  data: [867, 5309]
};

let { id, name, data: number } = jsonData;

• 函数默认参数值 

function move({x = 1, y = 2} = {}) { // 默认值

  return [x, y];
}

move({x: 3});     //   y使用默认值，x：3， y：2

第二章：ES6快速入门第二章------let和const（可私信解惑）