ES6关于解构的详细探讨,以及可能会出现的错误
- 1.解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
- 2.字符串的解构赋值,字符串被转换成了一个类似数组的对象
- 3.默认值生效的条件是，对象的属性值严格等于undefined。
- 4.不能使用圆括号的情况
- 5.解构原理
- 声明时的注意代码块
1.解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // truelet {toString: s} = true;
s === Boolean.prototype.toString // true
- undefined和null无法转为对象,以下代码会报错
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
2.字符串的解构赋值,字符串被转换成了一个类似数组的对象
- 字符串也可以解构赋值。这是因为此时，字符串被转换成了一个
类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
- 注意是类似数组数组的。
let {length : len} = 'hello';
len // 5
3.默认值生效的条件是，对象的属性值严格等于undefined。
var {x = 3} = {x: undefined};
x // 3var {x = 3} = {x: null};
x // null
上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。
4.不能使用圆括号的情况
以下三种解构赋值不得使用圆括号。
- 变量声明语句
// 全部报错
let [(a)] = [1];let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};let { o: ({ p: p }) } = { o: { p: 2 } };
上面 6 个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。
- 函数参数
函数参数也属于变量声明，因此不能带有圆括号。
// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }
- 赋值语句的模式
// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];
上面代码将整个模式放在圆括号之中，导致报错。
// 报错
[({ p: a }), { x: c }] = [{}, {}];
上面代码将一部分模式放在圆括号之中，导致报错。
5.解构原理
解构是ES6提供的语法糖，其实内在是针对可迭代对象的Iterator接口，通过遍历器按顺序获取对应的值进行赋值。而String、Array、Map、Set等原生数据结构都是可迭代对象，可以通过for of循环遍历它。
如果创建一个数组
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]
const obj={0:10,1:112,2:12};obj [Symbol.iterator]=function *(){yield 10yield 112yield 12
}
声明时的注意代码块
- 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
因为 JavaScript 引擎会将{x}理解成一个代码块
)
