【JavaScript 学以致用】值的判断以及类型转换

BytePioneer
• 阅读 1162

引言

来到北京已经有4个年头了,做过一些测试、打杂、前端的工作之后,最后还是选择了前端的工作。现阶段主要还是在写业务代码,代码质量,工作效率就显得尤为重要。【学以致用】这个系列主要记录一些平时工作、学习遇到的一些问题,方便以后查漏补缺。

value 显示强制类型转换

最新的 ECMAScript 标准定义了 7 种数据类型:

  • 6 种原始类型:

    • Boolean
    • Null
    • Undefined
    • Number
    • String
    • Symbol (ECMAScript 6 新定义)

  • Object

通常我们在工作的时候需要和后台对接,函数在处理返回值的时候如果做了容错判断,把数据转换成我们想要的类型,在编写后续业务代码的时候就会更加轻松 :-D

下图是 《JavaScript权威指南》中关于类型转换的总结:

【JavaScript 学以致用】值的判断以及类型转换

举个栗子:后台返回值为一个字符串,内容是0 ~ 5的数字,现在使用的时候需要将参数转化为数字类型。

// wrong
return Number(value) 
// '' -> 0 
// undefined -> NaN 
// 'aaa' -> NaN

// right 前面是剔除掉 '' undefined ,后面可以剔除掉 NaN 的类型
if (value && Number(value) >= 0) {
    return Number(value);
} else {
    return null; 
}

关于值的比较,当我们只关心值是否正常时,还有一个比较靠谱的方法:正则表达式,上面的例子也可以这样来写:

if (/[0-5]/.test(value)) {
    return Number(value);
} else {
    return null; 
}

小结:在判断两个值是否相等时,最好显式的转化,让代码更加清晰易读,然后用全等运算符 === 或者 !== 来比较。

隐式强制类型转换

隐式强制类型转换指的是一些特殊的操作的副作用来实现类型转换,而非 Number()String() 等函数来实现值的类型转换。隐式强制类型转换通常会使代码更加简洁,但同时也增加了代码的理解难度,我们编写的代码大都是给别人看的,要考虑到大家的理解是否保持一致。

数字和字符串的转换,个人习惯是使用显示的转换,这里不再赘述。

ToBoolean

下面几种情况会发生布尔值的强制类型转换:

  • if (..) 语句中的天健判断表达式。
  • for (.. ; .. ; ..) 语句中的条件判断表达式。
  • while (..) 循环中的条件判断表达式。
  • ? : 中的条件判断表达式
  • || 和 && 的做操作数

switch 语句使用的是全等判断,不会发生隐式的强制转换。

转换的结果可以参照上面的表格,或者下面的链接?:

js比较表https://dorey.github.io/JavaS...

对象转换为原始值

所有对象会继承两个方法toString()valueOf()

  • 对象转换为字符串 String(Object)

    • 1、当对象具有toString()会优先调用;
    • 2、如果没有toString()方法,或者toString()没有返回一个原始值,则会调用valueOf()方法;
    • 3、无法从toString()valueOf()获取原始值的时候,则会抛出一个类型错误异常。
String([1,2,3])  // "1,2,3"
String(function(x) {return x+1;})  // "function(x) {return x+1;}"
String("/\d+/g") // "/\d+/g"
String(new Date(2019,4,14)) // "Tue May 14 2019 00:00:00 GMT+0800 (中国标准时间)"
  • 对象转换为数字 Number(Object)

    • 1、当对象具有valueOf()会优先调用;
    • 2、如果没有valueOf()方法,或者valueOf()没有返回一个原始值,则会调用toString()方法;
    • 3、无法从toString()valueOf()获取原始值的时候,则会抛出一个类型错误异常。
Number([1,2,3])  // NaN 原始类型
Number(function(x) {return x+1;})  // NaN
Number("/\d+/g") // NaN
Number(new Date(2019,4,14)) // 1557763200000

当判断两个数组是否相等时,可以简单的将其转换为 String 类型进行比较。
当判断两个对象是否相等时,就需要借助 其他工具来完成了:https://lodash.com/docs/4.17....

参考文章

  • JavaScript 权威指南 - 第3章:类型、值和变量
  • 你不知道的 JavaScript 中卷,第4章:强制类型转换
  • Java​Script 数据类型和数据结构:https://developer.mozilla.org...
点赞
收藏
评论区
推荐文章
凯特林 凯特林
4年前
如何避免JavaScript类型转换
你是否经历过JavaScript中的某些值比较没有得到预期结果的情况?看下面的情况:即使0结果为真,if条件也没有根据结果执行。有没有想过为什么会这样?本文主要说明这些值比较的工作原理以及影响它们的因素。在深入解释之前,大家要熟悉一个概念:类型转换。什么是JavaScript类型转换?这也称为类型强制。对于不熟悉此概念的人来说,它只是将值从一种
Jacquelyn38 Jacquelyn38
4年前
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型:概念检测方法转换方法概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
徐小夕 徐小夕
4年前
几个非常有意思的javascript知识点总结
作为一名前端爱好者,笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要总结一下,毕竟已经2020年了,是时候更新一下技术储备了,本文主要通过实际案例来带大家快速了解以下几个知识点:Observer原生观察者script标签事件深入
Wesley13 Wesley13
3年前
PDF文件在线转换成PPT
  有多少人做过PDF文件的转换,还是PDF在线转换成PPT的转换,不用说转换成PPT了,连最基本的转换都没有做过吧。PDF文件支持多种文件之间的转换,如果你连PDF怎么转换成别的文件你都不了解,你的领导或者上司会满意你的工作效率吗?其实PDF在线转换成其他格式的文件很简单,转换成PPT文件也不难,需要用到一款在线转换器——迅捷PDF在线转换器。这种在线转换
Stella981 Stella981
3年前
26种JavaScript优化技术
开发人员的生活总是在学习新事物。作为前端开发人员必须知道一些使我们的代码如何更优雅,工作更轻松的技巧。也许你已经进行了很长时间的JavaScript开发,但有时你可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。这些技术可以帮助你编写干净且优化的JavaScript代码。1\.多个条件判断//lo
Stella981 Stella981
3年前
JavaScript数组索引检测中的数据类型问题
之前在写微信小程序项目时,里面有一个“城市选择”的功能,笔者用的是<pickerview组件,这个组件比较特别,因为它的value属性规定是数组格式的。比如:value"1"。因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的)letval_onetypeoft
铁扇公主 铁扇公主
1年前
苹果Mac版WebStorm 最新中文介绍
WebStormforMac是一款非常强大和实用的JavaScriptIDE,具有丰富的功能和工具,可帮助开发人员提高工作效率和代码质量。无论是做前端还是后端,都是一款非常值得尝试的软件。智能代码编辑器:软件内置有智能代码补全、语法高亮、错误检查、自动格式
万字长文,聊聊我在锦礼成长的这一年
”学而不思则罔,思而不学则殆“,本文记录了作者在锦礼侧工作1年间遇到的思考与成长、挑战与困难,也是对过去工作的总结与反思,分享出来,希望对大家有所帮助。本文约10000字如果觉得页面很长那是因为截图和留言很多,哈哈00引言光阴似箭,来到锦礼产品线已满一年了
待兔 待兔
11个月前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望
京东云开发者 京东云开发者
11个月前
从校招新星到前端技术专家的成长之路
引言我在2018年校招进入京东,主要负责广告投放系统的前端工作。在京东,这一路走来,我经历了多种角色转换,我从学生到职场人,从校招生到校招导师,从初级前端开发到前端技术专家,也见证了京东广告业务的蓬勃发展。回顾过去的成长历程,我心中充满了感慨。首先,我要衷