理解 !! JavaScript - 简单指南
来源:dev.to
2024-12-05 16:19:01
0浏览
收藏
今天golang学习网给大家带来了《理解 !! JavaScript - 简单指南》,其中涉及到的知识点包括等等,无论你是小白还是老手,都适合看一看哦~有好的建议也欢迎大家在评论留言,若是看完有所收获,也希望大家能多多点赞支持呀!一起加油学习~

见过!! javascript 代码中并想知道发生了什么?让我们简单地分解一下。
有什么作用!!做?
双感叹号 (!!) 是将任何值转换为布尔值(true 或 false)的快速方法。就这么简单!
把它想象成问 javascript:“嘿,这个值是否存在并且有意义吗?”
- 如果是的话,你就明白了
- 如果不是,你就错了
查看实际效果
让我们看一些简单的例子:
// these become true
!!42 // true (any number except 0)
!!"hello" // true (any non-empty string)
!!{} // true (any object)
!![] // true (any array)
// these become false
!!0 // false
!!"" // false (empty string)
!!null // false
!!undefined // false
现实世界的例子
1. 检查用户是否提供了姓名
function validatename(name) {
if (!name) { // same as if (!!name === false)
return "please enter your name";
}
return `thanks, ${name}!`;
}
validatename("") // "please enter your name"
validatename("sarah") // "thanks, sarah!"
2. 检查api响应是否有数据
function handleresponse(data) {
const hasdata = !!data?.items?.length;
if (hasdata) {
return "found some results!";
}
return "no results found";
}
handleresponse({items: []}) // "no results found"
handleresponse({items: [1,2,3]}) // "found some results!"
你什么时候应该使用!!?
!!在以下情况下特别有用:
- 您需要一个真正的布尔值,而不是“真”或“假”值
- 您正在检查某个值是否存在并且有意义
- 你想让代码的意图非常清晰
哪些价值观会变成错误的?
这些都是使用 !! 时变为 false 的值:
- 0
- ""(空字符串)
- 空
- 未定义
- nan
- 假
其他一切都成真!
专业提示
1. if 语句快捷方式
在 if 语句中,javascript 会自动将值转换为布尔值,因此:
if (!!username) {
// do something
}
等同于:
if (username) {
// do something
}
2. 使用 boolean() 代替
一些开发人员更喜欢使用 boolean(),因为它更明显发生的事情:
Boolean("hello") // true
Boolean("") // false
!!("hello") // true
!!("") // false
两者的工作方式完全相同 - 使用对您更有意义的那个!
快速回顾
- !!将值转换为 true/false
- 这对于检查值是否存在非常有用
- 当你特别需要布尔结果时使用它
- 在 if 语句中,通常不需要它
记住:最好的代码是您的团队可以轻松理解的代码。不管你用不!!或 boolean(),只要保持一致即可!
以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。
版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
JavaScript 弹窗无法弹出:代码中多余括号和逗号导致语法错误?
- 上一篇
- JavaScript 弹窗无法弹出:代码中多余括号和逗号导致语法错误?
- 下一篇
- win10系统炉石传说无法修改分辨率怎么解决
查看更多
最新文章
-
- 文章 · 前端 | 5小时前 |
- JavaScript日期格式化方法全解析
- 325浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- HTML5边框定位不占位技巧
- 405浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- CSSLint优化技巧与样式提升方法
- 413浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- CSSSticky定位技巧:滚动与固定结合应用
- 293浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- 统一图标风格,FontAwesome全站应用指南
- 356浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- JavaScript动态加载模块技巧解析
- 119浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- LinuxHelix加速技巧与重构指南
- 182浏览 收藏
-
- 文章 · 前端 | 5小时前 | 顶层await
- 顶层await用法详解与实战技巧
- 288浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- 表单数据保留与自动清理技巧
- 120浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- EventLoop机制解析与执行顺序控制技巧
- 392浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- Tailwind任意值类解决方法详解
- 321浏览 收藏
-
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字:
.im">

