(译文)12个简单(但强大)的JavaScript技巧(一)
2024-03-27 01:29:52
原文连接: 12 Simple (Yet Powerful) JavaScript Tips
我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都可以马上使用, 你不需要成为JavaScript高手才能理解这些.如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的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为假, 调用signUp函数不传递任何变量
例子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
最新文章
- ListView 的使用
- WPF:依赖属性的数据绑定
- 3.3.1实现Servlet
- 如何快速掌握CSS（各种CSS工具）
- 用户环境配置文件/etc/profile
- 任务分发系统gearman
- 通过js获取计算机内网ip，计算机名，mac地址
- Say To ME
- hdu 5424 Rikka with Graph II(dfs+哈密顿路径)
- 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)
- win7下wamp扩展memcache
- Android Studio 提高工作效率的奇技
- 如何在阿里云linux上部署java项目
- Vue不能检测数组或对象变动问题的解决
- new 和 newInstance 的区别
- Proxy代理模式（结构型）
- CAD常用的快捷键命令
- js 定时执行
- CPLSetErrorHandlerEx函数Bug
- jsp动作之 forward