關於 '0' === 0 淺析

 

首先，先來科普一下，Javascript的數據類型(六種)：

一、數值（number）：整數和小數（好比1和3.14）

二、字符串（string）：字符組成的文本（好比」Hello World」）

三、布爾值（boolean）：true（真）和false（假）兩個特定值

四、undefined：表示「未定義」或不存在，即因爲目前沒有定義，因此此處暫時沒有任何值

五、null：表示無值，即此處的值就是「無」的狀態

六、對象（object）：各類值組成的集合

再來看看數據類型的轉換：

// 數值：轉換後仍是原來的值
Number(324) // 324

// 字符串：若是能夠被解析爲數值，則轉換爲相應的數值
Number('324') // 324

// 字符串：若是不能夠被解析爲數值，返回NaN
Number('324abc') // NaN

// 空字符串轉爲0
Number('') // 0

// 布爾值：true 轉成1，false 轉成0
Number(true) // 1
Number(false) // 0

// undefined：轉成 NaN
Number(undefined) // NaN

// null：轉成0
Number(null) // 0

Number函數將字符串轉爲數值，要比parseInt函數嚴格不少。基本上，只要有一個字符沒法轉成數值，整個字符串就會被轉爲NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

嗯，迴歸到今天的主題，如今判斷一下

'0' === 0

在Chrome裏輸出的結果是

'0' === 0 //false

由於字符串類型和數值類型永遠都不會嚴格的等於，而若是你輸入：

'0' == 0

在Chrome裏輸出的結果是

'0' == 0 //true


一個字符串爲了和一個數字進行比較，必須事先被強制轉換爲數字,因此'0'==0是相等的。但'0' === 0是不會嚴格的等於的。

強烈推薦使用嚴格等於操做符。若是類型須要轉換，應該在比較以前顯式的轉換， 而不是使用語言自己複雜的強制轉換規則。

最近在與後臺進行數據交互的時候，遇到一個問題，找了好久，期間後臺傳給個人數據是

"exchangeList":[
{
"id":27,
"userid":"4797877",
"phonenum":"15967122745",
"state":"2",
"createtime":"2017-08-31 19:09:26",
},
]

我前端將數據循環後渲染到頁面時使用的vue框架；
假設咱們把變量什麼的都定義好了，我須要獲取到state的狀態；

html

<table class="table table-bordered table-hover text-center" id="tabletList">
<tbody>
<tr v-for="(x, index) in prizeList">

<td v-if=「x.state === 0">
未發放
</td>
<td v-else-if="x.state === 1 ">
發放中
</td>
<td v-else>
已發放
</td>
<td>
<a href="javascript:;" @click="modify(index)" class="curEdit">修改</a>
</td>
</tr>
</tbody>
</table>

彈窗的內容

<!-- 修改彈框 -->
<sweet-modal ref="dialog" class="dialog">
<h3>修改獲品狀態</h3>
<table class="editTd">
<tbody>
<tr>
<td>獎品id</td>
<td>
<input readonly="readonly" v-model="current.id" type="text" class="form-control iptText" >
</td>
</tr>
<tr>
<td>發放狀態：</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" 'index' === current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>
</tbody>
</table>
<button @click="cancel" type="button" class="btn btn-default">取消</button>
<button @click="submit" type="button" class="btn btn-danger">肯定</button>
</sweet-modal>

js

modify(i) {//點擊修改 彈框顯示當前列表的信息
this.current.id = this.prizeList[i].id
this.current.state = this.prizeList[i].state
this.index = i
this.$refs.dialog.open()
},

submit() {//肯定時提交彈窗
const i = this.index
this.$refs.dialog.close()
api.getUpdateExchange(this.current.id, this.current.state)
.then( res => {

window.opener=alert('修改爲功更新成功!')

const item = this.prizeList[this.index]
item.state = this.current.state
item.id = this.current.id
this.$set(this.prizeList, this.index, item)

})
},


如今的問題是點擊修改時，彈框裏的select的option的值沒有顯示當前列表裏的內容，對於這個問題
首先問題應該出在modify()這個方法裏，沒有等於當前的狀態，那就是沒有我在html裏寫的判斷語句，回過頭來看看

<tr>
<td>發放狀態：</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" index === current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>

這裏判斷了v-if=" index === current.state" selected，若是當前的index === current.state時纔會執行selected

當是後臺給個人json數據是{"state":"2",},也就是說state的value中的2是字符串（string）類型，
而我本地判斷的時候，index的值時數值類型（Number）,那這樣那個判斷語句是不會執行的。

知道錯誤以後，我修改了下代碼

<tr>
<td>發放狀態：</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" index == current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>

把‘===’改爲了‘==’，在最開始的時候已經說過了，字符串==數值 的時候，在其間字符串必須事先被強制轉換爲數字，因此‘0’ == 0//true,
本來這樣改成以後應該就能實現咱們想要的效果了，可是好像事與願違。

這樣仍是不行那就應該是在一開始初始化的時候的問題了，看看頁面的html

<table class="table table-bordered table-hover text-center" id="tabletList"> <tbody> <tr v-for="(x, index) in prizeList"> <td v-if=「x.state === 0"> 未發放 </td> <td v-else-if="x.state === 1 "> 發放中 </td> <td v-else> 已發放 </td> <td> <a href="javascript:;" @click="modify(index)" class="curEdit">修改</a> </td> </tr> </tbody> </table>仍是一樣的錯，當數據循環出來以後，在以前都知道了state是字符串，而我到html頁面中的時候使用的是‘===’（嚴格等於），那這樣就只能把 x.state===1 其中的某一項轉成字符串（string）或者數值（Number）類型就OK了。