【知识点】数据类型的互相转换

以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷

我们先做一道面试题吧

console.log('[]==![]');

请想出你的答案，并说服你自己吧。

然后你再做一道吧：

console.log('{}==!{}');
哈哈哈哈哈哈哈哈

我们再做一道面试题吧

console.log([1,2,3] == '1,2,3')

自己尝试一下，做对了吗？

其实这三道题牵扯到了两个知识点，一个是类型的转换和比较运算符，今天重点说类型的转换。
答案及解析见文末～～～

  • 转换成Number类型的规则

//如果转换的是数字，那么结果不变
console.log(Number(2));//2

//如果转换的是字符串，但是是纯数值，那么结果是数字
console.log(Number('-23'));//-23
//如果转换的是字符串，但是是包含非数字内容，那么结果是NaN
console.log(Number('abx11'));//NaN
//如果转换的是字符串，但是是包含非数字内容，那么结果是NaN
console.log(Number('11abx'));//NaN

//如果转换的是null，结果是0
console.log(Number(null));//0

//如果转换的是undefined，那么结果是NaN
console.log(Number(undefined));//NaN

//如果转换的是布尔值true，那么结果是1
console.log(Number(true));//1
//如果转换的是布尔值false，那么结果是0
console.log(Number(false));//0

//如果转换的是空数组，那么结果是0
console.log(Number([]));//0
//如果转换的是非空数组，那么结果是NaN
console.log(Number(["2","3"]));//NaN
//如果转换的是对象（无论是否是空的），那么结果是NaN
console.log(Number({}));//NaN

当然将其他类型转换成number类型的还有parseInt和parseFloat，但是今天讨论的是转化规则，对其他的不做详谈。

  • 转化成String类型的规则

//如果转换的是数字，那么结果是字符串的数值
console.log(String(3))//'3'

//如果转换的是字符串，那么结果还是原字符串
console.log(String('abc'))//'abc'

//如果转换的是null，那么结果是字符串‘null’
console.log(String(null))//'null'

//如果转换的是undefined，那么结果是字符串'undefined'
console.log(String(undefined))//'undefined'

//如果转换的是布尔值true，那么结果是字符串'true'
console.log(String(true))//'true'
//如果转换的是布尔值false，那么结果是字符串'false'
console.log(String(false))//'false'

//如果转换的是空对象，那么结果是字符串'[object Object]'
console.log(String({}))//'[object Object]'
//如果转换的是非空对象，那么结果仍是字符串'[object Object]'
console.log(String({name:"lily"}))//'[object Object]'
//如果转换的是空数组，那么结果是空字符串
console.log(String([]))//空字符串
//如果转换的是非空数组，那么结果是字符串'2，3'（数组的值包含逗号都在字符串中）
console.log(String([2,3]))//'2，3'

当然还有toString等方法也可以将其他类型转化成字符串，这个文章不做详细讨论

  • 转换成Boolean类型的规则

//如果转换的是数字0，那么结果false
console.log(Boolean(0))//false
//如果转换的是数字非0，那么结果true
console.log(Boolean(-1))//true
//如果转换的是数字非0，那么结果true
console.log(Boolean(3))//true

//如果转换的是空字符串，那么结果false
console.log(Boolean(""))//false
//如果转换的是数字非空字符串，那么结果true
console.log(Boolean("abc"))//true

//如果转换的是null，那么结果false
console.log(Boolean(null))//false

//如果转换的是undefined，那么结果false
console.log(Boolean(undefined))//false

//如果转换的是布尔值true，那么结果仍然是true
console.log(Boolean(true))//true
//如果转换的是布尔值false，那么结果仍然是false
console.log(Boolean(false))//false

//如果转换的是空对象，那么结果是true
console.log(Boolean({}))//true
//如果转换的是非空对象，那么结果仍然是true
console.log(Boolean({name:"lily"}))//true
//如果转换的是空数组，那么结果仍然是true
console.log(Boolean([]))//true
//如果转换的是非空数组，那么结果仍然是true
console.log(Boolean([3,4]))//true

好了，知道上边的规则之后，我们来说一下刚才的3道题了

console.log('[]==![]');
console.log('{}==!{}');
console.log([1,2,3] == '1,2,3')

咦，我虽然知道了转换规则，但是好像缺了点什么？
那就是比较的时候怎么进行的转换的呢？ （只讨论==的情况）

  • 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；
//先将true转化成数字1，然后比较相等，返回true
console.log(true==1)//true
  • 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值
//先将‘34’转换成数字34，然后比较返回true
console.log("34"==34)//true
  • 如果有一个操作数是NaN，则相等操作符返回 false ，而不相等操作符返回 true。重要提示：即使两个操作数都是NaN，相等操作符也返回 false了；因为按照规则， NaN 不等于 NaN
//首先将'abc'转换成NaN，NaN和任何相比都是false
console.log("abc"==34);//false
//NaN和NaN比也是false
console.log(NaN==NaN)//false
  • 两个等号判断等于的时候null 和undefined 是相等的
console.log(null==undefined);//true
  • 如果两个操作数都是对象，则比较它们是不是同一个对象，如果两个操作数都指向同一个对象，则相等操作符返回 true；否则， 返回false
//只是两个空对象，但是分别是两个对象，所以不相等
console.log({}=={})//false
var obj1 = {};
var obj2 = obj1;

//obj1和obj2的地址都指向同一个对象，所以相等
console.log(obj2==obj1)//true

[] 和 {} 都是属于引用类型，引用类型是存放在栈内存中的，而在堆内存中会有一个或者多个地址来指向这个栈内存相对应的数据。所以在使用 == 操作符的时候，对于引用类型的数据，比较的是地址，而不是真实的值(会在引用类型值和基本类型值章节详细讲解)

终于能说这个面试题解析了

第一题：

[]==![]

  • 首先!(非操作符)优先级高于==(等于操作符)，所以先执行 ![]
  • 而空数组转化成布尔值是true，所以![]就是false
    *然后开始比较，刚才说了 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值，所以==之前空数组转化数字是0，==之后false转换数字是0
  • 所以[]==![]为真（true）

第二题：

[]==![]，和上一题道理一样，但是结果不一样

  • 首先!(非操作符)优先级高于==(等于操作符)，所以先执行 !{}
  • 而空对象转化成布尔值是true，所以![]就是false
    *然后开始比较，==之前空对象转化数字是NaN，==之后false转换数字是0，而NaN和任何值比较都是false
  • 所以{}==!{}为假（false）

第三题：

[1,2,3] == '1,2,3'

  • 首先，一个值是字符串，另一个值是对象，所以将对象转化成字符串
  • 而[1,2,3] 转换成字符串就是 '1,2,3'
  • 所以[1,2,3] == '1,2,3'为真（true）

好了12点多了，今天就唠嗑到这里了，有疑问和建议可以留言，其他内容请期待以后的内容～
谢谢观看～


拜拜，晚安！！！
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,294评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,780评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,001评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,593评论 1赞 289
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,687评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,679评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,667评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,426评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,872评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,019评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,658评论 3赞 323
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2赞 352