ES6关于解构的详细探讨,以及可能会出现的错误

1.解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
2.字符串的解构赋值,字符串被转换成了一个类似数组的对象
3.默认值生效的条件是，对象的属性值严格等于undefined。
4.不能使用圆括号的情况
5.解构原理
声明时的注意代码块

1.解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

js 复制代码

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

undefined和null无法转为对象,以下代码会报错

js 复制代码

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

2.字符串的解构赋值,字符串被转换成了一个类似数组的对象

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

js 复制代码

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

注意是类似数组数组的。

js 复制代码

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

3.默认值生效的条件是，对象的属性值严格等于undefined。

js 复制代码

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

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

上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。

4.不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。

变量声明语句

js 复制代码

// 全部报错
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

上面 6 个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。

函数参数
函数参数也属于变量声明，因此不能带有圆括号。

js 复制代码

// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }

赋值语句的模式

js 复制代码

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

上面代码将整个模式放在圆括号之中，导致报错。

js 复制代码

// 报错
[({ p: a }), { x: c }] = [{}, {}];

上面代码将一部分模式放在圆括号之中，导致报错。

5.解构原理

解构是ES6提供的语法糖，其实内在是针对可迭代对象的Iterator接口，通过遍历器按顺序获取对应的值进行赋值。而String、Array、Map、Set等原生数据结构都是可迭代对象，可以通过for of循环遍历它。

js 复制代码

如果创建一个数组
const arr=new Array();
console.log(arr [Symbol.iterator])//values() { [native code] }
创建创建一个对象
const obj=new Object();
console.log(obj [Symbol.iterator])//objundefined

根据解释，数组可以正常解构可以理解，但为什么对象没有却也行呢？

通俗的解释

数据的解构过程：创建数组 -> 遍历迭代器 -> 复制属性
对象的解构过程：创建对象 -> 枚举属性（OwnPropertyKeys） -> 复制属性，跟迭代器无关
这也是为什么数组无法解构对象的原因，当然也可以强行解构，无非写个 $Symbol.iterator$ ，当然你也可以把数组的遍历器赋值null玩玩，这回报错，别在项目里坑别人！哈哈

下面直接手写一个 $Symbol.iterator$

js 复制代码

 const obj={0:10,1:112,2:12};
 obj [Symbol.iterator]=function *(){
    yield 10
    yield 112
    yield 12
}

声明时的注意代码块

错误的写法

js 复制代码

let x;
{x} = {x: 1};
// SyntaxError: syntax error

因为 JavaScript 引擎会将{x}理解成一个代码块