强制类型转换

将值从一种类型转换为另一种类型通常称为类型转换,这是显式的情况。隐式的情况被称为强制类型转换

在书中,作者还提出一种区分方式:

类型转换发生在静态类型语言的编译阶段,强制类型转换发生在动态类型语言的运行时。

JS天生的动态类型语言,所以JS中统一讲强制类型转换。


一、JS中的强制类型转换

首先看如下所示代码:

var a = 42;
var b = a + ''; // 隐式强制类型转换
var c = String(a); // 显式强制类型转换

相较于,第三行代码使用String对变量a进行封装而言,第二行代码的类型转换并非那么明显,更像是'+'操作符的副作用,所以我们把这种情况称为隐式强制类型转换,而显式的通过原生函数封装的方式则称为显式强制类型转换。当然,这只是作者的一种观点而已,但是这种观点对于区分这两种类型转换还是有好处的。


二、JSON.stringify()

如果要将对象字符串化,可以使用JSON.stringify()。这个方法可以带参数,参数可以是以下两种情况:

  1. 参数是一个字符串数组,数组元素是要执行序列化的对象的属性名称:
var a = {
b: 1,
c: '1',
d: [1,2,3]
}; JSON.stringify(a, ['b', 'c']); // "{"b":1,"c":"1"}"
  1. 参数是一个函数,这个函数有两个参数,key和value,这个函数会首先对要序列化的对象自身调用一次,然后对对象的每个属性调用一次,然后如果对象的属性值是可迭代的,会继续对属性值中的每个属性再依次调用。
var a = {
b: 1,
c: [1,23,3]
}; JSON.stringify(a, function(k, v){
console.log('key:',k,' value:',v);
return v;
})

打印输出如下:

key:   value: {b: 1, c: Array(3)}
key: b value: 1
key: c value: (3) [1, 23, 3]
key: 0 value: 1
key: 1 value: 23
key: 2 value: 3

JSON.stringify的执行结果:

"{"b":1,"c":[1,23,3]}"

JSON.stringify还有第三个参数,可以指定缩进符,让生成的字符串更容易被阅读:

JSON.stringify(a, null, 2);

输出结果:

"{
"b": 1,
"c": [
1,
23,
3
]
}"

默认是空格缩进,所以2表示缩进两个空格,你也可以传入别的字符。


三、假值对象

这一点牵扯到了其他值向布尔值的强制类型转换。日常开发中我们经常用到如下所示类型的代码:

var a = '111';
if (a) {
...
}

if语句对a做了一个隐式强制类型转换,我们知道空字符串会被转换为false,非空就是true,包括'0'这种情况。

ES规范列举如下几种会转为假值的值:

  • undefined
  • null
  • false
  • +0, -0, NaN
  • ''

除了这几种值,我们可以认为别的情况都会被转为true。包括空对象{}。但是,还存在一种假值对象,会被转为false。

作者举了一个document.all的类数组对象,会被转为false。现实情况确实是这样。但是似乎这种假值对象并不是很多,多数作为坑存在,我觉得知道有这么一个东西存在就可以了。


四、parseInt()和Number()

  • paeseInt():解析字符串中的数字
  • Number():将字符串强制类型转换为数字

解析允许字符串中含有非数字字符,解析从左到右,遇到第一个非数字字符停止,返回第一个非数字字符之前的所有数字。

转换不允许字符串含有非数字字符,否则返回NaN。

这两种方式各有各的使用场景。


五、||和&&

在JS中,||和&&这两个运算符有一些特殊,如果接触过java、C等语言。我们可能会想当然的把它们称作逻辑运算符,返回值为true或false。但是在JS中,这两个运算符的返回值并不全是true和false,而是返回两个操作数中的一个。

var a = 1;
var b = "2";
var c = {};
var d = true; a || b; // 1
a && b; // "2" b || c; // "2"
b && c; // {} c || d; // {}
c && d; // true

在JS中,||和&&操作符会首先对第一个操作数执行判断,如果值不是布尔值,首先执行强制类型转换:

  • 对“||”而言,如果第一个操作数强制类型转换后为true,则直接返回第一个操作数,否则,直接返回第二个操作数。
  • 对“&&”而言,如果第一个操作数强制类型转换后为false,则直接返回第一个操作数,否则,直接返回第二个操作数。

所以,现在我们就能更好的理解如下所示的这种代码的执行机制到底是怎么回事了:

var a = '1';
var b = '2'; if (a && b) {
...
}

首先,(a && b)这个表达式我们知道返回值是'2',然后if语句对这个结果执行了隐式强制类型转换,转换后的结果为true。


六、宽松相等和严格相等

在了解了强制类型转换后,我们也就能对=====有一个更清晰的理解。

==允许在相等比较中进行强制类型转换,而===不允许。

《You dont know JS》强制类型转换的更多相关文章

  1. Js里面的强制类型转换

    js 和 PHP语言一样是弱类型语言.近期我也在看C语言,并没有传说中那么难,既是书中一再强调的指针部分,也没有那么夸张.至少是理论和语法理解起来不是很难.看起来凡是什么东西,不要总是被别人的话迷惑了 ...

  2. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  3. JS 数据类型转换-转换函数、强制类型转换、利用js变量弱类型转换

    1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型 ...

  4. JS在if中的强制类型转换

    JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...

  5. JS中的“==”与强制类型转换

    JavaScript中有“==”与“===”,那么他们有何区别呢? 对于基本数据类型, ===  (!==)只有当两个变量的类型和值都相等时,才返回true:而 == (!=)则会对变量进行强制类型转 ...

  6. JS的类型转换,强制转换和隐式转换

    JS的类型转换 1.强制转换 通过String(),Number(),Boolean()函数强制转换 var str=123; var str1='123'; console.log(typeof s ...

  7. Js中的假值_ES5中定义的ToBoolean方法强制类型转换后值为false

    你不知道的Javascript(中)--ToBoolean javascript中的值可以分为以下两类: 1.可以被强制类型转换为false的值 2.其他(被强制类型转换为true的值) 假值---以 ...

  8. js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  9. JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符

    文章目录 1.强制类型转换Number 1.1 代码 1.2 测试结果 2.进制表示 2.1 代码 2.2 测试结果 3.强制类型转换为Boolea 3.1 代码 3.2 测试结果 4.运算符 4.1 ...

随机推荐

  1. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  2. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. python学习之老男孩python全栈第九期_数据库day004 -- 作业

    https://www.cnblogs.com/YD2018/p/9451809.html 11. 查询学过“001”并且也学过编号“002”课程的同学的学号.姓名 select student.si ...

  4. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

  5. redis介绍(7)高级用法

    redis的过期策略以及内存淘汰机制 分析:这个问题其实相当重要,到底redis有没用到家,这个问题就可以看出来.比如你redis只能存5G数据,可是你写了10G,那会删5G的数据.怎么删的,这个问题 ...

  6. python中的字符串编码问题——3.各操作系统下的不同编码方式

    各操作系统下的不同编码方式  先看一下 linux,python2.7 >>> B = b'\xc3\x84\xc3\xa8' >>> B.decode('utf- ...

  7. 风险管理,未雨绸缪——《代码之殇》读书笔记II

    这次的内容主要是关于软件开发过程中的风险管理,包括项目用时估计.产品的发布与更新.承诺兑现的重要性. ①项目用时估计 有人会质疑项目用时估计的可靠性,因为就事而言,这次的任务可能和上次不一样了,开发环 ...

  8. 如何在Markdown文档中插入空格?

    简单说 在 Markdown 文档中,可以直接采用 HTML 标记插入空格(blank space),而且无需任何其他前缀或分隔符.具体如下所示: 插入一个空格 (non-breaking space ...

  9. Azure 镜像市场发布商指南

    Azure 镜像市场发布商指南 本指南提供独立软件供应商产品上架到 Azure 镜像市场(以下简称 Azure 镜像市场)需要遵循的全流程. 文档适用范围 本指南适用于希望通过由世纪互联运营的Micr ...

  10. SCLAlertView-Swift

    SCLAlertView-Swift https://github.com/vikmeup/SCLAlertView-Swift   Animated Alert View written in Sw ...