深入JS(一): 数据类型与检测方法原理

JS数据类型

undefined

  • undefined 的含义是 未被赋值 未被初始化

null

  • 值未知的特殊值。

bigint

  • JS 中,"number" 类型不能安全地表示大于 (253-1) 的整数值(即 9007199254740991),或小于 -(253-1) 的负数。
  • BigInt 可以表示任意长度的整数。
js 复制代码
const bigInt = 1234567890123456789012345678901234567890n;

symbol

  • 创建唯一标识符

常用symbol

js 复制代码
Object.prototype[Symbol.iterator]=function(){
  let arr=Object.values(this)
  return arr[Symbol.iterator]()
}
let [a,b]={a:1,b:2}
console.log(a,b);
//1 2

类型检测

typeof

  • typeof 适合判断基本类型(除 null 外)

typeof原理: 数据在底层都表示为二进制,在Javascript中二进制前(低)三位存储其类型信息

typeof 对于原始类型来说,除了 null 都可以显示正确的类型

js 复制代码
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 用于检测对象的具体实例类型 ,无法判断原始类型

如果有静态方法 Symbol.hasInstance,那就直接调用这个方法:

js 复制代码
let a={}
a[Symbol.hasInstance]=function(arg){
  if(arg=='111'){
    return true
  }
}
console.log('111' instanceof a);//true

如果没有,则检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

js 复制代码
console.log("11" instanceof String); //false
console.log(11 instanceof Number); //false
console.log({} instanceof Object); //true
console.log([] instanceof Array); //true

toString方法

对象的toString()
  • 取得该对象的 [Symbol.toStringTag] 属性值作为 tag,然后返回 "[object " + tag + "]" 形式的字符串。
js 复制代码
let user = {
    [Symbol.toStringTag]: "User"
  };
console.log(Object.prototype.toString.call(user));  
//[object User]
js 复制代码
console.log(Object.prototype.toString({}));//[object Object]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call('11'));//[object String]

为啥需要调用call

直接调用数组和字符串实例的toString方法可能会受到原型上toString方法被覆盖的影响。而使用Object.prototype.toString.call()确保了调用的是最原始、未被修改的toString方法,提高了代码的稳定性和可靠性。

数组的toString()
js 复制代码
console.log([1, 2, 3].toString()); // 正常输出:"1,2,3"
其他的toString()
js 复制代码
//Number
let num = 123;
console.log(num.toString()); // 输出 "123"

//String
let str = "Hello";
console.log(str.toString()); // 输出 "Hello"

//Boolean
console.log(true.toString()); // 输出 "true"
console.log(false.toString()); // 输出 "false"

//函数function
let func = function() { return "Hello"; };
console.log(func.toString()); // 输出 "function (){ return "Hello"; }"

Array.isArray()

Array.isArray()的判断逻辑:

  • 在JS中,每个对象都有一个内部属性 [[Class]],它是一个字符串,描述了对象的具体类型(如 "Array""Date""RegExp" 等)。
  • 使用 Object.prototype.toString.call() 判断
相关推荐
郝学胜-神的一滴17 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒1 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god001 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划2 小时前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控
努力学习的少女2 小时前
SpaekSql函数
前端·数据库