关键词:
一. typeof操作符
typeof
操作符用于返回正在使用值的类型。
// 使用原始值
let mNull = null;
let mUndefined = undefined;
let mString = ‘mazey‘;
let mNumber = 123;
let mBoolean = true;
let mFunction = function () {
return true;
};
// 用构造函数的方式new一个实例
let oString = new String(‘cherrie‘);
let oRegExp = new RegExp(‘^[0-9]+$‘);
let oFunction = new Function(‘x‘, ‘y‘, ‘return x + y‘);
let oObj = {};
let oNew = new Object();
// typeof值
console.log(typeof mNull); // object
console.log(typeof mUndefined); // undefined
console.log(typeof mString); // string
console.log(typeof mNumber); // number
console.log(typeof mBoolean); // boolean
console.log(typeof mFunction); // function
console.log(typeof oString); // object
console.log(typeof oRegExp); // object
console.log(typeof oFunction); // function
console.log(typeof oObj); // object
console.log(typeof oNew); // object
在《JavaScript启示录》中new RegExp()
介绍会返回function
,但是事实上我在chrome控制台中看到的是object
。
于是我console.log(new RegExp(‘^[0-9]+$‘))
,打印出来的是字符串/^[0-9]+$/
。
console.log(new RegExp(‘^[0-9]+$‘)); // /^[0-9]+$/
console.log(RegExp); // ƒ RegExp() { [native code] } 原始值
console.log(String); // ƒ String() { [native code] } 原始值
console.log(/^[0-9]+$/); // /^[0-9]+$/
console.log(new RegExp(‘^[0-9]+$‘) === /^[0-9]+$/); // false
console.log(RegExp(‘^[0-9]+$‘) === /^[0-9]+$/); // false
综上可以看出现版本RegExp
和String Number
一样属于JavaScript的原始值。
Math
作为JavaScript中的静态对象回返回什么呢?
console.log(typeof Math); // object
console.log(typeof Math.PI); // number
console.log(typeof Math.ceil); // function
所以Math
的__proto__
还是Object
,typeof
还能返回对象的属性和方法的类型。
typeof使用场景
1.判断某个变量是否已定义
console.log(typeof aaa); // ‘undefined‘
// 判断
if (typeof bbb === ‘undefined‘) {
console.log(‘变量未定义‘);
}
2.区分原始值和复杂值(对象值)
因为复杂值往往返回object
,当然有个例外就是原始值里面的null
也返回object
,然后function
作为Object
的实例也是复杂值。
// 判断是否时复杂值(对象值)
function isObject (m) {
return (typeof m === ‘function‘ || (typeof m === ‘object‘ && m !== null));
}
console.log(isObject(new RegExp(‘123‘))); // true
console.log(isObject(‘123‘)); // false
console.log(isObject(String(‘123‘))); // false
console.log(isObject(null)); // false
// 判断是否是原始值
function isNative (m) {
return (m === null || (typeof m !== ‘object‘ && typeof m !== ‘function‘));
}
console.log(isNative(new RegExp(‘123‘))); // false
console.log(isNative(‘123‘)); // true
console.log(isNative(String(‘123‘))); // true
console.log(isNative(null)); // true
3.检测某个变量是否是函数
当使用闭包时判断是函数后再进行下一步。
function qqq () {
let a = 0;
let b = function () {
a++;
console.log(a);
};
return b;
}
let ccc = qqq();
console.log(typeof ccc); // function
if (typeof ccc === ‘function‘) {
ccc(); // 1
ccc(); // 2
ccc(); // 3
ccc(); // 4
}
二. instanceof操作符
通过使用
instanceof
操作符,可以确定一个对象是否是特定构造函数的实例,返回true
或false
。
instanceof
只适用于构造函数创建返回的复杂对象和实例。任何时间判断一个对象(复杂值)是否是
Object
的实例时,它都将返回true
,因为所有对象都继承自Object()
构造函数。
let oFather = function () {
this.firstName = ‘mazey‘;
};
oFather.prototype.lastName = ‘qian‘;
// 实例
let oSon = new oFather();
console.log(oSon instanceof oFather); // true
// 继承
let nFather = function () {};
nFather.prototype = new oFather();
nFather.construction = nFather;
console.log(nFather.firstName); // undefined
console.log(nFather.prototype.lastName); // qian
console.log(nFather instanceof oFather); // false
console.log(new nFather() instanceof nFather); // true
// 相对于Object来说
console.log(‘123‘ instanceof Object); // false
console.log(new String(‘123‘) instanceof Object); // true 构造出来的实例
console.log(null instanceof Object); // false
instanceof使用场景
判断在一个继承关系中实例是否属于它的父类。
// 继承
let oFather = function () {};
let nFather = function () {};
nFather.prototype = new oFather();
nFather.construction = nFather;
let nSon = new nFather();
console.log(nSon instanceof nFather); // true
console.log(nSon instanceof oFather); // true
三. in操作符和hasOwnProperty方法
in
操作符可以检查一个对象的属性,包括来自原型链的属性,hasOwnProperty()
方法可以检查来自非原型链属性的对象。
例如现在有一个对象let obj = {name: ‘mazey‘};
,name
是它自身定义的属性,toString
是它从原型链上继承下来的属性。
let obj = {name: ‘mazey‘};
console.log(‘name‘ in obj); // true
console.log(‘toString‘ in obj); // true
console.log(‘name‘ in Object); // true
console.log(obj.hasOwnProperty(‘name‘)); // true
console.log(obj.hasOwnProperty(‘toString‘)); // false
console.log(Object.hasOwnProperty(‘name‘)); // true
所以in操作符查找的范围更广一点,可以用hasOwnProperty()
判断是否是对象自身的属性,而不是通过类似obj.prototype.foo = ‘foo‘;
这样定义的。
hasOwnProperty方法使用场景
在实际项目中经常使用for...in...
来遍历对象中可枚举的属性,但是for...in...
常常把原型obj.prototype.xxx
中的属性也列举出来,所以在循环的时候可以加上hasOwnProperty()
方法判断下。
function obj0 () {
this.name = ‘mazey‘,
this.age = ‘24‘
};
obj0.prototype.gender = ‘male‘;
let obj1 = new obj0();
// 打印所有可枚举属性
for (let key in obj1) {
console.log(key); // name age gender 从原型链上继承下来的属性也会被打印出来
}
// 过滤掉原型链上的属性
for (let key in obj1) {
if (obj1.hasOwnProperty(key)) {
console.log(key); // name age
}
}
四. 总结
1.typeof
可以判断使用值的类型,注意null
返回object
。 2.instanceof
验证构造函数构造出来的实例,可以用来判断一个对象是否属于一个父类。 3.hasOwnProperty
方法常常与in
操作符搭配使用,用来遍历一个对象自身的属性。
五. 相关扩展
1.删除对象的属性
若想把一个对象的自身属性完全删除,要使用delete
操作符。
let obj0 = {
name: ‘mazey‘,
age: 24
};
// 删除age属性
delete obj0.age;
console.log(obj0.hasOwnProperty(‘age‘)); // false
console.log(‘age‘ in obj0); // false
// 试着删除原型链上的属性 toString
delete obj0.toString
console.log(‘toString‘ in obj0); // true
需要注意的是delete
不会删除原型链上的属性。
2.可枚举
每个对象的属性都分为可枚举和不可枚举属性,可以使用propertyIsEnumerable()
方法来检查哪些属性是可枚举的。
每个对象都有一个
propertyIsEnumerable
方法。此方法可以确定对象中指定的属性是否可以被for...in
(for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行)循环枚举,但是通过原型链继承的属性除外。如果对象没有指定的属性,则此方法返回false
。
有的资料说只要能被for..in
遍历的属性就是可枚举的,实际上要排除从原型链上继承下来的属性,只有自身的属性是可枚举的。
// 第一个构造函数
function ConFun0 () {
this.firstName = ‘mazey‘;
}
ConFun0.prototype.firstCom = ‘bang‘;
// 第二个构造函数
function ConFun1 () {
this.secondName = ‘qian‘;
}
// 继承第一个
ConFun1.prototype = new ConFun0();
ConFun1.prototype.constructor = ConFun1;
// 实例
let obj = new ConFun1();
obj.girlName = ‘cherrie‘;
// 是否可枚举
console.log(obj.propertyIsEnumerable(‘constructor‘)); // false
console.log(obj.propertyIsEnumerable(‘firstName‘)); // false
console.log(obj.propertyIsEnumerable(‘firstCom‘)); // false
// 通过原型链继承的属性不是可枚举
console.log(obj.propertyIsEnumerable(‘secondName‘)); // true
console.log(obj.propertyIsEnumerable(‘girlName‘)); // true
for (let key in obj) {
console.log(key); // secondName girlName (原型链上的属性也会被打印出来->) firstName constructor firstCom
}
console.log(`---分割线---`);
for (let key in obj) {
// 过滤掉原型链上的属性
if (obj.hasOwnProperty(key)) {
console.log(key); // secondName girlName
}
}
所以可枚举的属性一定能被for..in
循环遍历出来,但是for...in
循环遍历出来的属性不一定是可枚举的,需排除从原型链上继承下来的属性,这里可以通过hasOwnProperty()
方法过滤掉不可枚举属性。
JavaScript中typeof,instanceof,hasOwnProperty,in的用法和区别
javascript中typeof,instanceof,hasownproperty,in的用法和区别
一.typeof操作符typeof操作符用于返回正在使用值的类型。//使用原始值letmNull=null;letmUndefined=undefined;letmString=‘mazey‘;letmNumber=123;letmBoolean=true;letmFunction=function(){returntrue;};//用构造函数的方式new一个实例letoString=newStr 查看详情
javascript--判断某个变量是不是数组(代码片段)
当我们遇到判断一个变量是不是数组时,首先想到一般都会是typeof操作符,但是测试后发现console.log(typeof[]);//object类型所以使用typeof来探测看来不行。下面介绍三种方法,可以帮助我们如何判断一个对象是不是数组。方法一:使... 查看详情
typeof 方法在 JavaScript 中是如何工作的? [复制]
】typeof方法在JavaScript中是如何工作的?[复制]【英文标题】:HowdoesthetypeofmethodworksinJavascript?[duplicate]【发布时间】:2017-08-0601:35:46【问题描述】:if(typeof(variable)==="boolean")//variableisaboolean下面两个代码示例中哪一个与上面的等效... 查看详情
javascript中typeof()为object类型的变量才可以添加属性
代码01:intvar a = 10;a.name = "HelloWorld";alert(a.name);输出undefined代码02:stringvar a = "abc";a.name = "HelloWorld";alert(a.name);输出undefined代码03:Stringv 查看详情
javascript typeof / NaN 混淆
】javascripttypeof/NaN混淆【英文标题】:javascripttypeof/NaNconfusion【发布时间】:2014-08-1323:04:08【问题描述】:所以我正在使用画布API制作一个小游戏,而且我对Javascript还很陌生。但是,当我努力让角色能够在360度全方位射击时,我... 查看详情
javascript相关知识
全新的作用域和闭包的概念 如何区分数据在内存中存放的位置是堆、栈还是池 1.看到var或者function一定在栈中,typeof的结果是function 2.typeof的结果如果不是object都在池里 3.typeof的结果如果是objec... 查看详情
javascript——typeof
typeof(a)返回a的数据类型,返回值的类型是string,取值可以为:undefinednullstringnumberobjectbooleanfunction 变量本身没有类型,其类型取决于变量储存的数据。 查看详情
typeof和instanceof的认识
前言在javascript中,存在着六种基础数据类型,分为值类型(“undefined”,”boolean”,“Null”,“Number ”,“String”)和引用类型(“object ”,“Function”)instanceof在JavaScript中,判断一个变量的类型尝尝会用typeof运算... 查看详情
typeof,null,和undefined
typeof操作符可以用于检测变量的数据类型Null在JavaScript中null表示"什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。可以设置为null来清空对象:Undefined在JavaScript中, undefined 是一个没有设置值的变量。ty... 查看详情
javascript中强制类型转换详解+总结
javascript中一共有六种类型:Number,String,Boolean,Undefined,Object,function.可以用typeof来查看声明的变量的类型.注意,typeof是操作符,不是函数.(tips:建议用js写代码的时候,声明变量后直接初始化,因为typeof对未声明和未定义的变量都会返回undef... 查看详情
javascript使用构造函数获取变量的类型名
在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题.但是常常不能获取到变量的精确名称,或者必须使用jQuery中的方法,这里我通过typeof,jQuery.type和通过构造函数来获取变量类型这三种方法详细介绍一遍.希望可以对你提... 查看详情
javascript中判断是否对象的方法是啥?
JavaScript中判断是不是对象的方法是什么?参考技术AJavaScript中检测对象类型的运算符有:typeof、instanceof)typeof运算符typeof是一元运算符,返回结果是一个说明运算数类型的字符串。如:"number","string","boolean"... 查看详情
获取 Javascript 变量类型的更好方法?
】获取Javascript变量类型的更好方法?【英文标题】:BetterwaytogettypeofaJavascriptvariable?【发布时间】:2011-11-1511:13:00【问题描述】:有没有比typeof更好的方法在JS中获取变量的类型?这样做时效果很好:>typeof1"number">typeof"hello""s... 查看详情
javascript中的typeof()函数错误[重复]
】javascript中的typeof()函数错误[重复]【英文标题】:typeof()functionerrorsinjavascript[duplicate]【发布时间】:2012-08-0204:09:37【问题描述】:可能重复:Istherea(built-in)wayinJavaScripttocheckifastringisavalidnumber?我有一个HTML输入搜索栏<formclass... 查看详情
javascript的typeof使用
原网页http://www.web-jia.com/view.php?a=23? 这个typeof我也用过好多次了,经常会忘记这次特意记录一下Undefined "undefined"Null "object"(seebelow)Boolean "boolean"Number "number"String "string"Symbol (new 查看详情
js中数据类型原始数据内置对象包装类型对象typeof
JS中数据类型、内置对象、包装类型对象、typeof关系 https://segmentfault.com/a/1190000018275384 JavaScript数据类型和数据结构 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_s 查看详情
javascript中的typeof和instanceof
typeof是一元操作符,而instanceof是二元操作符;typeof操作的是一个变量,而instanceof前面是一个变量,后面是一个类型;typeof返回的是一个字符串,而instanceof返回的是一个布尔值。1、typeof()http://www.cnblogs.com/jikey/archive/2010/05/05/172833... 查看详情
javascript中的typeof和类型判断
typeofECMAScript有5种原始类型(primitivetype),即Undefined、Null、Boolean、Number和String。我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说typeof只能正确识别基本类型值变量。vara="abc"... 查看详情