JS 基础篇(二) 检测对象类型

news/2024/7/19 14:09:33 标签: javascript, object, js, dom, prototype

前言
Javascript 数据类型分为两类:基本类型和引用类型
ES5 :Number String Null Undefined Boolean 和 Object
ES6 :新增了一个Symbol数据类型
此外,还有一个BigInt可能成为第八种数据类型,bigint 用来表示比2^53 -1更大的数
关于 Symbol和BIgInt 两位新成员 后续整理。

  1. instanceof
    js">let a = [];
    a instanceof Array; //true
    a.instanceof Object //true
    let b = {};
    b instanceof Array; //false
    b instanceof Object; //true
    
    let c = function(){}
    c instanceof Array; //false
    c instanceof Object; //false
    c instanceof Function; // true
    
    注意
    prototype属性是可以修改的,所以并不是最初判断为true就一定永远为真。
    其次,当我们的脚本拥有多个全局环境,例如html中拥有多个iframe对象, instanceof的验证结果可能不会符合预期,例如:
    js">//为body创建并添加一个iframe对象
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    //取得iframe对象的构造数组方法
    xArray = window.frames[0].Array;
    //通过构造函数获取一个实例
    var arr = new xArray(1,2,3); 
    arr instanceof Array;//false
    
    解释
    导致这种问题是因为iframe会产生新的全局环境,它也会拥有自己的Array.prototype属性,让不同环境下的属性相同很明显是不安全的做法,所以Array.prototype !== window.frames[0].Array.prototype,想要arr instanceof Array为true,你得保证arr是由原始Array构造函数创建时才可行。
  2. constructor
    js">let arr = [1,3,4];
    let obj = {}
    let fn = function(){}
    arr.constructor === Array;//true
    obj.constructor === Object;//ture
    fn.constructor === Function;//true
    
    注意
    这种判断也会存在多个全局环境的问题,导致的问题与instanceof相同。
  3. Object.prototype.toString.call()
    js">let arr = [1,2,3]
    Object.prototype.toString.call(arr) === '[object Array]';//true
    let obj = {}
    Object.prototype.toString.call(obj) === '[object Object]';//true
    let fn = function(){}
    Object.prototype.toString.call(fn) === '[object Function]' ;//true
    
  4. Array.isArray()
    js">let arr = [1,2,3]
    Array.isArray(arr); //true
    
  5. 完成版
js">if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}
js">function judgeType (obj) {
 if (typeof obj === 'undefined') {
   return 'Undefined'
 }
 if (obj === null) {
   return 'Null'
 }
 if (typeof obj === 'boolean') {
   return 'Boolean'
 }
 if (typeof obj === 'string') {
   return 'String'
 }
 if (typeof obj === 'number') {
   return 'Number'
 }
 if (!Array.isArray) {
     if (Object.prototype.toString.call(obj) === '[Object Array]') {
       return 'Array'
     }
 } else {
   if (Array.isArray(obj)) {
     return 'Array'
   }
 }
 return 'Object'
}
let num = 1
console.log(judgeType(num));
let bool = true
console.log(judgeType(bool));
let str = 'kk'
console.log(judgeType(str));
let empty = null
console.log(judgeType(empty));
let arr = []
console.log(judgeType(arr));
let obj = {}
console.log(judgeType(obj));

http://www.niftyadmin.cn/n/1852553.html

相关文章

Jmeter中主要管理器功用

不管是在使用jmeter进行性能测试还是接口自动化测试时经常用到各种管理器进行对参数的处理,但是有时候分不清几种管理器的具体用法,所以做个笔记,列一下吧(所列内容基于版本为3.2) 主要内容包含以下: 1、HT…

JS 基础篇(四) 原型与原型链

原型与原型链 1.js的无中生有。 js本源是null,js说要有神,通过万能术__proto__创造了No.1 神2.以No.1创造对象 js说 你要有自己的想法,于是,No.1以自己为原型创造了Object 可以理解为 Object.prototype No.1 我们把 prototype …

在磨砺中成长:请学会调整自己的情绪

突然想到写这个话题,绝非偶然。再过几个月,又到了七月份了,掐指一算,也没算清楚到底是进第几批新人了。(我在一个国家科研单位,每年都有不定期的招人)每年看着一张张新面孔进来的时候&#xff0…

feed

a1tf.placeholder(tf.float32) # 占位符 a2tf.placeholder(tf.float32)rtf.multiply(a1,a2) with tf.Session() as sess:   asess.run(r,feed_dict{a1:22,a2:3}) # 在这里赋上数值,先feed进去,然后实际run一下   print(a) atf.placeholder(tf.i…

JS 基础篇(五) 继承方法总结

原型链继承 code function Parent() {this.cars [Lamborghini,Maserati,Bentley];}Parent.prototype.showCars function () {// console.log(this.cars);};function Child() {}Child.prototype new Parent();// let parent new Parent()// parent.cars.push(QQ)// console…

关于this的全面解析(call,apply,new)

我们在写代码的时候,时常会被this弄的傻傻分不清楚,看源码的时候也经常被call啊apply啊弄的头皮发麻。this到底是什么?本文主要根据书上和实际应用做了一些归纳。一般情况下this有4种绑定规则: 1、默认绑定 - this指向全局变量 举…

RedHat Linux 9.0的安装(详细图解安装过程)

RedHat Linux版本:" b, t) b) b# }, t# z- fC& S$ x0 }) GRedHat Linux是目前世界上使用最多的Linux操作系统。因为它具备最好的图形界面,无论是安装、配置还是使用都十分方便,而且运行稳定,因此不论是新手还是老玩家都对它有很高的…

JS 基础篇(七) 函数柯理化

函数柯理化 定义 在计算机科学中&#xff0c;柯里化&#xff08;Currying&#xff09;是把接受多个参数的函数变换成 接受一个单一参数(最初函数的第一个参数)的函数&#xff0c; 并且返回接受余下的参数且返回结果的新函数的技术个人理解&#xff1a; sum(1,2,3) <> …