ES6解构赋值实例讲解

1.数组的解构赋值

之前我们的赋值：let a = 1,let b = 2;现在利用解构赋值,按照对应位置对应变量赋值（解构赋值不成功的返回undefined)，可写为：

let [a,b] = [1,2];

let [a,[[b],c],d] = [1,[[2],3],4];//数组嵌套模式

let [,,c] = [1,2,3]; //c----3;逗号分隔表示未定义变量，c对应的值为3；

let [a,...b] = [1,2,3,4];//...表示剩余的其他值，此时a的值为1，b的值为234

对于set结构也可以使用解构赋值：                                                                                    let[a,b,c] = new Set([1,2,3]);//a--1,b--2,c--3;

let [x = 1] = [undefined];//x - 1

let [x = 1] = [null];//x - null

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];//x - 1;因为默认值是一个表达式需要计算，所以它会最简单的取值为1，而不是求值

2. 对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值，解构赋值不成功undefined

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

如果变量名与属性名不一致，必须写成下面这样  (属性名必须一下foo)                                                                                       let {foo:fun} = {foo:'nihaoma'}   //fun--nihaoma

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

数组与对象之间的解构赋值： let arr = [1,2,3]; let {0:first,[arr.length-1]:last} = arr; first // 1 last // 3

3. 字符串的解构赋值

重点一个特性length，与数组相似：

let {length : len} = 'hello';
len // 5

4. 函数参数的传值的解构赋值

function result({x=0,y=0}={}){
  return [x+y]
}
result();//x与y的默认值为0