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 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php实现源代码加密的方法
2015/07/11 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python任务调度实例分析
2015/05/19 Python
常用python编程模板汇总
2016/02/12 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
django允许外部访问的实例讲解
2018/05/14 Python
python实现排序算法解析
2018/09/08 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
super()与this()的区别
2016/01/17 面试题
幼儿园教师培训方案
2014/02/04 职场文书
会计专业自我评价
2014/02/12 职场文书
小学清明节活动方案
2014/03/08 职场文书
cf收人广告词
2014/03/14 职场文书
销售经理竞聘书
2014/03/31 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
感谢信模板大全
2015/01/23 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书