js数据类型及转换规则

繁华落尽
361 阅读6分钟

数据类型的转换让你直接弄懂！

javascript的数据类型有两种基本数据类型和引用数据类型。

基本数据类型

    1. number
    • +/-Infinity Number.MAX_VALUE <= Infinity
    • Number.MAX_VALUE -> 1.7976931348623157e+308
    • Number.MIN_VALUE -> 5e-324
    • Number.MAX_SAFE_INTEGER -> 9007199254740991 最大安全数字
    • Number.MIN_SAFE_INTEGER -> -9007199254740991 最小安全数字
    1. string
    1. boolean
    1. undefined(一个没有被赋值的变量会有个默认值 undefined,声明未定义)
    1. null
    1. Symbol(ES6) 每个从Symbol()返回的symbol值都是唯一的。
//如何赋值及获取值 需要变量取取值和获取值
let once = Symbol() let obj = {}
obj[once] = 100 赋值
obj[once]
// 另一种方式
let symbolKeys = Object.getOwnPropertySymbols(obj);
symbolKeys.forEach(key => {
    console.log(obj[key]);
});
    1. bigInt(ES6)
    • 数字后面加个n即使大数类型 -> 10n BigInt类型

引用数据类型

  1. object(包括普通对象、实例对象、原型对象、正则对象...)
  2. function

js测试数据类型的四种方法(详细的后期更新)

1. typeof

image.png

image.png

image.png

image.png

  • 总结：
    • typeof 基本类型/引用类型 返回结果是一个字符串，字符串中包含了对应的数据类型
    • typeof的结果有：“number”、“string”、“boolean”、“undefined”、“object”、“function”、“symbol”、“bigint”
    • typeof检测未被声明的变量，不会报错，结果是”undefined“
    • typeof null -> "object"
    • typeof 不能细分是啥对象「排除函数对象」，返回结果是 ”object/function“
      • 无法区分各种对象的区别
    • NaN / Infinity 都是数字类型的，检测结果都是“number”
    • 多次typeof的结果都是字符串(如:typeof typeof typeof [])

2. instanceof(用来检测某个实例是否属于这个类)

  • 语法: 实例 instanceof 类(若返回true则表示这个实例属于这个类)
  • instanceof检测机制：验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为TRUE
  • 这种方式可以弥补typeof无法细分对象类型的缺点(想检测这个值是否为数组，只需要看他是否为Array类的实例即可)
  • 基本数据类型的实例无法基于它检测出来(字面量的创建的方式不可检测)
例子
console.log(1 instanceof Number) // false
console.log(new Number(1) instanceof Number) // true

let arr = [10, 20]; 
console.log(typeof arr); //=>"object" 
console.log(arr instanceof Array); //=>true 
console.log(arr instanceof RegExp); //=>false 
console.log(arr instanceof Object); //=>true 无法用这个检测结果判断是否为普通对象

3. constructor

  • 判断当前的实例的constructor的属性值是不是预估的类（利用他的实例数据类型检测）
  • 实例.constructor === 类
  • 不推荐使用，因为js中的constructor是不被保护的(用户可以随意修改),这样基于constructor检测的只存在不确定性(项目中的话一般不会改)
let arr = [], obj = {}, num = 1 
console.log(arr.constructor === Array); //=>true 
console.log(arr.constructor === Object); //=>false 
console.log(obj.constructor === Object); //=>true 
console.log(num.constructor === Number); //=>true

4. Object.prototype.toString.call([value])

  • 使用方法：

    • Object.prototype.toString.call(被检测的实例)
    • ({}).toString.call(被检测的实例)

  • 找到Object.prototype上的toString方法，让toString方法执行，并且基于call让方法中的this指向检测的数据值，这样就可以实现数据类型检测了

  • 原理:

    • 每一种数据类型的构造函数的原型上否有toString方法
    • 除了Object.prototype上的toString是用来返回当前实例所属类的信息（检测数据类型的），其余的都是转换为字符串的(let arr = [1,3] arr.toString())
案例：
// 数字类型中比较奇怪的值
// 1. NaN 不是有效数字，但是属于number类型的
console.log(typeof NaN); //=>"number"
console.log(NaN === NaN); //=>false
Object.is(NaN, NaN) //=>true
// 2. 想检测一个值是否为有效数字  isNaN
console.log(isNaN(10)); //=>false
console.log(isNaN('AA')); //=>在检测的时候，如果当前这个值不是数字类型，先隐式转换为数字类型（Number）然后再检测是否为非有效数字  true

数据类型转换的规则

1.其它类型转化number数据类型

直接转使用的方法(显式转换)

  • Number([value])
  • parseInt/parseFloat([val])

隐式转换

  • isNaN([val]) val默认先转换为数字 在检测是不是有效数
  • 数学运算
  • 在==比较的时候，有些值需要转换为数字再进行比较
  • ...
// 把其他类型转换为字符串，一般都是直接“”包起来，只有{}普通对象调取toString是调取的Object.prototype.toString，不是转换为字符串，而是检测数据类型，返回结果是 "[object Object]"

// 把其他类型转换为数字  Number机制：
console.log(Number(''));  //0
console.log(Number('10')); //10
console.log(Number('10px')); //NaN 只要出现非有效数字字符结果都是NaN
console.log(Number(true)); //1
console.log(Number(false)); //0
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number(Symbol(10))); //报错
console.log(Number(BigInt(10))); //10
// 对象变为数字，应该先valueOf，没有原始值再toString变为字符串，最后把字符串转换为数字

// parseInt机制：从字符串左侧第一个字符开始，查找有效数字字符（遇到非有效数字字符停止查找，不论后面是否还有数字字符，都不再找了），把找到的有效数字字符转换为数字，如果一个都没找到结果就是NaN（parseFloat比他多识别一个小数点）
parseInt("")  //NaN
Number("") //0
isNaN("") //false  //先转换成number为0 0是有效数字
parseInt(null) //parseInt(“null”)  NaN //先变成字符串在查找
Number(null) //0
isNaN(null) //false
parseInt("12px") //12
Number("12px") //NaN
isNaN("12px") //true 
parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)
// 1.6 + 1 + "number"
// 2.6 + "number"  => "2.6number"  在JS中加号左右两边出现字符串，则变为字符串拼接（有特殊性），如果出现对象也会变为字符串拼接（因为原本，应该是把对象转换为数字，但是对象转数字需要先转换为字符串，则+遇到字符串直接变为字符串拼接 1+[]）
isNaN(Number(!!Number(parseInt("0.8"))))
// parseInt("0.8") =>0
// !!0  => false
// Number(false) => 0
// isNaN(0) => false

typeof !parseInt(null) + !isNaN(null)
// parseInt(null) => NaN
// !NaN => true  //boolean(NaN)=>false 取反为true
// typeof true => "boolean"

// isNaN(null) =>false
// !false => true
// =>"boolentrue"
2.转化为字符串

直接转使用的方法

  • toString()
  • String()

隐式转换（一般都是调用其toString）

  • 加号运算的时候，如果某一边出现字符串，则是字符串拼接
  • 把对象转换为数字，需要先toString()转换为字符串，再去转换为数字
  • 基于alert/confirm/prompt/document.write...这些方式输出内容，都是把内容先转换为字符串，然后再输出的
  • ...
3.转布尔类型

直接使用的方法

  • Boolean([val])

通过！转成布尔类型

  • !（转成布尔值取反）
  • !!（!!抵消，直接转成布尔值）

隐式转换

  • 在循环或者条件判断中，条件处理的结果就是布尔类型值
  • ...
4.在‘==’情况下的转换
  • {}=={}：false 对象比较的是堆内存的地址
  • []==[]：false
  • NaN==NaN：false
  • null==undefined：true，但是换成===结果是false（因为类型不一致），剩下null/undefined和其它 任何数据类型值都不相等
  • 字符串==对象 要把对象转换为字符串
  • 剩下如果==两边数据类型不一致，都是需要转换为数字再进行比较
常见的面试题：
let result = 10 + false + undefined + [] + 'Tencent' + null + true + {};//"NaNTencentnulltrue[object Object]"

{}+0//0
0+{}//“0[object Object]”

记得点赞哦！觉得好在点一下关注！一起加油！

avatar
文章
阅读
粉丝