巧用JavaScript ES6新特性

397 阅读2分钟

JavaScript在吸取了各种语言的特性之后已经变成一种语法非常灵活的语言,无论你是面向对象的程序猿还是面向函数的程序猿都能在JavaScript中找到合手的工具,这里分享一些我在使用新特性中的经验。

🚀火箭一般的JSON.stringify和JSON.parse

当我们需要复制对象的时候总是有这么一个问题困扰着我们,那就是如何对对象的深度复制。通常的解决方法就是遍历原始对象中的所有深度的属性以保证深度复制的正确性。其实我们可以使用肯快捷的方式那就是组合使用JSON.stringify()JSON.parse()这两个函数就可以实现最快速度的深度复制。

直觉中将JS对象解析成字符串然后在解析一次会产生更多的开销,但是事实是这么做其实是开销最小的方法,因为JSON.stringify()JSON.parse()这两个方法是直接在JS引擎底层运行的,并不是用JavaScript来实现对象解析,使用这两个方法的时候底层解释引擎直接调用C库来解析JS对象,如此就不需要上下文切换,这样一来速度就会大大的提升,按照Google的官方说法速度可以提高至少100倍。所以就让我们放心大胆的去使用吧。

最简单的在对象数组中查找指定属性的对象

通常在数组中查找一个置顶属性值的对象的时候我们最常用的就是♻️循环,到了ES6的时代我们有一个更简便的方法供我们使用,那就是Array.protype.find(),这个方法与Array.protype.indexOf()有点类似,但是它可以直接返回对象。

比如我要查询一个id=3的学生信息,那么就可以这么写

const student = students.find(it => it.id === 3);

这样写是不是很简单,我们都不需要使用第三方库就能实现简单明了的查询;

或者当我们需要知道这个对象的索引的时候也可以使用Array.protype.findIndex()方法,它的使用与find()类似,只是返回的结果是数组中的索引。

快速排除不需要的对象属性

ES6语法中增加了一个扩展操作,使用这个扩展操作可以非常简便的向对象中添加属性,比如

const a = {name:'Albert'}
const b = {...a, age: 78, gender: 'male'}

这样就能快速的将对象a扩展后赋值给了b,但其实我们也能使用这个方法将不需要的属性排除出去,比如说

cosnt a = {name: 'Albert', age: 78, gender: 'male'}
cosnt {age, gender, ...b} = a

使用这个方法我们就能快速的将属性agegender从对象a中排除出去了,而对象b就仅仅只有name这一个属性了。