12个非常有用的JavaScript技巧


Posted in Javascript onMay 17, 2017

在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码。

1) 使用!!将变量转换成布尔类型

有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true。对于做这样的检查,你可以使用||(双重否定运算符),它能自动将任何类型的数据转换为布尔值,只有这些变量才会返回false:0,null,"",undefined或NaN,其他的都返回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); // true 
var emptyAccount = new Account(0); 
console.log(emptyAccount.cash); // 0 
console.log(emptyAccount.hasMoney); // false

在这个例子中,如果account.cash的值大于零,则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(); 
}

那么你可以在这两个变量之间使用&&(AND运算符)来缩短代码。例如,前面的代码可以缩减到一行:

conected && login();

你也可以用这种方法来检查对象中是否存在某些属性或函数。类似于以下代码:

user && user.login();

4) 使用||设置默认值

在ES6中有默认参数这个功能。为了在旧版浏览器中模拟此功能,你可以使用||(OR运算符),并把默认值作为它的第二个参数。如果第一个参数返回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); // 27 
var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25

5) 在循环中缓存array.length

这个技巧非常简单,并且在循环处理大数组时能够避免对性能造成巨大的影响。基本上几乎每个人都是这样使用for来循环遍历一个数组的:

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) 检测对象中的属性

当你需要检查某些属性是否存在,避免运行未定义的函数或属性时,这个技巧非常有用。如果你打算编写跨浏览器代码,你也可能会用到这个技术。例如,我们假设你需要编写与旧版Internet Explorer 6兼容的代码,并且想要使用document.querySelector()来通过ID获取某些元素。 但是,在现代浏览器中,这个函数不存在。所以,要检查这个函数是否存在,你可以使用in运算符。看下这个例子:

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
}

在这种情况下,如果在document中没有querySelector函数,它就会使用document.getElementById()作为代替。

7) 获取数组的最后一个元素

Array.prototype.slice(begin,end)可以用来裁剪数组。但是如果没有设置结束参数end的值的话,该函数会自动将end设置为数组长度值。我认为很少有人知道这个函数可以接受负值,如果你将begin设置一个负数的话,你就能从数组中获取到倒数的元素:

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个元素的数组,但是你只想获得前五个元素,则可以通过设置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()函数允许使用String和Regex来替换字符串,这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/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元素数组,即NodeList对象。但是这个对象并没有一些属于数组的函数,例如:sort(),reduce(),map(),filter()。为了启用这些函数,以及数组的其他的原生函数,你需要将NodeList转换为数组。要进行转换,只需使用这个函数:[] .slice.call(elements):

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌,只需使用这个技巧:

var list = [1, 2, 3];  
console.log(list.sort(function() {  
  return Math.random() - 0.5 
})); // [2,1,3]

结论

现在,你已经学到了一些有用的JS技巧,它们主要用于缩减JavaScript代码量,其中一些技巧在许多流行的JS框架都使用到,如Lodash,Underscore.js,Strings.js等。如果你知道其他JS技巧,欢迎分享!

Javascript 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
Javascript中的async awai的用法
May 17 #Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
Node.js编写CLI的实例详解
May 17 #Javascript
ES6入门教程之Class和Module详解
May 17 #Javascript
AngularJS实现动态添加Option的方法
May 17 #Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
js有序数组的连接问题
2013/10/01 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
JS实现商品橱窗特效
2020/01/09 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
PyQt5实现拖放功能
2018/04/25 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python+opencv实现阈值分割
2018/12/26 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
个性发展自我评价
2014/02/11 职场文书
先进教师个人总结
2015/02/11 职场文书
医德医风个人总结
2015/02/28 职场文书
圆明园观后感
2015/06/03 职场文书
小学教师见习总结
2015/06/23 职场文书
2019银行竞聘书
2019/06/21 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android