遍历对象、hasOwnProperty()方法、instanceof关键字、in关键字

269 阅读3分钟

for...in 循环

循环数组我们可以使用for (var i = 0; i < arr.length; i ++) {...} 的方式循环遍历这个数组,在我们js中提供了一个方便我们遍历对象的一个操作for (var prop in obj) {...},通过这个可以拿到对象的每个属性名

用法

for...in 循环的作用只有一个,那就是遍历对象。他遍历拿到的是对象的属性名,就是key而不是value

使用示例,会输出name和age

var obj = {
    name: "jack",
    age: 18
}

// 使用for...in循环,打印出对象的所有属性名
for (var prop in obj) {
    console.log(prop);     // name   age
}


// 想要获取到属性值可以这样写
for (var prop in obj) {
    var value = obj[prop];
    console.log(value);    // jack   18
}

弊端

这个方法虽然好用,但是他会把这个原型上的属性和方法也获取到,如下

// 定义一个父对象
var parent = {
    parentName: "jackParent",
    parentAge: 80,
    sayHi: function () {
        print("my name is JackParent");
    }
}

// 定义一个子对象
var son = {
    name: "jack",
    age: 18
}
// 设置这个子对象的原型指向定义的父对象(parent)
Object.setPrototypeOf(son, parent)

// 使用for...in循环遍历这个子对象,输出所有的值,他会把原型上面定义的属性和方法也遍历出来
for (var prop in son) {
    console.log(son[prop]);    // jack 18 jackParent 80 function () {}
}

hasOwnProperty()

概述

这个方法可以判断一个属性或者方法是不是自己身上的,不是原型上的。如果是自己身上的属性返回true,这个属性是原型上的属性,或者根本没有这个属性都会返回false

简单使用

// 定义一个父对象
var parent = {
    parentName: "刘备"
}

// 定义一个子对象
var son = {
    sonName: "刘禅"
}
// 设置子对象的原型指向父对象的原型
Object.setPrototypeOf(son, parent);

son.hasOwnProperty("sonName");          // true
son.hasOwnProperty("parentName");       // false

配合for...in循环使用

有了这个可以配合for...in循环使用,使之不会遍历到原型上面的属性。将上面弊端的for...in循环代码改成如下。

for (var prop in son) {
    if(son.hasOwnProperty(prop)) {
        console.log(son[prop]);    // jack 18
    }
}

这样就只会输出自己身上的属性和方法。

instanceof

  • 判断一个实例的隐式原型,是否有指定的这个构造函数的原型
  • 我们都知道,数组是由Array这个构造函数构造出来的,那么这个实例的隐式原型必然会指向Array的原型如下
// 返回结果为true,证明数组的隐式原型上面有Array的原型
[] instanceof Array;    // true

再来举一个例子

// 定义两个构造函数
function Person1() {}
function Person2() {}

// 使用Person1构造出实例
var demo = new Person1();

// 判断demo的隐式原型上是否有Person1的原型,因为是通过Person1构造出来的,所以必然为true
demo instanceof Person1;    // true
// 判断demo的隐式原型上是否有Person2的原型,这个demo是不是跟Person2没有半毛钱关系,所以必然为false
demo instanceof Person2;    // false

in关键字

这个关键字的作用是判断这个对象上面是否能访问到这个属性,能访问到返回true,否则返回false。如下

// 定义一个构造函数,给他添了两个属性
Person.prototype.sayHi = function () {
    console.log("i am Jack");
}
function Person() {
    this.name = "jack";
}

// 构造出实例
var person = new Person();

"name" in person;    // true
"sayHi" in person;   // true
"print" in person;   // false