JS判断一个对象属性是否在其原型链上

以一道题目为例子： 对一个对象上的属性和值，以数组的形式输出。格式为['key：val', 'key：val']。不包含原型链上的属性。

首先我们准备这么一个对象

const obj = new Object({ a: 123, b: 456 });
obj.__proto__.top = "123"; 
console.log("obj : ", obj);//obj :  { a: 123, b: 456 }
for (const key in obj) {
  console.log("key:", key);//a b top
}

可以看到只有在原型链上才有属性top的存在，因为in遍历的时候，除了遍历自身的属性，也会遍历到原型链上的属性。

1.利用对象原型链上的hasOwnProperty       强烈推荐

const arr = [];
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    arr.push(`${key}:${obj[key]}`);
  }
}

console.log(arr);//[ 'a:123', 'b:456' ]

2.利用Object.getOwnPropertyNames

该方法返回一个数组，其包含给定对象中所有自有属性（包括不可枚举属性，但不包括使用 symbol 值作为名称的属性）。

const arr = [];
const pro = Object.getOwnPropertyNames(obj);
console.log("pro", pro);//pro [ 'a', 'b' ]
for (const key in obj) {
  if (pro.includes(key)) {
    arr.push(`${key}:${obj[key]}`);
  }
}

console.log(arr);//[ 'a:123', 'b:456' ]

为了更直观的知道该方法的返回值，我这里也打印了一下这个返回值。

3.利用Object.keys

该方法的的返回值是一个表示给定对象的所有可枚举属性的字符串数组

const arr = [];
const keys = Object.keys(obj);
console.log("keys", keys);//keys [ 'a', 'b' ]
for (const key of keys) {
  arr.push(`${key}:${obj[key]}`);
}

console.log(arr);//[ 'a:123', 'b:456' ]

4.利用对象属性加原型链   不推荐这种方法，原因是当给原型链上的属性设置为undefined或null时，也会把属性加进去

const arr = [];
for (const key in obj) {
  if (!Object.prototype[key]) {
    arr.push(`${key}:${obj[key]}`);
  }
}

console.log(arr);