一些 JavaScript 中的代码小技巧
栏目: JavaScript · 发布时间: 6年前
内容简介:在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中,得到很多开发朋友的反馈确实不知道这些小技巧。今天,我们来聊一聊在· · ·我们平时经常会用到
在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中,得到很多开发朋友的反馈确实不知道这些小技巧。今天,我们来聊一聊在 EcmaScript5/6+
中的一些小技巧,欢迎评论区讨论下更多技巧。
· · ·
JSON.stringify
我们平时经常会用到 JSON
对象,比如当我们要实现对象的深拷贝时,我们可以用 JSON
对象的 JSON.stringify
和 JSON.parse
来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系。在使用 localStorage
时,也会用到它,因为 localStorage
只能存储字符串格式的内容,所以,我们在存之前,将数值转换成 JSON字符串
,取出来用的时候,再转成对象或数组。
对于 JSON.stringify
方法,它可以帮我们把一个 对象或数组 转换成一个 JSON字符串
。我们通常只会用到它的第一个参数,其实它还有另外两个参数,可以让它实现一些非常好用的功能。
首先来看语法:
JSON.stringify(value[, replacer [, space]])
参数:
-
value:将要被序列化的变量的值
-
replacer:替代器。可以是函数或者是数组,如果是一个函数,则
value
每个属性都要经过这个函数的处理,该函数的返回值就是最后被序列化后的值。如果是一个数组,则要求该数组的元素是字符串,且这些元素会被当做value
的键(key
)进行匹配,最后序列化的结果,是只包含该数组每个元素为key
的值。 -
space:指定输出数值的代码缩进,美化格式之用,可以是数字或者字符串。如果是数字(最大为10)的话,代表每行代码的缩进是多少个空格。如果是字符串的话,该字符串(最多前十个字符)将作显示在每行代码之前。
这时候,你应该知道了。我们可以用 JSON.stringify
来做序列化时的过滤,相当于我们可以自定义 JSON.stringify
的解析逻辑。
使用函数过滤并序列化对象:
使用数组过滤并序列化对象:
还有一个有意思的东西,是对象的 toJSON
属性。
如果一个对象有 toJSON
属性,当它被序列化的时候, 不会对该对象进行序列化,而是将它的 toJSON
方法的返回值进行序列化 。
见下面的例子:
· · ·
用 Set 来实现数组去重
在 ES6
中,引入了一个新的数据结构类型: Set
。而 Set
与 Array
的结构是很类似的,且 Set
和 Array
可以相互进行转换。
数组去重,也算是一个比较常见的前端面试题了,方法有很多种,这里不多赘述。下面我们看看用 Set
和 ...(拓展运算符)
可以很简单的进行数组去重。
· · ·
用块级作用域避免命名冲突
在开发的过程中,通常会遇到命名冲突的问题,就是需要根据场景不同来定义不同的值来赋值给同一个变量。下面介绍一个使用 ES6
中的 块级作用域
来解决这个问题的方法。
比如,在使用 switchcase
时,我们可以这样做:
· · ·
函数参数值校验
我们知道,在 ES6
中,为函数增加了参数默认值的特性,可以为参数设定一些默认值,可以让代码更简洁,可维护。
其实,我们可以通过这个特性来做 函数参数值的校验 。
首先,函数的参数可以是任意类型的值,也可以是函数,比如下面这个:
可以看出,如果在调用 fix
时传了参数 a
,则不会执行函数 getA
,只有当不传递参数 a
时,才会执行函数 getA
。
这时候,我们可以利用这一特性,为参数 a
添加一个必传的校验,代码如下:
· · ·
用解构赋值过滤对象属性
在前面我们介绍了使用 JSON.stringify
来过滤对象的属性的方法。这里,我们介绍另外一种使用 ES6
中的 解构赋值
和 拓展运算符
的特性来过滤属性的方法。
比如,下面这段示例:
· · ·
用解构赋值获取嵌套对象的属性
解构赋值
的特性很强大,它可以帮我们从一堆嵌套很深的对象属性中,很方便地拿到我们想要的那一个。比如下面这段代码:
· · ·
合并对象
ES6
中新增的 拓展运算符
,可以用来解构数组,也可以用来解构对象,它可以将对象中的所有属性展开。
通过这个特性,我们可以做一些对象合并的操作,如下:
· · ·
使用 === 代替 ==
在 JavaScript
中, ===
和 ==
是有很大的不同的, ==
会将两边的变量进行转义,然后将转义后的值进行比较,而 ===
是严格比较,要求两边的变量不仅值要相同,它们自身的类型也要相同。
JavaScript
经常被调侃成一个神奇的语言,就是因为它的转义的特性,而用 ==
可能会引入一些深埋的bug。远离 bug,还是要用 ===
:
当然,在用 ===
时,也会出问题,比如:
ES6
中提供了一个新的方法: Object.is()
,它具有 ===
的一些特点,而且更好、更准确,在一些特殊场景下变现的更好:
下图,是关于 ==
、 ===
和 Object.is
的对比:
· · ·
引用:
https://developer.mozilla.org/
http://www.jstips.co/
- The End -
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 写好代码的11个技巧
- 老旧系统重构技巧,轻松搞定遗留代码
- numpy使用技巧之数组过滤实例代码
- 提高代码执行效率的几个小技巧
- 用于简化和改进代码的函数式编程技巧
- 这些Python代码技巧,你肯定还不知道
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网站重构(第3版)
[美] Jeffrey Zeldman、[美] Ethan Marcotte / 傅捷、祝军、李宏 / 电子工业出版社 / 2011-3 / 59.00元
《网站重构:应用Web标准进行设计(第3版)》内容简介:畅销书作家、设计师、网页标准教父jeffrey zeldman再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构:应用Web标准进行设计(第3版)》的第3版了,此次更新基本涵盖了随着环境和技术的变化,web标准所面临的挑战以及因此而发生的改善。第3版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。 ......一起来看看 《网站重构(第3版)》 这本书的介绍吧!