关于 '0' === 0 浅析

首先,先来科普一下,Javascript的数据类型(六种):

1、数值(number):整数和小数(比如1和3.14)

2、字符串(string):字符组成的文本(比如”Hello World”)

3、布尔值(boolean):true(真)和false(假)两个特定值

4、undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值

5、null:表示无值,即此处的值就是“无”的状态

6、对象(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了。

关于 '0' === 0 浅析

时间: 2024-10-12 17:05:10

关于 '0' === 0 浅析的相关文章

Apache Spark-1.0.0浅析(十一):Shuffle过程

一.Shuffle的产生 Shuffle Dependency是划分stages的依据,由此判断是ShuffleMapStage或ResultStage,正如下所述 * A Spark job consists of one or more stages. The very last stage in a job consists of multiple * ResultTasks, while earlier stages consist of ShuffleMapTasks. A Resul

Apache Spark-1.0.0浅析(六):资源调度——Task执行

前面说到向executorActor(task.executorID)发送LaunchTask(task)消息,在CoarseGrainedExecutorBackend中定义receive接收launchTask消息,执行executor.launchTask override def receive = { case RegisteredExecutor(sparkProperties) => logInfo("Successfully registered with driver&q

APScheduler 3.0.1浅析

简介 APScheduler是一个小巧而强大的Python类库,通过它你可以实现类似Unix系统cronjob类似的定时任务系统.使用之余,阅读一下源码,一方面有助于更好的使用它,另一方面,个人认为aps的架构设计质量很高,阅读它对于提升软件开发的sense很有帮助. 组成 APScheduler整个系统可以说由这五个概念组成: scheduler:控制器,可以看做整个系统的driver,外部世界通过它来实现任务(Job)的增删改查管理.根据IO模式的不同,aps提供了多种scheduler实现

Apache Spark-1.0.0源码浅析(一):引子

Apache Spark版本迭代速度很快,但是基本框架和经典组件保持这统一模式,所以学习Spark源码,我选择的是Apache Spark-1.0.0版本,通过分析几个主要模块的工作原理,理解Spark的运行过程. 通过LocalWordCount程序,调试Spark源码: LocalWordCount首先通过SparkConf设置Master和AppName,然后以SparkConf为参数实例化SparkContext,通过SparkContext读取本地文件,分割文本计算单词数量,最后打印结

Apache Spark-1.0.0浅析(八):资源调度——Akka通信建立

Spark使用Akka作为各种功能和组件之间的通信工具.同样,在资源调度过程中也使用其作为消息传递系统.之前,在分析了Apache Spark-1.0.0资源调度过程中,明确了主要消息的传递过程和引起的相关动作,本文主要分析Spark资源调度过程中所用到的Akka通信的初始化过程. (I)Job相关(DagScheduler.scala) SparkContext中实例化DAGScheduler @volatile private[spark] var dagScheduler: DAGSche

使用 IDEA 创建 Maven Web 项目 (异常)- Disconnected from the target VM, address: &#39;127.0.0.1:59770&#39;, transport: &#39;socket&#39;

运行环境: JDK 版本:1.8 Maven 版本:apache-maven-3.3.3 IDEA 版本:14 maven-jetty-plugin 配置: <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <configuration> <webAppSourceDirectory>${pro

云计算与虚拟化的区别0.0

1.传统数据中心面临的问题 在讲云计算和虚拟化之前,在没有云计算之前我们传统统数据中心面临的问题. 1.1.传统IDC托管 买台机器-放到IDC-安装系统-部署应用-买个域名-绑定上去-对外访问-ICP备案-ICP证(电子商务)-文网文(文化部备案)--公安局备案-接入备案(机房接入备案,备案现在机房管 ) 注销备案 -- 各种坑 北京不支持个人备案转公司备案. 域名转让(官方要求最多72小时)坑 72小时中有可能会出现 两方都给停了的风险. 一般招代理去做 1.2.IDC租用 IDC连续租三年

五年磨一剑:Java 开源博客 Solo 1.0.0 发布了!

从 Solo 第一个版本发布至今,已经过去 5 年了.今天我们非常自豪地宣布,Solo 1.0.0 正式发布,感谢一直以来关注 B3log 开源的朋友! 目前 B3log 开源有三款产品: GitHub 上 Star 数最多的 Java 博客 Solo Golang 黑科技之在线 IDE Wide 基于实时交互技术的社区 Sym 特性 基于标签的文章分类 博客/标签 Atom/RSS.Sitemap 输出 评论回复及邮件提醒 自定义页面.导航 多编辑器:Markdown.TinyMCE.Kind

语义化版本2.0.0

摘要 版本格式:主版本号.次版本号.修订号,版本号递增规则如下: 主版本号:当你做了不兼容的API 修改, 次版本号:当你做了向下兼容的功能性新增, 修订号:当你做了向下兼容的问题修正. 先行版本号及版本编译信息可以加到"主版本号.次版本号.修订号"的后面,作为延伸. 简介 在软件管理的领域里存在着被称作"依赖地狱"的死亡之谷,系统规模越大,加入的套件越多,你就越有可能在未来的某一天发现自己已深陷绝望之中. 在依赖高的系统中发布新版本套件可能很快会成为恶梦.如果依赖