更新于

es6 解构笔记

发布于 / 分类: ES6 / 暂无评论 / 阅读量: 44

es6的解构,解构的是一个对象才行,如果不是对象,则先把右边的内容转成对象再进行解构。

数组和对象的解构比较简单,这里就不多说了,主要讲讲另外几个对象类型的解构:

string类型的解构

解构一段文本内容,文本内容会被转换成类似数组的对象。

let [a,b,c] = "one";

console.log(a);  // o
console.log(b);  // n
console.log(c);  // e

数值和布尔类型的转换

这两个和字符不同,他们的转换后不是数组,而是一个继承了Number或者Boolean的所有方法的对象,可以尝试理解为是一个继承了他们类型的所有方法的一个对象,比如:Number("123")

那么解构的思路就要按照对象解构的方式去使用:

Num和布尔对象都有一个toString()的方法

let {toString:n} = 123;

//n就可以获取到Number对象的toString方法。

console.log(n === Number.prototype.toString);  //true
let {toString:n} = true;

//n就可以获取到Boolean对象的toString方法。

console.log(n === Boolean.prototype.toString);  //true

undefined和null

这两个无法转换为对象,所以解构的时候,会报类型错误

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

函数的参数解构

函数的参数支持解构,因为他的参数支持传入一个对象,那么可以解构这个参数。

具体方法就不写了,和数组或者对象的解构方式一样。

圆括号的使用

解构虽然很方便,但是他有一个致命的缺陷,就是,一行代码,如果要理解这行代码是解构,那么就要识别到=等于符号的时候才能知道这是一个解构。

那么如果解构中出现了圆括号又怎么处理呢?

es6的规则就是,只要是导致解构有歧义的,就不得使用圆括号。

但是这条规则不怎么明确,所以不怎么容易辨别,所以一般建议就是,能不用圆括号就不用。

关于圆括号的一些避免,我总结出一点,非常好用,

变量声明中不能使用圆括包裹将要被赋值的变量名

//报错

let [(a)] = [1];
//没有问题

[(a)] = [1];

也就是说,let,var,这些创建的变量的时候,不要用圆括号去包裹创建的元素名,而且尽量不要去使用。

而且函数里面的参数,他其实也等于一个变量声明,所以也不能使用圆括号。

解构的用途

除了在创建对象变量的时候,或者JSON对象的时候,还可以用在js的模块引入上。

一般来说我们如果在一个js文件里书写了多个方法作为一个模块,最后都要导出为一个对象,然后一般的引用做法可能是遍历出所有的导出对象,然后一个个激活。

通过解构的方式,我们可以快速的获取到某一个指定的方法:

const {local,sesiSion} = require("storage.js");

暂无评论

设置
配色方案

布局

购买