有你在真好 的个人博客
JavaScript-实用黑科技45条助你成为JS大牛(一)
阅读:2191 添加日期:2021/3/27 23:30:33 原文链接:https://www.toutiao.com/item/6197593286498386433/

注:小编是一个有轻微处女座情节的人,所以很多内容为了方便阅读和格式美观,我都做成了图片,上传后头条都压缩了图片质量,但是不影响大家阅读,因为可以点击放大,哇哈哈!

最近比较忙,希望大家多多理解,还有就是马上中秋十一了,小编要会内蒙古大草原了。可能没有办法及时的更新,希望大家多多理解。不过小编会在闲的时候更新一些搞笑的图片以及福利图,喜欢的大家可以留意一下,再次感谢大家的阅读以及鼓励,您的阅读是我最大的动力。

正文开始

众所周知,Javascript是全球最流行的语言之一,它涉足Web开发,移动端开发( PhoneGap 、 Appcelerator ),服务端开发( Nodejs 、 Wakanda ),还有多种第三方实现(CoffeeScript这种)。此外Javascript还是许多开发者进入编程世界所接触的第一门语言。它既可以在浏览器中简单的弹出一个alert窗口,也能达到控制机器人这种复杂的程度(比如 nodebot 、nodruino)。现在那些能够熟练编写结构清晰、性能卓越的Javascript开发者们,已经成为招聘市场上炙手可热的应聘者了。

在这篇文章中,我将向你展示一系列Javascript相关的小技巧和一些最佳实践。除了少数几个示例,大部分示例都可以在浏览器环境或者服务端环境适用。

注意,文章中所有的代码片段都已经在Google Chrome V30(V8 3.20.17.15)测试通过。

使用 var 关键字进行变量赋值

在Javascript中,如果一个变量没有经过声明就直接进行赋值操作,那么这个变量就会自动转变成全局变量。我们要尽量避免这种情况(全局变量)。

使用 === 来代替 == 进行判等

==!= 操作符会在某些情况下自动进行类型转化。但是 ===!== 不会做自动转化,它们在做比较时,会同时比较数据类型和值,这也使得 ===!==要比 ==!= 的速度要快。

JavaScript-实用黑科技45条助你成为JS大牛(一)

undefinednull ,0, falseNaN'' (空字符串)都为逻辑假值

使用分号 ; 来结束一行代码

使用分号来结束代码行是一个被Javascript社区推荐的最佳实践。如果你忘了也没有关系,因为现在的Javascript引擎将会自动给你加上分号。至于我们为什么应该使用分号,可以参阅这篇文章
http://davidwalsh.name/javascript-semicolons 。

使用对象构造器

JavaScript-实用黑科技45条助你成为JS大牛(一)

使用 typeofinstanceofconstructor 时要谨慎小心

  • typeof :JavaScript的一元操作符,用于以字符串的形式返回变量的原始类型,注意, typeof null 也会返回 object ,大多数的对象类型(数组 Array、时间 Date 等)也会返回 object

  • constructor :对象(函数)的内部原型属性,它是可写的(可以被重写)

  • instanceof :JavaScript操作符,会在原型链中的构造器中搜索,找到则返回 true ,否则返回 false (常用于判断某一个对象是否是某个构造器或者其父类构造器的实例)

JavaScript-实用黑科技45条助你成为JS大牛(一)

学会使用自调用函数

函数在创建之后直接自动执行,通常称之为自调用匿名函数(Self-Invoked Anonymous Function)或直接调用函数表达式(Immediately Invoked Function Expression )。比如,

JavaScript-实用黑科技45条助你成为JS大牛(一)

随机从数组中取出一个元素

JavaScript-实用黑科技45条助你成为JS大牛(一)

从一个指定的范围中取出一个随机数

这个功能在生成测试用的假数据时特别有用。比如取一个指定范围内的工资数。

JavaScript-实用黑科技45条助你成为JS大牛(一)

生成一个从0开始到指定数字的序列、

JavaScript-实用黑科技45条助你成为JS大牛(一)

生成一个随机的字母数字序列

JavaScript-实用黑科技45条助你成为JS大牛(一)

toString() 方法可以接受一个参数表示数字进制。而36进制刚好可以使用a-z和0-9这些字符。所以此方法可以用于生成简单的随机串。

打乱一个数字数组的顺序

JavaScript-实用黑科技45条助你成为JS大牛(一)

这里采用了原生的排序函数 sort() ,此外我们还可以使用专门的工具库来得到这一目的。

字符串去空格

像Java、C#、PHP这些语言都内置了 trim() 功能函数用于字符串去空格。但是Javascript没有这个内置方法。可以通过下面的方法来得到此目的,

JavaScript-实用黑科技45条助你成为JS大牛(一)

不过,在新的Javascript引擎中,已经内置支持了这个功能。

将一个数组追加到另一个数组中

JavaScript-实用黑科技45条助你成为JS大牛(一)

argruments 转换成数组

JavaScript-实用黑科技45条助你成为JS大牛(一)

检验一个参数是否为数字

JavaScript-实用黑科技45条助你成为JS大牛(一)

检验一个参数是否为数组

JavaScript-实用黑科技45条助你成为JS大牛(一)

如果 toString() 被重写过的话,上面的方法就不行了。此时我们可以使用下面的方法,

JavaScript-实用黑科技45条助你成为JS大牛(一)

如果在浏览器中没有使用iframe,还可以用 instanceof ,但如果上下文太复杂,也有可能出错。比如,

JavaScript-实用黑科技45条助你成为JS大牛(一)

取出一个数组中的最大值和最小值

JavaScript-实用黑科技45条助你成为JS大牛(一)

清空一个数组

JavaScript-实用黑科技45条助你成为JS大牛(一)

不用使用 delete 关键字来移除一个数组元素

应该使用 splice 方法而不是 delete 来移除一个数组元素。对一个数组元素使用 delete 会让这个数组元素的值变为 undefined ,并没有将这个数组元素给删除掉。

错误的用法,

JavaScript-实用黑科技45条助你成为JS大牛(一)

正确的用法,

JavaScript-实用黑科技45条助你成为JS大牛(一)

注意,要想移除一个对象的属性,应该采用 delete 方法。

可以通过操作数组长度 length 来截断一个数组

与前面那个使用 length 清空数组的示例类似,我们可以使用 length 来截断一个数组。

JavaScript-实用黑科技45条助你成为JS大牛(一)

除此之外,如果我们使用一个更大的值去重写 length ,那么数组的长度将会改变,同时会用 undefined 填充新增的数组元素。

JavaScript-实用黑科技45条助你成为JS大牛(一)

在条件中使用 &&|| 进行短语判断

JavaScript-实用黑科技45条助你成为JS大牛(一)

|| 还用于给函数参数设置默认值,比如

JavaScript-实用黑科技45条助你成为JS大牛(一)

使用 map() 对数组进行遍历操作

JavaScript-实用黑科技45条助你成为JS大牛(一)

保留指定位数的小数点

JavaScript-实用黑科技45条助你成为JS大牛(一)

注意, toFixed() 方法返回的是字符串而不是一个数字。

浮点数计算问题

JavaScript-实用黑科技45条助你成为JS大牛(一)

明天更新后半部分,谢谢欣赏,明天继续!

本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。

《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号,也可以关注微信订阅号qianduanguancha(长按可复制)

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号