欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS-循环清空对象 && 判断数据类型的5种常用方法

程序员文章站 2022-06-25 09:10:14
应用场景:一个页面具有大量数据录入功能,在数据录入保存成功之后,需要刷新页面,即清空所有的数据。因为我把所有的字段定义到一个对象中,所以要清空这个对象,如果字段少,可以直接赋值清空,但是数据多的时候,直接赋值清空,就会产生大量的冗余代码,导致代码看起来多而乱,不好看,所以要写个函数循环清空(// TODO)。针对我的需求,我可以不用判断数据的类型了,因为我知道它就是一个对象;但是,想兼容更完善的话,首先需要判断要清空的数据类型。JS的数据类型有7种://JS的数据类型有7种:number,...

应用场景:一个页面具有大量数据录入功能,在数据录入保存成功之后,需要刷新页面,即清空所有的数据。因为我把所有的字段定义到一个对象中,所以要清空这个对象,如果字段少,可以直接赋值清空,但是数据多的时候,直接赋值清空,就会产生大量的冗余代码,导致代码看起来多而乱,不好看,所以要写个函数循环清空。

针对我的需求,我可以不用判断数据的类型了,因为我知道它就是一个对象;但是,想兼容更完善的话,首先需要判断要清空的数据类型。

循环清空对象函数:

针对这个函数,可以举一反三,改成符合自己需求的函数。

// 循环清空对象
function clearParams(params){
 if(!(typeof (params) == 'object')) return;
 Object.keys(params).forEach((val,index,arr)=>{
   params[val] = '';
 });
 return params;
}

let params = {toShowroomDate: new Date(),isHours:false,amount:0,receptionMemo:'',marketEventCode:null,marketEventName:''};

// 调用清空函数
clearParams(params);
//{toShowroomDate: '',isHours:'', amount:'',receptionMemo:'',marketEventCode:'',marketEventName:''};

 

JS的数据类型有7种:

//JS的数据类型有7种:

number,string,Boolean,null,undefined,symbol,对象(数组,数组也是对象)

 

判断数据类的几种方法如下:

1.typeof

//typeof返回数据类型,包含这7种:
number、string、boolean、symbol、object、undefined、function

typeof null   返回类型错误,返回object

JS-循环清空对象 && 判断数据类型的5种常用方法

引用类型,除了function返回function类型外,其他均返回object。

其中,null 有属于自己的数据类型 Null , 引用类型中的 数组、日期、正则 也都有属于自己的具体类型,而 typeof 对于这些类型的处理,只返回了处于其原型链最顶端的 Object 类型,没有错,但不是想要的结果。

 

2.instanceof

instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。

 instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性,意思就是该变量通过原型链上能否找到构造函数的prototype 属性,还不清楚原型链的请看原型链

在这里需要特别注意的是:instanceof 检测的是原型(instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型)

JS-循环清空对象 && 判断数据类型的5种常用方法

1.// Array类型的变量满足arr instanceof Array和arr instanceof Object,都返回true
  // 只有Object类型变量才满足obj instanceof Array返回false,obj instanceof Object返回true

 Array.prototype === arr.__proto__
 Object.prototype === arr.__proto__.__proto__


2.//instanceof 后面一定要是对象类型,大小写不能写错,该方法适用于一些条件选择或分支
  ( 浏览器控制台测试:)
 1)new Date() instanceof Date
    //true

 2)[1,2,3] instanceof Array 
    //true

 3)let b;
    b=function s(){};
    b instanceof Function
    // true

 

3.constructor

constructor是原型prototype的一个属性,当函数被定义时候,js引擎会为函数添加原型prototype,并且这个prototype中constructor属性指向函数引用, 因此重写prototype会丢失原来的constructor。

不过这种方法有问题:

1.null 和 undefined 无constructor,这种方法判断不了。

2.如果自定义对象,开发者重写prototype之后,原有的constructor会丢失,因此,为了规范开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。

JS-循环清空对象 && 判断数据类型的5种常用方法

 

4.Object.prototype.toString.call()

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

JS-循环清空对象 && 判断数据类型的5种常用方法

 

5.isNaN()

isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

JS-循环清空对象 && 判断数据类型的5种常用方法

6.jq中判断数据类型的方法

jQuery提供了一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断,返回一个布尔值。


jQuery.isArray();是否为数组
jQuery.isEmptyObject();是否为空对象 (不含可枚举属性)。
jQuery.isFunction():是否为函数
jQuery.isNumberic():是否为数字
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成对象,而不是浏览器原生提供的对象。
jQuery.isWindow(): 是否为window对象;
jQuery.isXMLDoc(): 判断一个DOM节点是否处于XML文档中。

作者:8d2855a6c5d0
链接:https://www.jianshu.com/p/967d6db70437
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

参考文章:

Object.keys()

js判断数据类型

判断一个变量是数组还是对象

判断数据类型的5种方法

本文地址:https://blog.csdn.net/qq_33242126/article/details/107382556