~~~
if ([]) alert(1) // 是會彈出1的
~~~
`[]`在`javascript`中并不為假,所以很多地方請注意這個。特別是再用`jQuery`是別忘了這個,假設要判斷一個元素是否存在,有這樣的代碼:
~~~
if ($(".tabs-panel").eq(index)) {
// 存在
} else {
// 不存在
}
~~~
這樣的代碼是不正確的,得不到你期望正確的效果的。
**注意字符串和整形布爾值的不同:**
var a = 0; var b = '0';
if (a) {alert(1)}; // false
if (b) {alert(2)}; // true
```
var a = 0;!a;
// true
var a = '0';!a;
// false
var a = '';!a;
// true
```
```
$('[name=invoice_id]').val()
"0"
!$('[name=invoice_id]').val()
false
$('[name=invoice_id]').val() == 0
true
所以 不能用 !$('[name=invoice_id]').val()
```
`'0'` 和 `0` 是由區別的。
> 如果是在php里面取反后都是 true,但是js中字符串轉換為布爾值都為true **(空字符串除外)** ,哪怕是'0','-1' 轉換后都為true。
> int(0) => false, int(-1) true js就是這么神奇,在js中,除了0以外的整形,不論正負,都是 true
>[danger] 注意這很重要,又非常容易疏忽,出現問題往往很難排查,所以小的知識點很重要。
參考:[jQuery中eq和get的區別](http://www.cnblogs.com/eoiioe/archive/2008/11/16/1334572.html)
>[info] eq返回的是一個jquery對象
還記得那個常見的代碼我們用`jQuery`是怎么判斷一個元素存在嗎?
~~~
if ($('#div').length > 0) {
// #div存在
}
~~~
其實和這個一樣的原理,它返回的是一個`jQuery`對象,所以上面的代碼可改成:
~~~
if ($(".tabs-panel").eq(index)[0]) {
// 存在
} else {
// 不存在
}
~~~
注意這里我們不是判斷長度,而是直接判斷第0個元素,這一樣可以。(沒有返回的是`undefined`)
~~~javascript
0 == false;
true
'0' == false;
true
!0;
true
!'0';
false
~~~
>[tip] 注意:js 的 switch 條件判斷是全等,php 的 switch 條件判斷 不是全等的
*****
### 要避免使用字符串來比較大小
```javascript
'1000' > '2' // false
'3000' > '2' // true
1000 > 2 // true
```
*****
### 擴展
var a ={};a.length
對象沒有length屬性,所以返回undefined,請注意這個問題。php返回的可能是純中括號的是數組,也可能是花括號的對象,但是沒有數據時,一般返回的是空數組[],空數組是有length的。
不管怎么樣,js判斷是多注意這些問題,多考慮是否是要判斷length。
- 開始
- 微信小程序
- 獲取用戶信息
- 記錄
- HTML
- HTML5
- 文檔根節點
- 你真的了解script標簽嗎?
- 文檔結構
- 已經落后的技術
- form表單
- html實體
- CSS
- css優先級 & 設計模式
- 如何編寫高效的 CSS 選擇符
- 筆記
- 小計
- flex布局
- 細節體驗
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物語
- js函數定義
- js中的數組對象
- js的json解析
- js中數組的操作
- js事件冒泡
- js中的判斷
- js語句聲明會提前
- cookie操作
- 關于javascript你要知道的
- 關于innerHTML的試驗
- js引擎與GUI引擎是互斥的
- 如何安全的修改對象
- 當渲染引擎遇上強迫癥
- 不要使用連相等
- 修改數組-對象
- 算法-函數
- 事件探析
- 事件循環
- js事件循環中的上下文和作用域的經典問題
- Promise
- 最佳實踐
- 頁面遮罩加載效果
- 網站靜態文件之思考
- 圖片加載問題
- 路由及轉場解決方案
- web app
- 寫一個頁面路由轉場的管理工具
- 談編程
- 技術/思想的斗爭
- 前端技術選型分析
- 我想放點html模板代碼
- 開發自適應網頁
- 后臺前端項目的開發
- 網站PC版和移動版的模板方案
- 前后端分離
- 淘寶前后端分離
- 前后端分離的思考與實踐(一)
- 前后端分離的思考與實踐(二)
- 前后端分離的思考與實踐(三)
- 前后端分離的思考與實踐(四)
- 前后端分離的思考與實踐(五)
- 前后端分離的思考與實踐(六)
- 動畫
- 開發小技巧
- Axios
- 屏幕適配
- 理論基礎
- 思考
- flexible.js原理
- 實驗
- rem的坑,為什么要設置成百分比,為什么又是62.5%
- 為什么以一個標準適配的,其它寬度也能同等適配
- 自適應、響應式、彈性布局、屏幕適配
- 適配:都用百分比?
- 番外篇
- 給你看看0.5px長什么樣?
- 用事實證明viewport scale縮放不會改變rem元素的大小
- 為什么PC端頁面縮放不會影響rem元素
- 究竟以哪個為設備獨立像素
- PC到移動端初試
- 深入理解px
- 響應式之柵格系統
- 深入理解px(二)
- 一篇搞定移動端適配
- flex版柵格布局
- 其他
- 瀏覽器加載初探
- 警惕你的開發工具
- JS模塊化
- webpack
- 打包原理
- 異步加載
- gulp
- 命名規范
- 接口開發
- sea.js學習
- require.js學習
- react學習
- react筆記
- vue學習
- vue3
- 工具、技巧
- 臨時筆記
- 怎么維護好開源項目
- 待辦
- 對前端MVV*C框架的思考
- jquery問題
- 臨時
- 好文
- 節流防抖