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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python编程线性回归代码示例
2017/12/07 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python安装pil库方法及代码
2019/06/25 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python带参数打包exe及调用方式
2019/12/21 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
七年级英语教学反思
2014/01/15 职场文书
学习经验演讲稿
2014/05/10 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
关于诚信的活动方案
2014/08/18 职场文书
督导岗位职责
2015/02/04 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL