时间:2023-02-19 10:52:38 | 栏目:JavaScript代码 | 点击:次
在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型
基础数据类型和引用数据类型的区别,在之前深拷贝的文章中提到过,这里不做详细赘述。
接下来会针对下面几种数据类型,进行校验
// 基本数据类型 let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 复杂-引用数据类型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map();
typeof操作符,会返回一个字符串,表示未经计算的操作数的类型
/** * typeof 操作符 * * 返回一个字符串,表示未经计算的操作数的类型。 * * */ console.log(typeof str); // string console.log(typeof num); // number console.log(typeof boo); // boolean console.log(typeof undef); // undefined console.log(typeof testNull); // object console.log(typeof symb); // symbol console.log(typeof bigInt); // bigint console.log(typeof Object(bigInt)); // object console.log(typeof arr); // object console.log(typeof func); // function console.log(typeof obj); // object console.log(typeof date1); // object console.log(typeof setObj1); // object console.log(typeof setObj2); // object console.log(typeof mapObj); // object
小结
使用typeof操作符的时候,我们可以看到一些较为特殊的情况:
instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
/** * * instanceof * * 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 * * */ console.log(str instanceof String); // false console.log(new String("abc") instanceof String); // true console.log(num instanceof Number); // false console.log(new Number(123) instanceof Number); // true console.log(boo instanceof Boolean); // false console.log(new Boolean(true) instanceof Boolean); // false console.log(undef instanceof undefined); // Uncaught TypeError: Right-hand side of 'instanceof' is not an object console.log(testNull instanceof null); // Uncaught TypeError: Right-hand side of 'instanceof' is not an object console.log(symb instanceof Symbol); // false // Symbol不是构造函数,没有new操作符 console.log(bigInt instanceof BigInt); // false console.log(Object(BigInt("22")) instanceof Object); // true console.log(Object(BigInt("22")) instanceof BigInt); // true console.log(arr instanceof Array); // true console.log(arr instanceof Object); // true console.log(func instanceof Function); // true console.log(func instanceof Object); // true console.log(obj instanceof Object); // true console.log(obj instanceof Function); // false console.log(null instanceof Object); // false console.log(date1 instanceof Object); // true console.log(setObj1 instanceof Object); // true console.log(setObj2 instanceof Object); // true console.log(mapObj instanceof Object); // true console.log(setObj1 instanceof Array); // false console.log(setObj2 instanceof Array); // false console.log(mapObj instanceof Array); // false
/** * constructor * * 返回创建实例对象的 构造函数的引用。 * * 注意,此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串 * * 构造函数.prototype.constructor() * * */ // 基本数据类型 let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 复杂-引用数据类型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); function constructorFn() { this.name = "11"; } let con1 = new constructorFn(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map(); console.log(str.constructor); // String console.log(num.constructor); // Number console.log(boo.constructor); // Boolean // console.log(testUndefined.constructor); // Cannot read property 'constructor' of undefined // console.log(testNull.constructor); // Cannot read property 'constructor' of null console.log(symb.constructor); // Symbol console.log(bigInt.constructor); // BigInt console.log(arr.constructor); // Array console.log(func.constructor); // Function console.log(obj.constructor); // Object console.log(date1.constructor); // Date console.log(constructorFn.constructor); // Function console.log(con1.constructor); // constructorFn console.log(setObj1.constructor); // Set console.log(setObj2.constructor); // Set console.log(mapObj.constructor); // Map /** * * 构造函数校验 * * */ console.log(Function.constructor); // Function console.log(Object.constructor); // Function console.log(Array.constructor); // Function console.log(Date.constructor); // Function
Object.prototype.toString.call && Object.prototype.toString.apply
Object.prototype.toString()
在使用Object.prototype.toString.call或者Object.prototype.toString.apply检查数据类型之前,我们先了解一下Object.prototype.toString和JavaScript中的构造函数Function的原型方法apply和call:
/** * 返回一个表示该对象的字符串 * * Object.prototype.toString() * * 每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。 * 默认情况下,toString() 方法被每个 Object 对象继承。 * * 如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中 type 是对象的类型。以下代码说明了这一点: * * */ let isObj = { name: "zhangsan" }; let isBoolean = true; let isNumber = new Number(123); let isString = "abc"; let isFun = new Function(); console.log(isObj.toString()); // [object Object] console.log(isBoolean.toString()); // true console.log(isNumber.toString()); // 123 console.log(isString.toString()); // abc console.log(new Date().toString()); // Thu Apr 28 2022 16:37:19 GMT+0800 (中国标准时间) console.log(isFun.toString()); // function anonymous() {}
/** * * call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数,function.call(thisArg, arg1, arg2, ...) * * apply() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数,unc.apply(thisArg, [argsArray]) * * */ // call基本使用; function a() { console.log(this); } function b() { console.log(this); } a.call(b); // function b() {} b.call(a); // function a() {}
call和apply最简单的例子表明了,改变了当前方法的this指向
同时这两个方法的区别在于传参的方式
/** * * 使用 toString() 检测对象类型可以通过 toString() 来获取每个对象的类型。 * 为了每个对象都能通过 Object.prototype.toString() 来检测, * 需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg。 * * 那么 Object.prototype.toString 相当于 原生构造函数的实例化对象isNumber,传参数给Object.prototype.toString执行 * 实际上相当于 toString.call(new ***); * * */ let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 复杂-引用数据类型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); function testFun() {} let newTest = new testFun(); let newFun = new Function(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map(); console.log(Object.prototype.toString.apply(new String("sss"))); // [object String] console.log(Object.prototype.toString.apply(str)); // [object String] console.log(Object.prototype.toString.call(num)); // [object Number] console.log(Object.prototype.toString.call(boo)); // [object Boolean] console.log(Object.prototype.toString.call(undef)); // [object Undefined] console.log(Object.prototype.toString.call(testNull)); // [object Null] console.log(Object.prototype.toString.call(symb)); // [object Symbol] console.log(Object.prototype.toString.call(Object(bigInt))); // [object BigInt] console.log(Object.prototype.toString.call(bigInt)); // [object BigInt] console.log(Object.prototype.toString.apply(arr)); // [object Array] console.log(Object.prototype.toString.call(func)); // [object Function] console.log(Object.prototype.toString.call(obj)); // [object Object] console.log(Object.prototype.toString.call(date1)); // [object Date] console.log(Object.prototype.toString.call(testFun)); // [object Function] console.log(Object.prototype.toString.call(newTest)); // [object Object] console.log(Object.prototype.toString.call(newFun)); // [object Function] console.log(Object.prototype.toString.call(setObj1)); // [object Set] console.log(Object.prototype.toString.call(setObj2)); // [object Set] console.log(Object.prototype.toString.call(mapObj)); // [object Map]
判断是否是数组:
console.log(Array.isArray([1, 2])); // true
判断一个对象是否是空对象
// 判断空对象 function isEmptyObj(obj) { for (name in obj) { console.log(name); return false; // 不是空对象 } return true; } console.log(isEmptyObj({})); // true
更多用法等待补充。
码云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note