12个非常实用的JavaScript小技巧【推荐】


Posted in Javascript onMay 18, 2016

这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。

使用!!操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值。为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测,只要变量的值为:0、null、" "、undefined或者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); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

在这个示例中,只要account.cash的值大于0,那么account.hasMoney返回的值就是true。

使用+将字符串转换成数字

这个技巧非常有用,其非常简单,可以交字符串数据转换成数字,不过其只适合用于字符串数据,否则将返回NaN,比如下面的示例:

function toNumber(strNumber) {
  return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

这个也适用于Date,在本例中,它将返回的是时间戳数字:

console.log(+new Date()) // 1461288164385

并条件符

如果你有一段这样的代码:

if (conected) {
  login();
}

你也可以将变量简写,并且使用&&和函数连接在一起,比如上面的示例,可以简写成这样:

conected && login();

如果一些属性或函数存在于一个对象中,你也可以这样做检测,如下面的代码所示:

user && user.login();

使用||运算符

在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); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

在循环中缓存array.length

这个技巧很简单,这个在处理一个很大的数组循环时,对性能影响将是非常大的。基本上,大家都会写一个这样的同步迭代的数组:

for(var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

如果是一个小型数组,这样做很好,如果你要处理的是一个大的数组,这段代码在每次迭代都将会重新计算数组的大小,这将会导致一些延误。为了避免这种现象出现,可以将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]);
}

检测对象中属性

当你需要检测一些属性是否存在,避免运行未定义的函数或属性时,这个小技巧就显得很有用。如果你打算定些一些跨兼容的浏览器代码,你也可能会用到这个小技巧。例如,你想使用document.querySelector()来选择一个id,并且让它能兼容IE6浏览器,但是在IE6浏览器中这个函数是不存在的,那么使用这个操作符来检测这个函数是否存在就显得非常的有用,如下面的示例:

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

在这个示例中,如果document不存在querySelector函数,那么就会调用docuemnt.getElementById("id")。

获取数组中最后一个元素

Array.prototype.slice(begin,end)用来获取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]

数组截断

这个小技巧主要用来锁定数组的大小,如果用于删除数组中的一些元素来说,是非常有用的。例如,你的数组有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]

替换所有

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"

 合并数组

如果你要合并两个数组,一般情况之下你都会使用Array.concat()函数:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然后这个函数并不适合用来合并两个大型的数组,因为其将消耗大量的内存来存储新创建的数组。在这种情况之个,可以使用Array.pus().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];

将NodeList转换成数组

如果你运行document.querySelectorAll(“p”)函数时,它可能返回DOM元素的数组,也就是NodeList对象。但这个对象不具有数组的函数功能,比如sort()、reduce()、map()、filter()等。为了让这些原生的数组函数功能也能用于其上面,需要将节点列表转换成数组。可以使用[].slice.call(elements)来实现:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

数组元素的洗牌

对于数组元素的洗牌,不需要使用任何外部的库,比如Lodash,只要这样做:

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

总结

现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦,或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧,欢迎在评论中与我们一起分享。

以上这篇12个非常实用的JavaScript小技巧【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
js实现简单扫雷
Nov 27 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
JQuery解析XML数据的几个简单实例
May 18 #Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 #Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 #Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 #Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 #Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 #Javascript
Jquery跨域获得Json的简单实例
May 18 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
angular.element方法汇总
2015/01/07 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
wxPython实现绘图小例子
2019/11/19 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
学习演讲稿范文
2014/05/10 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL