小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

1.对象的解耦赋值

对象的解耦赋值是通过变量名称与对象的属性名称——对应实现的。

解耦赋值运算符两边的格式必须要保持一致，否则报错。

/*
    对象的解耦赋值 - 从对象中提取值，为变量进行赋值
    * 变量名称必须与对象的属性名称一一对应
        * 如果不对应，导致解耦赋值失败
    * 解耦赋值量变的格式必须保持一致
*/
let {x,y} = {
    x:10,
    y:20
}
console.log(x,y)//10 20

对象解耦赋值的扩展

数组的解耦赋值是赋值运算符量变的模式相同，左边的变量会被赋予对应位置的值。

对象的解耦赋值不仅需要变量名称与对象的属性名称要一一对应,还要结构相同。

如下示例代码所示：

// 对象的解耦赋值不仅变量名称与对象的属性名称要一一对应,还要结构相同
let {m:{age,name},n} = {
    m:{
        age:18,name:'迪迦'
    },
    n:function() {
        return 10
    }
};
console.log(age,name,n());//18 迪迦 10

对象解耦赋值失败、不完全解耦赋值和默认值

// 解耦赋值失败
let {m,n} = {
    m:100
}
console.log(m,n);//100 undefined

// 不完全解耦赋值
let {x} = {
    x: 100,
    y:10
}
console.log(x);//100

// 默认值
let {s,d=1} = {
    s:100
}
console.log(s,d);//100 1

2.字符串的解耦赋值

字符串的解耦赋值被转换成了类似于数组的对象。

/*
    字符串的解耦赋值
    * 变量的数量与字符串中字符的数量进行对应
*/
let [a,b,c] = 'xyz';
console.log(a,b,c);//x y z

let [q,w,e] = 'qqwwee';
console.log(q,w,e);//q q w

let [o,p,k] = '大前端';
console.log(o,p,k);// 大 前 端

3.数值与布尔值的解耦赋值

解耦赋值时，如果赋值运算符右边是数值或布尔值的话，则会先转换为对象。

**解耦赋值的规则是，只要赋值运算符右边的值不是对象或数组的话，会先转换为对象。**由于undefined 和 null 无法转换为对象，所以解耦赋值时会报错。

如下示例代码所示：

/*
    数字值的解耦赋值 - 作为值的是一个数字值
    * 结果 - 报错 ：数字值是不能被迭代遍历的
    * 解耦赋值 - 作为值的类型必须是可迭代遍历的
*/

// 数字值或者布尔值的解耦赋值 - 都是现将数字值或布尔值转换成对象类型

/*
let [a] = 100;
console.log(a);//TypeError: 100 is not iterable
*/

let num = new Number(100);
console.log(typeof num.toString());//string

let {toString : m}=100;
console.log(m === Number.prototype.toString);//true
//m是Number的toString类型的方法

// 布尔值的解耦赋值
let {toString : x} = true;
console.log(x === Boolean.prototype.toString)//true

经过上述示例代码所示，可得出结论：

数字值或者布尔值的解耦赋值 - 都是现将数字值或布尔值转换成对象类型。

4.函数参数的解耦赋值

声明函数时，函数的参数也可以使用解耦赋值。

示例代码如下所示：

// 函数定义 - 形参，相当于在函数作用域中定义了一个局部变量（没有赋值）
function fn(a,b) {
    console.log(a,b);
}
// 函数调用 - 实参，相当于在函数作用域中为定义的变量进行赋值
fn(10,20);//10 20

// 数组形式
function f([a,b]) {
    console.log(a,b);
}
f([10,20]);//10 20

// 对象形式
function fun({m,n}) {
    console.log(m,n);
}
fun({
    m:10,
    n:20
});//10 20

ES6 解耦赋值之 对象、字符串、数值与布尔值和函数