2015-11-01 |

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

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

 

正文开始

众所周知,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大牛(一)

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


发表评论

    评价:
    验证码: 点击我更换图片