javascript中关于&& 和 || 表达式的小技巧分享


Posted in Javascript onApril 10, 2015

如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序.

确实, JavaScript高手已经运用这些技巧写出了很多强大, 高效的JavaScript程序. 但是你可以这样.

强大的 && 和 || 表达式
你可能在JavaScript库和JavaScript框架中已经见过它们了, 那么我们先由几个基本的例子开始:

例子1. || (或)
设置默认值, 通常用

function documentTitle(theTitle) {

  if (!theTitle) {

 theTitle = "Untitled Document";

  }

}

用这代替:

function documentTitle(theTitle) {

  theTitle = theTitle || "Untitled Document";

}

解析:

首先, 阅读以下的"提示"框复习JavaScript是如何判断布尔值的
|| 操作符首先从左开始判断表达式的真假, 如果为真, 马上返回左边表达式返回的值; 如果左边表达式被判断为假, 则继续判断右边的表达式, 并返回右边表达式的值
如果theTitle被判断为假, 会返回右边表达式的值. 换句话说, 如果theTitle变量被判断为真, 则返回theTitle的值.
! 提示:
JavaScript判断为假的值: null, false, 0, undefined, NaN 和 ""(空字符串).
记住像Infinity(无限大)这种 NaN 类的值是被判断为真不是假. 然而, NaN被判断为假.
除了以上这些, 其他值全部被判断为真.

例子2. &&(并)

不要这么做:

function isAdult(age) {
 if (age && age > 17) {
  return true;
 } else {
  return false;
 }
}

用这代替:

function isAdult(age) {

  return age && age > 17;

}

解析:

&& 操作符从左开始判断表达式, 如果左边的表达式被判断为假, 这马上返回false, 不管右边的表达式是否为真.
如果左边的表达式为真, 则继续判断右边的表达式, 然后返回右边表达式结果
这变得越来越有趣了

例子3.

不要这样做:

if (userName) {
 logIn(userName);
} else {
 signUp();
}

用这代替:

userName && logIn(userName) || signUp();

解析:

如果userName为真, 调用logIn函数并传递userName变量
如果userName为假, 调用logIn函数不传递任何变量

例子4.
不要这样做:

var userID;

if (userName && userName.loggedIn) {
 userID = userName.id;
} else {
 userID = null;
}

用这代替:

var userID = userName && userName.loggedIn && userName.id;

解析:

如果userName为真, 则调用user.loggedIn, 并检查user.loggedIn是否为真; 如果返回真, 则返回第三个表达式的返回值
如果userName为空, 返回null

以上所述就是本文给大家分享的第一个javascript小技巧了,希望大家能够喜欢。

Javascript 相关文章推荐
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JS返回顶部实例代码
Aug 09 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
JavaScript 变量、作用域及内存
Apr 08 #Javascript
JavaScript Function函数类型介绍
Apr 08 #Javascript
JavaScript 模块化编程(笔记)
Apr 08 #Javascript
JavaScript DOM事件(笔记)
Apr 08 #Javascript
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP小教程之实现链表
2014/06/09 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python中django学习心得
2017/12/06 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
SQL语言面试题
2013/08/27 面试题
ORACLE第二个十问
2013/12/14 面试题
教师自我反思材料
2014/02/14 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
文明礼貌主题班会
2015/08/14 职场文书
银行服务理念口号
2015/12/25 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
HTML基本元素标签介绍
2022/02/28 HTML / CSS