js中的数据类型,类型判断,类型转换,一篇文章带你弄懂

首页 编程分享 PHP丨JAVA丨OTHER 正文

竺梓君 转载 编程分享 2025-03-01 22:14:23

简介 js中的数据类型,类型判断,类型转换,一篇文章带你弄懂,原始类型number string boolean BigInt symbol undefined null,共七种


数据类型

基本数据类型

  • 原始类型number string boolean BigInt symbol undefined null,共七种

其中BigInt和Symbol是es6之后才有的原始数据类型,其中BigInt的使用方法就是在整数后面加字母n,例如let n=2141242352354253452523n,而Symbol类型是使用Symbol()函数来创建一个Symbol来创建一个独一无二的参数

let sym1 = Symbol("foo");
let sym2 = Symbol("foo");

console.log(sym1 === sym2); // 输出: false
console.log(sym1.toString()); // 输出: "Symbol(foo)"
console.log(sym2.toString()); // 输出: "Symbol(foo)"

Symbol()通常接收一个字符串,如果是其它Symbol也会想办法使它往字符串上面转

let sym1 = Symbol(123); // 数字
let sym2 = Symbol({ key: "value" }); // 对象
let sym3 = Symbol([1, 2, 3]); // 数组

console.log(sym1); // 输出: "Symbol(123)"
console.log(sym2); // 输出: "Symbol([object Object])"
console.log(sym3); // 输出: "Symbol(1,2,3)"

引用数据类型

  • 引用数据类型object function array Date Map Set,共六种

其中Map和Set是es6之后才有的方法,引用类型前三个分别代表对象,函数,数组。第四个是用来获取时间的

let date = new Date()
console.log(date)     // 输出:"2025-02-25T10:11:05.664Z"

Map类型是一种特殊的集合,它的key可以是任意的形式,并且键是唯一的,它符合键值对的格式

let map = new Map(); 
map.set('key', 'value'); 
console.log(map.get('key')); // 输出: "value"

Set类型是一种特殊的集合类型,它里面的数据都是唯一的,如果有相同的数据会进行去重操作

let set = new Set([1, 2, 2, 3]); 
console.log(set.size); // 输出: 3 
console.log([...set]); // 输出: [1, 2, 3]

类型判断

typeof

let a; 
console.log(typeof a); // 输出: "undefined"
let b = true; 
console.log(typeof b); // 输出: "boolean"
let c = 42; 
console.log(typeof c); // 输出: "number" 

let d = 3.14; console.log(typeof d); // 输出: "number" 

let e = NaN; console.log(typeof e); // 输出: "number" 

let f = Infinity; console.log(typeof f); // 输出: "number"
let g = "Hello, world!"; 
console.log(typeof g); // 输出: "string"

let h = Symbol("description"); 
console.log(typeof h); // 输出: "symbol"
let obj = {}; 
console.log(typeof obj); // 输出: "object" 

let arr = []; console.log(typeof arr); // 输出: "object" 

function fn() {} console.log(typeof fn); // 输出: "function" 

let date = new Date(); console.log(typeof date); // 输出: "object" 

let regExp = /abc/; console.log(typeof regExp); // 输出: "object"

原理是计算机的二进制,它可以判断除了null以外的所有基本类型,而引用类型和null都会被判断为object,因为二进制判定是不是引用类型是看前三位是000,而null都是0,因此null也会被判定为引用类型。

instanceof

instanceof 不能用于判断基本数据类型,例如 number, string, boolean, null, 和 undefined

let obj = {}; 
console.log(obj instanceof Object); // 输出: true
let arr = [];
console.log(arr instanceof Array); // 输出: true
function foo() {} 
console.log(foo instanceof Function); // 输出: true
let date = new Date(); 
console.log(date instanceof Date); // 输出: true
let arr = [];
console.log(arr instanceof Object); // 输出: true

而其它引用类型均可判断,但是其它引用类型也会被判定为对象,因为它的原理是通过原型链进行查找,我们来写一份自己的myInstanceof。

function myinstanceof(left,right){
    if(typeof(left)!=="object"&&typeof(left)!=="function"||left===null){
        return false
    }
    while(left !== null){
        if(left.__proto__===right.prototype){
            return true;
        }
        left = left.__proto__
    }
    return false
}

object.prototype.toString.call()

object.prototype.toString.call() 方法是利用object原型上的方法去判断类型,其中call()是将this绑定在传入的参数上,然后调用前面的object.prototype.toString方法,最后判断出来的结果格式如下

function getType(value) {
    return Object.prototype.toString.call(value);
}

// 测试各种数据类型
console.log(getType(undefined));   // 输出: [object Undefined]
console.log(getType(null));        // 输出: [object Null]
console.log(getType(true));        // 输出: [object Boolean]
console.log(getType(42));          // 输出: [object Number]
console.log(getType(3.14));        // 输出: [object Number]
console.log(getType(NaN));         // 输出: [object Number]
console.log(getType('hello'));     // 输出: [object String]
console.log(getType(Symbol()));    // 输出: [object Symbol]
console.log(getType(BigInt(9007199254740991))); // 输出: [object BigInt]
console.log(getType([]));          // 输出: [object Array]
console.log(getType({}));          // 输出: [object Object]
console.log(getType(function() {}));// 输出: [object Function]
console.log(getType(new Date()));  // 输出: [object Date]
console.log(getType(new Map()));   // 输出: [object Map]
console.log(getType(new Set()));   // 输出: [object Set]

至于为什么是这种格式,可以看看浏览器Object.prototype.toString()的执行

可以看到Object.prototype.toString()这个方法就是这样设定的格式

类型转换

显示转换

在 JavaScript 中,显示类型转换(也称为强制类型转换)是指通过特定的方法或函数将一种数据类型明确地转换为另一种数据类型。以下是几种常见的显示类型转换及其示例:

字符串转换

// 数字转字符串
let num = 42;
let strNum = String(num);
console.log(strNum, typeof strNum); // 输出: "42" "string"

// 布尔值转字符串
let bool = true;
let strBool = String(bool);
console.log(strBool, typeof strBool); // 输出: "true" "string"

// `null` 和 `undefined` 转字符串
let nullValue = null;
let undefinedValue;
console.log(String(nullValue)); // 输出: "null"
console.log(String(undefinedValue)); // 输出: "undefined"

数字转换

// 字符串转数字
let strNum = "42";
let num = Number(strNum);
console.log(num, typeof num); // 输出: 42 "number"

// 布尔值转数字
let boolTrue = true;
let boolFalse = false;
console.log(Number(boolTrue)); // 输出: 1
console.log(Number(boolFalse)); // 输出: 0

// `null` 和 `undefined` 转数字
let nullValue = null;
let undefinedValue;
console.log(Number(nullValue)); // 输出: 0
console.log(Number(undefinedValue)); // 输出: NaN

布尔转换

let numZero = 0;
let numNonZero = 42;
console.log(Boolean(numZero)); // 输出: false
console.log(Boolean(numNonZero)); // 输出: true

// 空字符串和非空字符串转布尔值
let emptyStr = "";
let nonEmptyStr = "hello";
console.log(Boolean(emptyStr)); // 输出: false
console.log(Boolean(nonEmptyStr)); // 输出: true

// `null` 和 `undefined` 转布尔值
let nullValue = null;
let undefinedValue;
console.log(Boolean(nullValue)); // 输出: false
console.log(Boolean(undefinedValue)); // 输出: false

对象转换

// 基本类型转对象
let num = 42;
let str = "hello";
let bool = true;

let objNum = Object(num);
let objStr = Object(str);
let objBool = Object(bool);

console.log(objNum instanceof Number); // 输出: true
console.log(objStr instanceof String); // 输出: true
console.log(objBool instanceof Boolean); // 输出: true

隐式类型转换

一般都是通过运算符进行转换(+ - * / == != < > ! = >= <= if while),除此以外还有要判断对错要先转换为boolean类型的情况

原始类型转换为原始类型

转字符串 字符串+数字以外的原始类型

转布尔 if和while,三元运算符等判断语句

转数字 数字使用运算符和其它所有原始类型。

原始类型转换为引用类型

原始类型是不会自动去转换为引用类型的,所有原始类型转换为引用类型没有隐式转化

引用类型转换为原始类型

转字符串

let numObj = new Number(42);
console.log('Number is ' + numObj); // 输出: "Number is 42"

let strObj = new String('hello');
console.log('String is ' + strObj); // 输出: "String is hello"

let boolObj = new Boolean(true);
console.log('Boolean is ' + boolObj); // 输出: "Boolean is true"

let date = new Date();
console.log('Date is ' + date); // 输出: "Date is Thu Oct 05 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"

let arr = [1, 2, 3];
console.log('Array is ' + arr); // 输出: "Array is 1,2,3"

let obj = { a: 1, b: 2 };
console.log('Object is ' + obj); // 输出: "Object is [object Object]"
// 普通函数
function myFunction(a, b) {
    return a + b;
}
console.log(myFunction.toString());
// 输出:
// function myFunction(a, b) {
//     return a + b;
// }

除了对象的toString方法会让输入的字符串格式变为 [object Object],其它均是将内容直接转换为字符串。

转布尔 在类型转换的制定规则里就一个,只要是引用类型转为布尔都是true。

转数字

let arr = [1, 2, 3]; 
console.log(+arr); // 输出: NaN (因为 "1,2,3" 不能直接转换为数字) 
let singleElementArr = [42]; 
console.log(+singleElementArr); // 输出: 42 (因为 "42" 可以转换为数字)
let boolObjTrue = new Boolean(true);
console.log(+boolObjTrue); // 输出: 1

let boolObjFalse = new Boolean(false);
console.log(+boolObjFalse); // 输出: 0
let strObjNumber = new String('42');
console.log(+strObjNumber); // 输出: 42

let strObjInvalid = new String('hello');
console.log(+strObjInvalid); // 输出: NaN

引用类型都不能直接转换为数字,需要先将其转换为原始类型,再通过原始类型的转换规则来进行转换,原始类型的转换规则我们已经讲过了,那么我就来看看引用类型需要先转为原始类型的的步骤吧

ToPrimitive;转原始类型会有一个hint期望类型

  • hint 为 "string"

    1. 先调用 toString(),若返回原始值则使用。
    2. 否则调用 valueOf(),若返回原始值则使用。
  • hint 为 "number" 或 "default"

    1. 先调用 valueOf(),若返回原始值则使用。

    2. 否则调用 toString(),若返回原始值则使用。

但是还有一个特殊的

Date 对象

  • Date 对象在 hint 为 "default" 时,视为 "string" ,优先调用 toString()

小结

看完这篇文章,相信你对类型和类型的考察点都有了更深的理解,不过光理解还是不够的,需要多去实践,练习有关类型的题目,下面我来出一个往届的面试题,看看你能否做出来吧

[] == ![]

判断它们是否相等。

转载链接:https://juejin.cn/post/7475740903622983695


Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论




ABOUT ME

Blogger:袅袅牧童 | Arkin

Ido:PHP攻城狮

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云