ES6---变量解构

变量解构

 

1.什么是解构？ 

es6允许按照一定的模式, 从数组和对象中提取值, 对变量进行赋值, 这被称为解构(Destructuring)

 

2.数组解构赋值

语法：

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

 

顺序： 从数组中取值, 按照对应位置, 对变量取值, 这种写法属于'匹配模式', 只要等号两边模式相同, 左边的变量就会被赋予相对应的值

• 如果解构失败, 变量的值就等于undefined
• 不完全解构：等号左边的模式只匹配一部分右边的数组, 解构依然成功
• 如果等号右边不是数组：会报错
• 解构赋值允许默认值：只有解构失败也就是严格等(===)undefined, 默认值才会生效
• 如果默认值是一个表达式, 那么这个表达式是惰性求值, 即只有在用到时才能执行
• 默认值可以引用解构赋值的其他变量, 但是被引用的变量必须已经被定义

 

3.对象解构赋值

语法：

        let { a, b } = { a: 'aaa', b: 'bbb' };
        console.log(a, b); // aaa bbb

 

顺序：对象解构变量的取值没有顺序, 变量必须与属性同名, 才能解构成功

变量与属性不同名：

        let { a: c } = { a: 'aaa', b: 'bbb' };
        console.log(c); //aaa

机制：先找到同名属性, 然后再赋值给对应的变量, 真正被赋值的是后者, 而不是前者

变量同名：报错

• es6规定了let和const命令定义的变量不能重复定义,解构赋值也是一样的
• 如果没有第二个let命令就不会报重复定义的错误, 但是编译器会将左边的大括号理解为一个代码块, 代码块是不能被赋值的
• 解决办法：将整个表达式放进小括号中, 降级为一个表达式, 就不会被认为是代码块了

        //eg: 变量和属性同名，解决方法：
        let a;
        ({ a } = { a: 3 });//使用小括号，降级为一个表达式
        console.log(a); //3

 

嵌套：对象解构也可以嵌套，前提两边的模式一定要一样

        let obj = {
            first: [
                'hello',
                { firstChild: 'world' }
            ]
        };
        let { first: [x, { firstChild: y }] } = obj;
        console.log(x, y); //hello world

 

对象的解构其实是下边模式的简化版

        //a和c是模式，b和d是变量
        let { a: b, c: d } = { a: 'aaa', c: 'ccc' };
        console.log(b, d); //aaa ccc

 

4.字符串解构赋值

字符串在解构时,会将字符串转换为一个类数组

语法：

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

 

在字符串转换的类数组中有一个属性叫做length, 可以对这个属性进行解构赋值

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

 

5.数值和布尔值的解构赋值

• 使用对象解构方案
• 如果等号右边是数值或布尔,左边是对象,那么数值或布尔会先被转为对象,在解构
• 解构的原则：数组解构只要右边不是数组或字符串就会报错,对象解构,右边不是对象就先转为对象,然后解构
• 由于null和undefined无法转为对象,所以对他们进行的解构都会报错

        //数值与布尔解构
        let { toString: ts } = 123;
        console.log(ts);
        //分两步走
        //1. 将数值转为对象
        console.dir(new Number(2123));
        //2. 将对象与对象进行解构，如果数值对象的模式与左边的模式不对应，回去原型对象中查找
        console.log(ts === Number.prototype.toString); //true

 

6.函数的解构赋值

语法：

        function fun([x, y]) {
            console.log(x + y);
        }
        fun([1, 2]);//3

 

• fun函数的参数是一个数组, 调用fun传入的也是一个数组, 在传入的瞬间, 实参与形参进行了解构, 将x和y两个变量进行了赋值
• 函数的解构可以使用默认值
• 函数参数是一个对象, 通过对象解构 ,得到x,y的值, 如果解构失败使用默认值

 

7.解构的用途

1) 交换变量值

        let x = 1;
        let y = 2;
        [x, y] = [y, x];
        console.log(x, y); // 2 1

 

2) 从函数返回多个值：函数一次只能返回一个值,想要返回多个值只能将返回值放入数组或对象返回, 有了解构方法就可以轻松的取出这些值

3) 函数传参

4) 提取json数据：解构对提取json尤其有用

5) 函数参数默认值：es6允许函数的参数设置默认值