再也不用担心 JavaScript 的数据类型转换了

更新日期: 2019-03-11阅读: 2.2k标签: 类型
JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型,在程序运行时,类型会被自动确定,你也可以使用同一个变量保存不同类型的数据


数据类型

原始类型

在 JS 中一共 6 种原始类型:

  • string
  • number
  • boolean
  • undefined
  • null
  • symbol (ECMAScript 6)

对象类型

除了原始类型其他的都是对象类型(object)了。

内存空间

在 JS 中,每一个数据都需要存放在内存空间中。

原始类型数据直接存储在 栈内存(stack) 中,对象数据存储在 堆内存(heap) 中,并在 栈内存 中存放了该对象数据在 堆内存地址(引用)

var a1 = 0  // 栈
var a2 = 'this is string'  // 栈
var a3 = null  // 栈

var b = { m: 20 }  // 堆
var c = [1,2,3]  // 堆


typeof 与 instanceof

typeof 是否能正确判断类型?instanceof 能正确判断对象的原理是什么?

typeof

typeof 运算符返回一个字符串,表示未经计算的操作数的类型。
  • 对于原始类型,除了 null 类型都显示正确类型。
typeof '1'  // 'string'
typeof true // 'boolean'
typeof 1    // 'number'
typeof undefined  // 'undefined'
typeof Symbol()  // 'symbol'

typeof null // 'object' 这是一个 Bug 

typeof 1 === 'number'  // true
typeof (typeof 1) === 'string'  // true
  • 对于对象来说,除了函数都会显示 object 。
typeof []   // 'object'
typeof {}   // 'object'
typeof console.log  // `function`

instanceof

instanceof 运算符返回一个布尔值,用于测试构造函数的 prototype 属性是否存在于对象原型链上。所以在判断对象的正确类型时可以考虑使用 instanceof 。
// 定义构造函数
function A() {}
function B() {}

var a = new A()
var b = new B()

a instanceof A  // true ,因为 Object.getPrototypeOf(a) === a.prototype

a instanceof B  // false ,B.prototype 不在 a 的原型链上


类型转换

任意数据类型之间可以相互转换,但是 symbol 特殊。symbol 类型只能转换成 string 类型,其他的转换会报错。

强制转换

Number()

  • 原始类型 ---> 数字
// 1. 字符串 ---> 数字
  
    // 1) 可以被解析成数值的字符串 返回 数值
    Number('123')  // 123
    // 2) 不能解析成数值的字符串 返回 NaN
    Number('123aaa')  // NaN
    // 3) 空串 ---> 0
    Number('')  // 0

// 2. 布尔值 ---> 数字

    // 1) true ---> 1
    Number(true)  // 1
    // 2) false ---> 0
    Number(false)  // 0

// 3. undefined ---> NaN
    Number(undefined)  // NaN
    
// 4. null ---> 0
Number(null)  // 0

浏览器环境中,window.parseInt() 和 window.parseFloat() 可以将一些字符串转换成数字,但没 Number() 严格 。把其他原始类型都会转换成 NaN 。

parseInt('123aaa')  // 123
parseFloat('1.23aaa')  // 1.23
parseInt(true)  // NaN
  • 对象 ---> 数字

Number() 方法的参数是对象时,一般情况下,除非是包含单个数字的数组会返回数字,否则返回 NaN 。

Number({a: 1})  // NaN
Number([1,2])   // NaN
Number([1])     // 1

在执行 Number(对象) 方法时,会先进行参数处理,将对象转换成原始类型,再进行转换成数字的操作。

  1. 第一步,调用对象自身的 valueOf() 方法( var a = new String(123); a.valueOf() --> '123' )。如果返回的值是原始类型,则直接将该值转换成数字并返回。不再进行后续步骤。
  2. 第二步,如果 valueOf() 方法返回的是对象,则调用原对象自身的 toString() 方法,如果此时返回的值是原始类型,则将该值转换成数字并返回,不再进行后续操作。
  3. 如果 toString() 方法返回的还是对象,就报错。
Number({a: 1})  // NaN
// 过程如下:
var t = {a: 1}
// 第一步
t.valueOf()  // {a: 1}
// 第二步
t.toString() // '[object Object]'
Number('[object Object]')  // NaN
    
Number([1,2])
//过程如下:
// 第一步
[1,2].valueOf()   // [1,2]
// 第二步
[1].toString()  // '1,2'
Number('1,2')     // NaN
    
// 再来看看参数是单个数字的数组时的情况
    
Number([1])  // 1
    
//过程如下:
// 第一步
[1].valueOf()   // [1]
// 第二步
[1].toString()  // '1'
Number('1')     // 1

String()

String() 函数可以将任意类型的值转换成字符串。
  • 原始类型 ---> 字符串
var a = Symbol({})
String(a)  // 'Symbol([object Object])'

String(Symbol([]))  // 'Symbol()'
  • 对象 ---> 字符串

数组会返回该数组的字符串形式,函数返回完整函数的字符串,其他的返回一个类型字符串。

String([1,2])  // '1,2'
String([])  // ''

function foo(x){ return x*x }
String(foo)  //  'function foo(x){ return x*x }'

String({a: 1})  // '[object Object]'

String(对象) 方法的转换规则与 Number(对象) 基本相同,只是互换了 valueOf() 与 toString() 的执行顺序。

  1. 先调用对象的 toString() 方法。如果返回的值是原始类型,则将该值转换成字符串并返回。不再执行以下步骤。
  2. 如果 toString() 返回的是对象,则调用原对象的 valueOf() 方法。如果返回的值是原始类型,将该值转换成字符串并返回。不再执行后续操作。
  3. 如果 valueOf() 方法返回的还是对象,就报错。

自定义对象的 toString() 方法和 valueOf() 方法:


var obj = {
    valueOf: function() {
        return 1
    },
    toString: function() {
        return 2
    }
}

String(obj)  // '2'
Number(obj)  // 1

Boolean()

Boolean() 函数可以将任意类型转换成布尔值
除了以下五个值转换结果为 false ,其他值全部转换为 true
  • undefined
  • null
  • '' (空字符串)
  • -0 或 0
  • NaN
!!数据 与 Boolean(数据) 效果一样。
Boolean(undefined)  // false
Boolean(null)  // false
Boolean('')  // false
Boolean(0)  // false
Boolean(NaN)  // false

! NaN  // true
!! NaN  // false


自动转换

自动转换就是没有显式地使用函数对数据进行类型转换。但它是以强制转换为基础的。

当预期数值与实际数值不匹配时,JavaScript 就会自动调用预期类型的转换函数对实际值进行转换。

进行算术运算

  • 运算子都是原始类型

    • 在加法运算中 只要一方时字符串,另一方就会转换成字符串。这是字符串拼接。
    • 其他 - * / ** % ++ -- +(一元运算符 表示正数) -(一元运算符 表负数) 都会将运算子转换成数字。
1 + '1'  // '11'
2 * '3'  // 6
1 - 'a'  // NaN  
3 + - '1'  // 2
  • 运算子是对象

会先把对象转换成原始类型再按预期值转换。具体方法是:先调用对象的 valueOf() 方法试图将对象转换成原始类型,如果返回的是对象,就再调用原对象的 toString() 方法,如果返回的还是对象就报错。

var obj = {
    valueOf: function() {
        return '1'
    },
    toString: function() {
        return '10'
    }
}

10 - obj  // 9

1 + [1,2]  // '11,2'
// [1,2].toString() ---> '1,2'

进行比较运算

  • === 和 !== 不会发生类型转换,只要类型不同就返回 false.
  • 两边同时为字符串会比较 Unicode 码,否则都会转换成数字进行比较(null、undefined 除外)。
  • NaN 与任意值(包括本身NaN)比较都返回 false
  • null undefined 除了 null(undefined) == undefined(null) 返回 true,其他 > < == 有 null 或 undefined 参与的都返回 false 。
'abc' > 'abd'  // false
true > false  // true  ---> Number(true) > Number(false)
true > '-1'  // true  ---> Number(true) > Number('-1')

var obj = {valueOf: function() {return '1'}}
[3] > obj  // true
// 过程如下:
// Number([3]) > Number(obj)
// Number('3') > Number('1')
// 3 > 1

0 == null  // false

== 常用于判断函数的参数是否等于 null 或者 undefined ,因为 null == undefinded 返回 true

function fun(x) {
    if(x == null) {···}
} 

逻辑运算

  • !参数
  • 参数&&
  • 参数||
  • 参数? :(三元运算符)
  • if(参数)

都会将非布尔的参数转换成布尔类型(使用 Boolean(参数) 函数)。


阅读原文

链接: https://fly63.com/article/detial/2305

JS中Null与Undefined的区别

在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

Javascript的类型检测

主要介绍了JS中检测数据类型的几种方式,typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回\'object\',有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符

js类型转换的各种玩法

对于object和number、string、boolean之间的转换关系,ToPrimitive是指转换为js内部的原始值,如果是非原始值则转为原始值,调用valueOf()和toString()来实现。

JavaScript类型:关于类型,有哪些你不知道的细节?

Undefined类型表示未定义,它的类型只有一个值为undefined。undefined和null有一定的表意差别。非整数的Number类型无法使用 == 或 === 来比较,因为 JS 是弱类型语言,所以类型转换发生非常频繁

为你的 JavaScript 项目添加智能提示和类型检查

近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等功能,帮助其正确并且快速完成编码。

js的类型

基本类型:按值访问,可以操作保存在变量中实际的值;引用类型数据存在堆内存,而引用存在栈区,也就是说引用类型同时保存在栈区和堆区,关于==的执行机制,ECMASript有规范,因为==前后的值交换顺序,返回的值也是一样的,所以在此对规范做出如下总结

JavaScript基础之值传递和引用传递

js的值传递和引用(地址)传递:js的5种基本数据类型 number,string,null,undefined,boolean 在赋值传递时是值传递,js的引用数据类型(object,array,function)进行引用传递,其实底层都是对象。

JS中的布尔 数字 字符串

JS中所有的值都可以转换成布尔类型 使用Boolean()或者 !!(两个感叹号),JS中所有的值都可以转换成数字类型,使用Number()或+。数字类型转换场景目的只有一个,用于计算,将后台传递的数据,从字符串转换为数字并参与计算

if条件中,js的强制类型转换

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

Symbol 类型

根据规范,对象的属性键只能是 String 类型或者 Symbol 类型。不是 Number,也不是 Boolean,只有 String 或 Symbol 这两种类型。到目前为止,我们只见过 String。现在我们来看看 Symbol 能给我们带来什么好处。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!