资讯专栏INFORMATION COLUMN

数据类型转换,普通类型(原始对象)和对象的区别的一些知识点

y1chuan / 2792人阅读

摘要:类型的和是,空字符串也是,所有的对象都是即使是空对象也是。六普通类型原始对象和包装对象的转换某些场合,原始类型的值会自动当作包装对象调用,即调用包装对象的属性和方法。第三重新给变量赋值且值是对象类型,此时会在堆内存保存的值。

一、数据类型转换:
JS是一门动态类型的语言,变量数据类型没有限制,可以随时赋值,但是运算时是对数据类型有要求的,如果运算类型不符,js会自动强制转换类型后再进行计算。
"2"-1

"2"是string类型1是number类型,两个数据类型不同,但是进行了减法运算,运算前js会自动尝试将string类型转为number类型后再进行运算。

二、任意值转字符串:
js提供了以下API进行转换,String(?),?.toString()

var a0 = 0;
var a1 =true;
var a2 = undefined;
var a3 = null;
var a4 = {};

String(a0)
"0"
String(a1)
"true"
String(a2)
"undefined"
String(a3)
"null"
String(a4)
"[object Object]"

a0.toString()
"0"
a1.toString()
"true"
a2.toString()
VM308:1 Uncaught TypeError: Cannot read property "toString" of undefined
    at :1:4
(anonymous) @ VM308:1
a3.toString()
VM315:1 Uncaught TypeError: Cannot read property "toString" of null
    at :1:4
(anonymous) @ VM315:1
a4.toString()
"[object Object]"

通过上述代码可以发现,null,和undefined可以用String但是不能用toString,因为他们没有toString()方法。

var a0 = 0 + "";
var a1 = true + "";
var a2 = undefined + "";
var a3 = null + "";
var a4 = {} + "";
undefined
a0
"0"
a1
"true"
a2
"undefined"
a3
"null"
a4
"[object Object]"

也可以通过加一个空字符串来转成字符串类型,该方法核心在于加号,加号如果发现左右两边任意有字符串,就会尝试将另外一边也转成字符串。

三、任意值转布尔值:
js提供了以下Boolean()方法进行转换,还可以通过!!取反两次进行转换

var a0 = 0;
var a1 = true;
var a2 = undefined;
var a3 = null;
var a4 = {};
undefined
Boolean(a0)
false
Boolean(a1)
true
Boolean(a2)
false
Boolean(a3)
false
Boolean(a4)
true
!!a0
false
!!a1
true
!!a2
false
!!a3
false
!!a4
true

所有的数据类型中,有5种特殊值是false。number类型的0和NaN是false,空字符串‘’也是false,所有的对象都是true即使是空对象也是。
5个falsy值

var a = 0
var a1 = NaN
Boolean(a)
false
Boolean(a1)
false

var a2 = ""
Boolean(a2)
false

var a3 = null
Boolean(a3)
false

var a4 = undefined
Boolean(a4)
false


四、任意值转数值:
js提供了以下API进行转换,
1、Number():
Number()方法会对字符串进行转换,如可以转换成number类型则转为对应的数值,如果不能则返回NaN。

// 空字符串转为0
Number("") // 0

// 布尔值:true 转成 1,false 转成 0
Number(true) // 1
Number(false) // 0

// undefined:转成 NaN
Number(undefined) // NaN

// null:转成0
Number(null) // 0

// 字符串:如果不可以被解析为数值,返回 NaN
Number("324abc") // NaN

2、parseInt(string, radix),parseFloat(),parseFloat一般用来转浮点数
string要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。radix一个介于2和36之间的整数(数学系统的基础),表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时,不同的实现会产生不同的结果,通常将值默认为10。

Number()函数将字符串转为数值,要比parseInt()和parseFloat()函数严格很多。Number()只要有一个字符无法转成数值,整个字符串就会被转为NaN,而parseInt()和parseFloat()会尝试将字符串前面的数字转成数字。如果要转的字符串第一位就无法转换则返回NaN

var a = "123abc"
Number(a)//字符串a,Number直接返回NaN
NaN

parseInt(a,10)//字符串a,parseInt则将字符串前面的123转成数字
123

parseFloat(a)
123

var a = "abc123"
parseInt(a,10)
NaN
parseFloat(a)
NaN


除了使用parseInt(string, radix),parseFloat(),一般多使用【-0】和【+0】方法进行转换
"1"-0
1

"1.21"-0
1.21

"-1"-0
-1

"-1.21"-0
-1.21

五、普通类型和包装对象:
1、所谓“包装对象”,指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原始对象。这三个原始对象可以把原始类型的值变成(包装成)对象。

var a = new Number(123);
var b = new String("abc");
var c = new Boolean(true);

var a1 = 123;
var b1 = "abc";
var c1 = true;

当带有new操作符时,是当作对象并且JS提供了一些方法,不带new声明是,值直接是存在栈内存,带new操作符时当对象是存在堆内存。通过下面代码可以看到,通过new声明提供了很多方法。

var a = "a"
var b = new String("b")

console.log(a)
a


console.log(b)
String {"b"}....

六、普通类型(原始对象)和包装对象的转换:
某些场合,原始类型的值会自动当作包装对象调用,即调用包装对象的属性和方法。这时,JavaScript 引擎会自动将原始类型的值转为包装对象实例,并在使用后立刻销毁实

var a = "abc"
//声明一个普通字符串类型(原始对象),其本身并没有length属性
a.length    
//调用a.length时JS引擎会自动将var a = "abc"转成var a = new String(a)
3
a.name = "zhang"
"zhang"
//a转为包装对象后加了一个name属性
a.name 
//但是a.name却返回undefined,这是因为原始类型的值转为包装对象使用后立刻销毁
undefined

七、关于内存的一些知识点:
在js普通(简单)数据类型,存到栈内存,复杂类型存到堆内存,string两者都可以存。


栈内存和堆内存数据组织形式不同。

示例解析:
第一:a是一个对象,栈内存地址假设是addr1,值保存在堆内存。
第二:声明变量b等于变量a,则变量b也是一个对象,因为b=a,所以栈内存b的地址也
是addr1,并且堆内存不会重复保存b的值。
第三:重新给变量b赋值且值是对象类型,此时会在堆内存保存b的值。
结果:a.name返回的是a,因为b第二次赋值时在堆内存已经保存了它的值,a和b在堆内存有各自的值互不影响。

示例解析:
第一:a是一个对象,栈内存地址假设是addr1,值保存在堆内存。
第二:声明变量b等于变量a,则变量b也是一个对象,因为b=a,所以栈内存b的地址也是addr1,堆内存不重复保存b的值。
第三:变量a和b两个栈内存地址是相同的,都指向堆内存的地址addr1,此时修改a.name或者b.name都会将堆内存数据覆盖。
结果:a.name返回的是b,因为b.name已经修改了堆内存内保存的数据

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

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

相关文章

  • 【面试篇】寒冬求职季之你必须要懂原生JS(上)

    摘要:只能遍历数组,不能中断,返回值是修改后的数组。这在语法上,称为暂时性死区。作用域链无论是还是查询,都会在当前的作用域开始查找,如果没有找到,就会向上级作用域继续查找目标标识符,每次上升一个作用域,一直到全局作用域为止。 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了裁员措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包,this,原...

    宠来也 评论0 收藏0
  • 前端总结

    摘要:是一个双目运算符内部实现机制是通过原型链来判断能自定义行为的东西三类型转换转除了其他所有值都转为包括所有对象对象转原始类型对象在转换类型的时候,会调用内置的函数该方法在转原始类型时调用优先级最高。 JS基础知识 (一)JS中原始类型(1)原始值有六种:boolean,null,undefined,number,string,symbol(2)原始类型存储的都是值,没有函数可以调用,能够...

    Jenny_Tong 评论0 收藏0
  • 前端总结

    摘要:是一个双目运算符内部实现机制是通过原型链来判断能自定义行为的东西三类型转换转除了其他所有值都转为包括所有对象对象转原始类型对象在转换类型的时候,会调用内置的函数该方法在转原始类型时调用优先级最高。 JS基础知识 (一)JS中原始类型(1)原始值有六种:boolean,null,undefined,number,string,symbol(2)原始类型存储的都是值,没有函数可以调用,能够...

    bladefury 评论0 收藏0
  • 前端总结

    摘要:是一个双目运算符内部实现机制是通过原型链来判断能自定义行为的东西三类型转换转除了其他所有值都转为包括所有对象对象转原始类型对象在转换类型的时候,会调用内置的函数该方法在转原始类型时调用优先级最高。 JS基础知识 (一)JS中原始类型(1)原始值有六种:boolean,null,undefined,number,string,symbol(2)原始类型存储的都是值,没有函数可以调用,能够...

    Zoom 评论0 收藏0
  • js面试题(上)

    https://segmentfault.com/a/11... 原型 / 构造函数 / 实例 对原型的理解 我们知道在es6之前,js没有类和继承的概念,js是通过原型来实现继承的。在js中一个构造函数默认自带有一个prototype属性, 这个的属性值是一个对象,同时这个prototype对象自带有一个constructor属性,这个属性指向这个构造函数,同时每一个实例 都有一个__proto...

    leap_frog 评论0 收藏0

发表评论

0条评论

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