资讯专栏INFORMATION COLUMN

js数据类型转化

dmlllll / 797人阅读

数据类型转化表

首先上数据类型转化表,便于遇到问题直接查看

字符串 数字 布尔值 对象
undefined
null
"undefined"
"null"
NaN false
false
throws TypeError
throws TypeError
true
false
"true"
"false"
1
0
new Boolean(true)
new Boolean(false)
""(空字符串)
"1.2"(非空,数字)
"one"(非空,非数字)
0
1.2
NaN
false
true
true
new String("")
new String("1.2")
new String("one")
0
-0
NaN
Infinity
-Infinity
1(非零)
"0"
"0"
"NaN"
"Infinity"
"-Infinity"
"1"
new Number(0)
new Number(-0)
new Number(NaN)
new Number(Infinity)
new Number(-Infinity)
new Number(1)
{}(任意对象)
[]
[9]
["a"]
{}.toString() -> {}.valueOf()
""
"9"
使用join()
{}.valueOf() -> {}.toString()
0
9
NaN
NaN
true
true
true
true
显式转换

显示转换最简单的是使用Boolean()、Number()、String()或Object()构造函数

</>复制代码

  1. Number("3"); // 3
  2. String(false); // "false"
  3. Boolean([]); // true
  4. Object(3); // new Number(3)

ps:值得注意的是,试图把undefined或null转换为对象,会抛出一个类型错误,而Object()显示转换不会,而是返回一个新创建的空对象

显示转换还有toString()toFixed()toExponential()toPrecision()parseInt()parseFloat()方法,不细说

隐式转换

隐式转换分为三种:

将值转换为原始值,ToPrimitive(input, PreferredType)

将值转化为数字,ToNumber()

将值转化为字符串,ToString()

原始类型数据转化相对比较简单,下面值看对象到原始类型的转换方式

对象的toString()和valueOf()方法

所有对象继承了两个转换方法:toString()

一般对象转化成[object object] {x: 1, y: 2}.toString(); // "[object object]"

数组转化成元素间加逗号 [1, 2, 3].toString(); // "1,2,3"

函数转化成定义(function(x){}).toString(); // "function(x) {}"

正则转化为直接量字符串 /d+/g.toString(); // "/d+/g"

日期转化为日期字符串 new Date(2000, 1, 1).toString(); // "Tue Feb 01 2000 00:00:00 GMT+0800 (中国标准时间)"

valueOf()方法

大多数对象无法真正表示为一个原始值,valueOf()简单返回对象本身

日期对象是一个特例,返回毫秒数 new Date(2010, 0, 1).valueOf(); // 12623328000

对象到字符串的转换

如果对象具有toString()方法,则调用这个方法,如果它返回一个原始值,将这个值转化为字符串,并返回这个字符串结果

如果对象没有toString()方法,或者个这个方法不返回一个原始值,那么就会调用valueOf()方法。如果存在这个方法,则调用它,如果返回值是一个原始值,将这个值转化为只服从,并返回这个字符串结果

否则,就会抛出一个类型错误异常

对象到数字的转换

如果对象具有valueOf()方法,后者返回个亿原始值,则将这个原始值转化为数字,并返回这个数字

否则,如果对象有toString()方法,后者返回一个原始值,并转化成数字返回

否则,抛出一个类型错误异常

</>复制代码

  1. 举个栗子: ({} + {}) = ?

</>复制代码

  1. 两个对象的值进行+运算符,要先进行隐式转换成原始类型才能计算
  2. 1. ToPrimitive转换,因为没有指定PreferredType类型,默认为Number
  3. 2. 执行`valueOf()`方法,`{}.valueOf()`返回的还是{}对象
  4. 3. 继续执行`toString()`方法,`({}).toString()`返回`[Object Object]`,是原始值

所以最后结果:[Object Object][Object Object]
ps:在Firefox中返回结果为NaN,因为第一个{}被当作一个代码块,没有解析转换,变成了+{},也就是+[Object Object],最终变成NaN

==元算符隐式转换

==运算符应用和考察点很多,直接上ES5规范文档

</>复制代码

  1. 比较运算 x==y, 其中 x 和 y 是值,返回 true 或者 false。这样的比较按如下方式进行:
  2. 1、若 Type(x) 与 Type(y) 相同, 则
  3. 1* 若 Type(x) 为 Undefined, 返回 true
  4. 2* 若 Type(x) 为 Null, 返回 true
  5. 3* 若 Type(x) 为 Number, 则
  6. (1)、若 x 为 NaN, 返回 false
  7. (2)、若 y 为 NaN, 返回 false
  8. (3)、若 x 与 y 为相等数值, 返回 true
  9. (4)、若 x 为 +0 且 y 为 −0, 返回 true
  10. (5)、若 x 为 −0 且 y 为 +0, 返回 true
  11. (6)、返回 false
  12. 4* 若 Type(x) 为 String, 则当 x 和 y 为完全相同的字符序列(长度相等且相同字符在相同位置)时返回 true。 否则, 返回 false
  13. 5* 若 Type(x) 为 Boolean, 当 x 和 y 为同为 true 或者同为 false 时返回 true。 否则, 返回 false
  14. 6* 当 x 和 y 为引用同一对象时返回 true。否则,返回 false
  15. 2、若 x 为 null 且 y 为 undefined, 返回 true
  16. 3、若 x 为 undefined 且 y 为 null, 返回 true
  17. 4、若 Type(x) 为 Number 且 Type(y) 为 String,返回比较 x == ToNumber(y) 的结果。
  18. 5、若 Type(x) 为 String 且 Type(y) 为 Number,返回比较 ToNumber(x) == y 的结果。
  19. 6、若 Type(x) 为 Boolean, 返回比较 ToNumber(x) == y 的结果。
  20. 7、若 Type(y) 为 Boolean, 返回比较 x == ToNumber(y) 的结果。
  21. 8、若 Type(x) 为 StringNumber,且 Type(y) 为 Object,返回比较 x == ToPrimitive(y) 的结果。
  22. 9、若 Type(x) 为 Object 且 Type(y) 为 StringNumber, 返回比较 ToPrimitive(x) == y 的结果。
  23. 10、返回 false

总结起来有如下几点值得注意

NaN !== NaN

x,y 为null、undefined两者中一个 // 返回true

x、y为Number和String类型时,则转换为Number类型比较

有Boolean类型时,Boolean转化为Number类型比较

一个Object类型,一个String或Number类型,将Object类型进行原始转换后,按上面流程进行原始值比较

</>复制代码

  1. 举一个栗子:

</>复制代码

  1. var a = {
  2. valueOf: function () {
  3. return1;
  4. },
  5. toString: function () {
  6. return"123"
  7. }
  8. }
  9. console.log(rue == a) // true;

</>复制代码

  1. 1. 首先,x与y类型不同,x为boolean类型,则进行ToNumber转换为1,为number类型
  2. 2. x为number,y为object类型,对y进行原始转换,ToPrimitive(a, ?),没有指定转换类型,默认number类型
  3. 3. ToPrimitive(a, Number)首先调用valueOf方法,返回1,得到原始类型1。
  4. 4. 1 == 1, 返回true

同理适用于><!=+运算符的隐式转换(但要除去日期对象)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107384.html

相关文章

  • JS知识—面试准备(一)

    摘要:使用结束后会重新压扁自己,让自己不是对象。作用用来判断某个对象是否含有指定的自身属性语法参数要检测的对象要检测的属性名称。但是函数作用域外部访问不到函数内部的变量,对象,函数。 1.JS内置类型 分为基本数据类型和Object.基本数据类型有:null,undefined,string,boolean,number,symbol. console.log(typeof null...

    warkiz 评论0 收藏0
  • JS知识—面试准备(一)

    摘要:使用结束后会重新压扁自己,让自己不是对象。作用用来判断某个对象是否含有指定的自身属性语法参数要检测的对象要检测的属性名称。但是函数作用域外部访问不到函数内部的变量,对象,函数。 1.JS内置类型 分为基本数据类型和Object.基本数据类型有:null,undefined,string,boolean,number,symbol. console.log(typeof null...

    wapeyang 评论0 收藏0
  • JS知识—面试准备(一)

    摘要:使用结束后会重新压扁自己,让自己不是对象。作用用来判断某个对象是否含有指定的自身属性语法参数要检测的对象要检测的属性名称。但是函数作用域外部访问不到函数内部的变量,对象,函数。 1.JS内置类型 分为基本数据类型和Object.基本数据类型有:null,undefined,string,boolean,number,symbol. console.log(typeof null...

    zhangrxiang 评论0 收藏0
  • JS基础】类型转换知多少

    摘要:正确的解释是允许在相等比较中进行强制类型转换,而不允许。参考资料小议下字符串比较大小中的强制类型转换核心概念类型转换对象和方法隐式类型转换小结 开胃菜 先说一个题外话,我在工作中遇到一个问题,需要比较 08:00 和 09:00 的大小,最后我找到三种方法: 在两个字符串前后各拼接相同的年月日和秒,拼成完整的时间格式进行比较: var head = 2016-01-01 var fo...

    AdolphLWQ 评论0 收藏0
  • 原型模式故事链(3)--JS数据类型、以及区别、区分、转化

    摘要:所以不论你妈妈是喊,狗蛋回家吃饭了,还是喊小明回家吃饭了,其实喊的都是你。当然的嘛狗蛋买了件新衣服,小明当然就有这件新衣服了。。。 上一章--原型链讲解:传送门:https://segmentfault.com/a/11... 在上一章讲解原型链时提到了:所有的引用类型都有一个_proto_属性,称之为隐式原型。那么引用类型是什么鬼? 尽量简单的讲解一下javascript中的数据类...

    stdying 评论0 收藏0

发表评论

0条评论

dmlllll

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<