ES6中的解构赋值

解构赋值

是对赋值运算符的一种扩展，他针对数组和对象进行操作，代码书写上简洁易读

对Array的解构

//直接一连串赋值

let a=1,b=2,c=3
let [a,b,c]=[1,2,3]

//跳过空赋值

var [a,,c]=[1,2,3]
console.log(a, c);
console.log(b);
//a,c为1，3  b不存在

…是扩展运算符（只能用在后面）

//...连续赋值

var [a,...c] = [1,2,3]
console.log(a, c);
//a=1,c=[2,3]

//默认值

var [a, b, c = 'default', d = 'default'] = [1, 2, 3]
console.log(a, b, c, d);
//1 2 3 "default"

对Object的解构

//对象中的结构赋值

var obj = {
      a: 1,
      b: 2,
    }
//a:A  在obj中寻找a转化成A并且赋值
let { a: A, b: b } = obj
//这里再用let声明b或a会报错，let只能定义一次
let { c: c } = obj
console.log(A, b，c);
//1,2,undefined

//baz是变量

let { foo: baz }={ foo:'aaa', bar:'bbb'};
baz // "aaa"
foo // error: foo is not defined

//解构模型实现Math
let { floor, pow } = Math
let a = 2
console.log(floor(a), pow(a, 2));

对String的解构

let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

//求字符串长度
let { length } = 'yo.'
console.log(length);

//结构模型传参
var obj = { a: 1, b: 2 }
function test2({ a, b }) {
   console.log(a, b);
}
test2(obj)

对函数参数的解构

//函数的参数也可以使用解构赋值
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

圆括号问题：

不能使用圆括号：

1.变量声明语句
2.函数参数
3.赋值语句的模式

可以使用圆括号的情况：赋值语句的非模式部分，可以使用圆括号

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

注意点：

1.已经let生命的变量用于解构赋值{x}会被认为是代码块

// 错误的写法
let x;
{x}={x:1};
// SyntaxError: syntax error

// 正确写法的写法
let x;
({x}={x:1})

2.解构赋值允许等号左边的模式之中，不放置任何变量名

({}=[true,false]);
({}='abc');
({}=[]);

3.由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构

let arr =[1,2,3];
let {0: first,[arr.length -1]: last}= arr;
first // 1
last // 3