Javascript常用小技巧汇总


Posted in Javascript onJune 24, 2015

本文实例讲述了Javascript常用小技巧。分享给大家供大家参考。具体分析如下:

一、True 和 False 布尔表达式

下面的布尔表达式都返回 false:

null
undefined
'' 空字符串
0 数字0

但小心下面的, 可都返回 true:

'0' 字符串0
[] 空数组
{} 空对象

下面段比较糟糕的代码:

while (x != null) {

你可以直接写成下面的形式(只要你希望 x 不是 0 和空字符串, 和 false):

while (x) {

如果你想检查字符串是否为 null 或空:

if (y != null && y != '') {

但这样会更好:

if (y) {

注意: 还有很多需要注意的地方, 如:

Boolean('0') == true
'0' != true
0 != null
0 == []
0 == false
Boolean(null) ==false
null != true
null != false
Boolean(undefined) ==false
undefined != true
undefined != false
Boolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != false
 
二、条件(三元)操作符 (?:)

三元操作符用于替代下面的代码:

if (val != 0) {
 return foo();
} else {
 return bar();
}

你可以写成:

return val ? foo() : bar();

在生成 HTML 代码时也是很有用的:
var html = '';

三、&& 和 ||

二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项.

"||" 被称作为 'default' 操作符, 因为可以这样:

function foo(opt_win) {
 var win;
 if (opt_win) {
  win = opt_win;
 } else {
  win = window;
 }
 // ...
}

你可以使用它来简化上面的代码:

function foo(opt_win) {
 var win = opt_win || window;
 // ...
}

"&&" 也可简短代码.比如:

if (node) {
 if (node.kids) {
  if (node.kids[index]) {
   foo(node.kids[index]);
  }
 }
}

你可以像这样来使用:

if (node && node.kids && node.kids[index]) {
 foo(node.kids[index]);
}

或者:

var kid = node && node.kids && node.kids[index];
if (kid) {
 foo(kid);
}

不过这样就有点儿过头了:

node && node.kids && node.kids[index] && foo(node.kids[index]);

 
四、使用 join() 来创建字符串

通常是这样使用的:

function listHtml(items) {
 var html = '';
 for (var i = 0; i < items.length; ++i) {
 if(i > 0) { html += ', ';
 }
 html += itemHtml(items[i]);
 }
 html +='';
 return html;
}

但这样在 IE 下非常慢, 可以用下面的方式:

function listHtml(items) {
 var html = [];
 for (var i = 0; i < items.length; ++i) {
  html[i] = itemHtml(items[i]);
 }
 return '' + html.join(', ') + '';
}

你也可以是用数组作为字符串构造器, 然后通过 myArray.join('') 转换成字符串.不过由于赋值操作快于数组的 push(), 所以尽量使用赋值操作.

五、遍历 Node List

Node lists 是通过给节点迭代器加一个过滤器来实现的. 这表示获取他的属性, 如 length 的时间复杂度为 O(n),通过 length 来遍历整个列表需要 O(n^2).

var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0; i < paragraphs.length; i++) {
 doSomething(paragraphs[i]);
}

这样做会更好:

var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
 doSomething(paragraph);
}

这种方法对所有的 collections 和数组(只要数组不包含 falsy 值) 都适用.

在上面的例子中, 也可以通过 firstChild 和 nextSibling 来遍历孩子节点.

var parentNode = document.getElementByIdx_x('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
 doSomething(child);
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
微信小程序form表单组件示例代码
Jul 15 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
js实现的倒计时按钮实例
Jun 24 #Javascript
js实现大转盘抽奖游戏实例
Jun 24 #Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 #Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 #Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 #Javascript
介绍一个简单的JavaScript类框架
Jun 24 #Javascript
jquery分割字符串的方法
Jun 24 #Javascript
You might like
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
一些不错的js函数ajax
2008/08/20 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JavaScript实现网页截图功能
2014/10/16 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python语言的优势是什么
2020/06/17 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
介绍下Java的输入输出流
2014/01/22 面试题
C++的几个面试题附答案
2016/08/03 面试题
物业管理员岗位职责范文
2013/11/25 职场文书
幼儿教育感言
2014/02/05 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
慰问信模板
2015/02/14 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
python实现的web监控系统
2021/04/27 Python
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL