ES6学习笔记1-解构赋值

一、对象的解构赋值

1.一般模式（简写）

let {aaa, bbb} = {aaa: 'aaa', bbb: 'bbb'};

//aaa = 'aaa'
//bbb = 'bbb'

2.原始模式 （复杂）

let {aaa: a, bbb: b} = {aaa: 'aaa', bbb: 'bbb'}

//a= 'aaa'
//b= 'bbb'

3.赋值原理

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

4.注意

let x;
{x} = {x : 'aaa'} 
//会报错，因为{x}写在最左边，js会将它当作代码块执行，而不会当作解构赋值。
({x} = {x : 'aaa'} )
//加上小括号，让他不是在最左边即可

二、字符串的解构赋值

//将字符串当作特殊的数组形式进行解构赋值
let {a,b,c,d,e} = {'hello'};
//a = 'h'
//b = 'e'
//c = 'l'
//d = 'l'
//e = 'o'

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

三、其他类型的解构赋值（数值，布尔值）

原则就是将其他类型的值先转换为对象，再进行解构赋值，undefined和null因无法进行转换而报错

四、函数参数的解构赋值（前方高能！！！）

1. function test ([x, y]) {
    return x + y;
}

test([1, 2]);    //3
//这个没毛病，参数是个数组，函数内对数组元素x, y进行相加操作，继续往下看
2. function test({x= 0, y= 0}= {}) {
    return [x, y];
}

test({x: 1, y: 2});    //[1, 2]
test({x: 1});    //[1, 0]
test({});    //[0, 0]
test();    //[0, 0]

//问题1：{x= 0, y= 0}这是什么鬼，对象还可以这么定义吗？
//答：对象的解构赋值的默认值就是这样的形式设置的,x,y的默认值都设置为0
//问题2：传实参{x: 1, y: 2},是怎么把实参赋值给形参的？
//答：实参通过传递引用传递给形参，过程为{x=0,y=0} = {} = {x: 1, y:2}
//已经懵逼了吗，没关系，继续往下看，这根本不算什么

3.  function test({x, y}= {x: 0, y: 0}) {
    return [x, y];
}

test({x: 1, y: 2});    //[1, 2]
test({x: 1});    //[1, undefined]
test({});    //[undefined, undefined]
test();    //[0, 0]
//这个例子和上面例子的不同之处就在于函数形参默认值的设置方式
//这个例子是给{x, y}形参设置默认值的，上个例子是个{x,y}里的x和y设置值得
//形参传递进来是的赋值过程为：{x, y} = {x:0, y: 0} = {};

五、解构赋值中圆括号的问题

• 1、不可以使用圆括号的情况
  • (1)变量声明语句
    let ({x}) = [1];
  • (2)函数参数（也属于声明）
    function (({x}={x: 1})) {};
  • (3)赋值语句的模式（键值对中的键就是模式）
    ([a]) = [5];
• 2、可以使用圆括号的情况：首先都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。
  [(b)] = [3];