12 个非常有用的 JavaScript Hacks
12 个非常有用的 JavaScript Hacks
本文为大家分享 12 个非常有用的 JavaScript Hacks。这些代码可以减少代码量,并帮你写出优秀的代码。下面就让我们开始吧。
1. 使用 !!
将变量转换为布尔值
有时我们需要检查一个变量是否存在或者是否是有效值。为了实现这个功能,你可以对变量应用使用 !!
操作符:!!variable
,这可以把任何类型的值转换为布尔值,并且只有当这个变量的值为 0
/ NULL
/ " "
/ NaN
的时候才会返回 FALSE
,其他情况都返回 TRUE
。为了方便理解,我们看看下面的例子:
function Account(cash) {this.cash = cash;this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // truevar emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false
这个例子中,只要 account.cash
的值大于 0
,account.hasMoney
就将为 TRUE
。
2. 使用 +
转换为数值
这个非常赞,并且很容易实现,但它只能作用于字符串数值,否则就会返回 NaN
(不是数字)。我们来看下面的例子:
function toNumber(strNumber) {return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
并且此方法也可作用于 Date 函数,这是它将返回时间戳:
console.log(+new Date()) // 1461288164385
3. 减少条件代码
如果你看到这样的代码:
if (conected) {login(); }
你可以通过使用 &&
操作符组合两个变量来缩短它。比如前面这段代码可以缩短为:
conected && login();
你也可以用这种方法检测一个类中的属性或者方法是否存在。类似的代码:
user && user.login();
4. 使用 ||
设置默认值
现在 ES6 中支持默认值参数。在比较旧的浏览器中模拟这一特性,你可以使用 ||
操作符,通过将默认值设置为第二个参数来实现。如果第一个参数返回 FALSE
,第二个值将被作为默认值,例如:
function User(name, age) {this.name = name || "Oliver Queen";this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25
5. 在循环中缓存 array.length
当在循环中处理很大的数组时,这个小技巧虽然很简单,却会带来巨大的性能提升。通常情况下,基本上所有人都会这么循环数组:
for(var i = 0; i < array.length; i++) {console.log(array[i]); }
如果这是一个小的数组那还好,但如果是大数组,每一次循环都会重复计算数组的长度,所有就会产生一部分延迟。为了避免这种情况,你应当把 array.length
缓存到一个变量中,而不是在循环中每次计算 array.length
:
var length = array.length; for(var i = 0; i < length; i++) {console.log(array[i]); }
更简化一些的话,你可以这么写:
for(var i = 0, length = array.length; i < length; i++) {console.log(array[i]); }
6. 检测对象中的属性
当你需要检测属性是否存在时,这个技巧非常有用,它可以避免运行未定义的方法或者属性。如果你计划编写跨浏览器的代码,你可能也需要此技能。例如,假设你需要编写兼容 IE6 的代码,并且想使用 document.querySelector() 根据它们的 ID 来获取元素。然而,在这个浏览器中此方法并不存在,所以你可以使用 in 操作符来检测其存在性,例如:
if ('querySelector' in document) {document.querySelector("#id"); } else {document.getElementById("id"); }
这时,如果 document
对象中不存在 querySelector
方法的话,将使用 document.getElementById()
作为回调。
7. 获取数组中最后的元素
当你设置了 begin
和 end
两个参数的时候,Array.prototype.slice(begin, end)
方法可以剪切数组。但当你不设置 end
参数时,该函数将自动把它设置为数组的最大值。我想很多人可能不知道该函数可以接受负的参数。如果你设置一个负值的话,该函数将得到数组后面的元素:
var array = [1,2,3,4,5,6]; console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
8. 数组截断
这个技巧可以锁定数组的长度,当你需要根据你设置的元素个数来删除一些元素时,这个方法非常有帮助。比如,当数组中有 10 个元素,而你只想获取其中前 5 个的话,你可以截断数组,通过设置 array.length = 5
使其更小。看下面的例子:
var array = [1,2,3,4,5,6]; console.log(array.length); // 6 array.length = 3; console.log(array.length); // 3 console.log(array); // [1,2,3]
9. 全部替换
String.replace()
函数允许使用字符串和正则来替换字符串,默认情况下,它只会替换第一个出现的。但你可以通过在正则最后加上 /g
来模拟 replaceAll()
函数:
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
10. 合并数组
如果你需要合并两个数组的话,可以使用 Array.concat()
:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
然而,这个函数并不适用于合并大的数组,因为它需要创建一个新的数组,而这会消耗很多内存。这时,你可以使用 Array.push.apply(arr1, arr2)
来代替创建新的数组,它可以把第二个数组合并到第一个中,从而较少内存消耗:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
11. 把节点列表(NodeList)转换为数组
如果你运行 document.querySelectorAll("p")
方法,它可能会返回一个 DOM 元素的数组 — 节点列表对象。但这个对象并不具有数组的全部方法,如 sort()
,reduce()
, map()
, filter()
。为了使用数组的那些方法,你需要把它转换为数组。只需使用 [].slice.call(elements)
即可实现:
var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // 现在 NodeList 是一个数组 var arrayElements = Array.from(elements); // 这是另一种转换 NodeList 到 Array 的方法
12. 打乱数组元素的顺序
不适用 Lodash 等这些库打乱数组元素顺序,你可以使用这个技巧:
var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
总结
现在你已经学到了一些可以减少代码量的 Hacks,其中一些出现在类似于 Lodash、Underscore.js、Strings.js 等的 JS 框架中。如果你想学习的更深入,并且想更加的减小代码量,可以持续的关注我们。我希望你喜欢这篇文章,如果你有其他 JS 的技巧,可以在留言中与我们分享。
via:jscrambler.com,本文由 Specs 翻译整理,发布在 WEB资源网,未经允许,不得转载。
12 个非常有用的 JavaScript Hacks相关推荐
- 12 个非常有用的 JavaScript 技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 12 个你可能从未使用过的有用的 JavaScript 库
JavaScript 在不断发展,几乎每天都有新库出来,或者扩展旧库以支持新功能.因此,我们现在拥有数千个 JavaScript 库.并非所有这些都对一般 Web 开发人员有用. 事实上,它们中的许多 ...
- 一些有用的javascript实例分析(二)
一些有用的javascript实例分析(二) 原文:一些有用的javascript实例分析(二) 1 5 求出数组中所有数字的和 2 window.onload = function () 3 { 4 ...
- 【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
- 9款有用的Javascript代码高亮脚本
原文:9款有用的Javascript代码高亮脚本 译自:webdesignbooth 转自:http://www.qianduan.net/9-useful-javascript-syntax-hig ...
- 19个很有用的 JavaScript 库
流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能,然而需 ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- 13个有用的javascript开发人员工具,用于编写高质量的代码
Today I'm going to show you 13 well-know and popular tools to write better and cleaner JavaScript co ...
最新文章
- go语言实现排序算法
- Netflow/IPFIX 流量收集与分析
- Docker网络模型(八)
- 通过反射获取类上的注解
- TestNG 入门教程
- ASP.NET MVC 简单的分页思想与实现
- 34. 二分查找左右边界
- linux命令we,Linux 命令执行过程
- iconfont阿里巴巴矢量图标库使用步骤
- 新手学堂之有刷/无刷动力电调与马达知识
- python求职意向怎么写_怎样写好求职简历?
- PRSice-2软件安装教程
- 操作系统资源管理技术
- matlab sil验证,科学网—径流模拟结果校准和验证图(matlab) - 张凌的博文
- Git合并单个文件和[y,n,q,a,d,/,K,j,J,g,e,?]
- 【21天算法学习】折半插入排序
- jquery变量var的使用
- Nodecache免费香港CDN加速DNS解析服务1T流量!
- Windows主机入侵痕迹排查办法
- 如何收藏豆瓣FM中的红心歌曲