JavaScript 中的数据类型、检测方法、转换方法

程序员文章站 2022-06-05 08:05:15

...

JavaScript 中的数据类型、检测方法、转换方法

文章目录

JavaScript 中的数据类型、检测方法、转换方法

JavaScript 的数据类型

基本类型（值类型，原始类型，简单类型）:
- 基础类型存储在 栈内存，被引用或拷贝时，会创建一个完全相等的变量
- undefined , null , Boolean, String, Number, Symbol, BigInt,
引用类型（对象类型，复杂类型）:
- 引用类型存储在 堆内存，存储的是地址，多个引用指向同一个地址
- Object, Array, RegExp, Date, Math, Function

数据类型检测

JavaScript 中数据类型检测方法有 typeof 运算符 , instanceof 运算符,
以及 object 原型中的 toString 方法

typeof

typeof 运算符可以检测除了 null 以外的 原始类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

instanceof

通过 instanceof 可以判断这个对象是否是之前哪个构造函数生成的对象（或实例）
这样就基本可以判断出这个新对象的数据类型

[] instanceof Array; // true
[] instanceof Object; // true
// Array 继承 Object 返回 true

let Car = function() {}
let benz = new Car()
benz instanceof Car // true
benz instanceof Object // true
//  构造函数 Car 继承 Object ，返回 true

let car = new String('Mercedes Benz')
car instanceof String // true
car instanceof Object // true
// 通过 new 关键词创建的字符串，继承自 Object

let str = 'javascript'
str instanceof String // false
// 字面量创建的 字符串不是 String 的实例

实现一个 instanceof 方法

function myInstanceof(left, right) {
  // 这里先用typeof来判断基础数据类型，如果是，直接返回false
  if(typeof left !== 'object' || left === null) return false;
  // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
  let proto = Object.getPrototypeOf(left);
  while(true) {                  
    	// 循环往下寻找，直到找到相同的原型对象
    	if(proto === null) return false;
    	// 找到相同原型对象，返回true
    	if(proto === right.prototype) return true;
    	proto = Object.getPrototypeof(proto);
    }
}
console.log(myInstanceof(new Number(123), Number));    // true
console.log(myInstanceof(123, Number));                // false

Object.prototype.toString

toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串
其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；
而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。

Object.prototype.toString({});       // "[object Object]"
Object.prototype.toString.call({});  // "[object Object]"

Object.prototype.toString.call(1);    // "[object Number]"
Object.prototype.toString.call('1');  // "[object String]"
Object.prototype.toString.call(true);  // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"

Object.prototype.toString.call(function(){});  // "[object Function]"
Object.prototype.toString.call(null);   // "[object Null]"

Object.prototype.toString.call(/123/g);   // "[object RegExp]"
Object.prototype.toString.call(new Date()); // "[object Date]"
Object.prototype.toString.call([]);       // "[object Array]"

Object.prototype.toString.call(document);  // "[object HTMLDocument]"
Object.prototype.toString.call(window);   // "[object Window]"

实现一个全局通用的数据类型判断方法:

function getType(obj){
  let type  = typeof obj;
  // 先进行 typeof 判断，如果是基础数据类型，直接返回
  if (type !== "object") {    
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
   // 注意正则中间有个空格
}

getType([])     // "Array" 
getType('123')  // "string" 
getType(window) // "Window" 
getType(null)   // "Null"首字母大写，typeof null是object，需toString来判断
getType(undefined)   // "undefined" 

getType(function(){}) // "function"
getType(/123/g)      //"RegExp" toString返回

数据类型转换

JavaScript 数据类型转换除了强制转换，还有自动的 隐式转换

强制类型转换

强制类型转换方式包括： Number()、parseInt()、parseFloat()、toString()、String()、Boolean()

Number() 方法的强制转换规则：

如果是布尔值，true 和 false 分别被转换为 1 和 0；
如果是数字，返回自身；
如果是 null，返回 0；
如果是 undefined，返回 NaN；
如果是字符串，遵循以下规则：
- 如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；
- 字符串中包含有效的浮点格式，将其转换为浮点数值；
- 空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN；
如果是 Symbol，抛出错误；
如果是对象
- 并且部署了 [Symbol.toPrimitive] ，那么调用此方法
- 否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；
- 如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值

Number(true);        // 1
Number(false);       // 0
Number('0111');      //111
Number(null);        //0
Number('');          //0
Number('1a');        //NaN
Number(-0X11);       //-17
Number('0X11')       //17

Boolean() 方法的强制转换规则:

除了 undefined、 null、 false、 ‘’、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true

Boolean(0)          //false
Boolean(null)       //false
Boolean(undefined)  //false
Boolean(NaN)        //false
Boolean(1)          //true
Boolean(13)         //true
Boolean('12')       //true

隐式类型转换

会发生隐式类型转换的情况：

逻辑运算符 (&&、 ||、 !)
运算符 (+、-、*、/)
关系操作符 (>、 <、 <= 、>=)
相等运算符 (==)
if / while 条件的操作

’==’ 的隐式类型转换规则

如果类型相同，无须进行类型转换；
如果其中一个操作值是 null 或者 undefined，
那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
如果其中一个是 Symbol 类型，那么返回 false；
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
如果一个操作值是 boolean，那么转换成 number；
如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。

null == undefined       // true  规则2
null == 0               // false 规则2
'' == null              // false 规则2
'' == 0                 // true  规则4 字符串转隐式转换成Number之后再对比
'123' == 123            // true  规则4 字符串转隐式转换成Number之后再对比
0 == false              // true  e规则 布尔型隐式转换成Number之后再对比
1 == true               // true  e规则 布尔型隐式转换成Number之后再对比
var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};
// 注意这里a又可以等于1、2、3
console.log(a == 1 && a == 2 && a ==3);  //true f规则 Object隐式转换
// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，
// 因为value已经加上去了，这里需要注意一下

’+’ 的隐式类型转换规则

‘+’ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接
仅当 ‘+’ 号两边都是数字时，进行的是加法运算；
如果两边都是字符串，则直接拼接，无须进行隐式类型转换
特殊的规则:
- 如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级，然后再进行拼接
- 如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。
- 如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。

1 + 2        // 3  常规情况
'1' + '2'    // '12' 常规情况

// 特殊情况
'1' + undefined   // "1undefined" 规则1，undefined转换字符串
'1' + null        // "1null" 规则1，null转换字符串
'1' + true        // "1true" 规则1，true转换字符串
'1' + 1n          // '11' 比较特殊字符串和BigInt相加，BigInt转换为字符串
1 + undefined     // NaN  规则2，undefined转换数字相加NaN
1 + null          // 1    规则2，null转换为0
1 + true          // 2    规则2，true转换为1，二者相加为2
1 + 1n            // 错误  不能把BigInt和Number类型直接混合相加

Object 的转换规则

对象转换的规则，会先调用内置的 [ToPrimitive] 函数，其规则逻辑如下：

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；
调用 valueOf()，如果转换为基础类型，则返回；
调用 toString()，如果转换为基础类型，则返回；
如果都没有返回基础类型，会报错

var obj = {
  value: 1,
  valueOf () { return 2; },
  toString () { return '3' },
  [Symbol.toPrimitive] () { return 4 }
}
console.log(obj + 1); // 输出 5
/*
	因为有Symbol.toPrimitive，就优先执行这个；
	如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；
	如果valueOf也去掉，则调用toString返回'31'(字符串拼接)
*/

10 + {}
/*
"10[object Object]"，
注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，
于是和10进行'+'运算，按照字符串拼接规则来，参考'+'的规则C
*/

[1,2,undefined,4,5] + 10
/*
"1,2,,4,510"，
注意[1,2,undefined,4,5]会默认先调用 valueOf 结果还是这个数组，
不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，
还是按照字符串拼接规则，参考'+'的第3条规则
*/

JavaScript 中的数据类型、检测方法、转换方法

JavaScript 中的数据类型、检测方法、转换方法

文章目录

JavaScript 的数据类型

数据类型检测

typeof

instanceof

Object.prototype.toString

数据类型转换

强制类型转换

隐式类型转换

Python中实现字符串类型与字典类型相互转换的方法

JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

JavaScript中判断为整数的多种方式及保留两位小数的方法

使用JavaScript实现node.js中的path.join方法

Javascript中字符串和数字的操作方法整理

javascript中的方法重载浅谈（代码）

CAD中将图形从布局转换到模型中的方法

JavaScript测试数据类型的三种方法

在JavaScript应用中实现延迟加载的方法

Javascript中类式继承和原型式继承的实现方法和区别之处