js中Object的五种属性遍历

前提，Object的属性划分// 原型属性let myObj = Object.create({}, {getFoo: {value: function () {return this.foo;}}});// 对象自身可枚举属性myObj.enumType = 'Enumerable properties of the object itself';Object.defineProperty(my

sjslln

5880人浏览 · 2022-05-17 00:09:09

sjslln · 2022-05-17 00:09:09 发布

前提，Object的属性划分

// 原型属性
let myObj = Object.create({}, {
  getFoo: {
    value: function () {
      return this.foo;
    }
  }
});
// 对象自身可枚举属性
myObj.enumType = 'Enumerable properties of the object itself';
Object.defineProperty(myObj, 'enumType1', {
  enumerable: true,
  value: 'enumType1'
});
// 对象自身不可枚举属性
Object.defineProperty(myObj, 'type', {
  enumerable: false,
  value: 'cannot be enumerated'
});
// symbol属性
myObj[Symbol('symbol')] = 'symbol type';

const object = {
  a: 'a',
  c: 'c',
  b: 'b',
  3: 3,
  1: 1,
  2: 2,
  '-1': 'string1',
  '0': 0
};

class Person {
  constructor(name, age) {
    // 可枚举属性
    this.name = name;
    this.age = age;
    this[Symbol('symbol')] = 'symbol type';
  }
  run() {
    console.log(this.name + ': run')
  }
}
// 原型链属性
Person.prototype.say = () => {
  console.log(this.name + 'say')
}
const person1 = new Person('zs', 30);

控制台打印myobj
控制台打印object

ES5.1新增：Object.keys();

方法会返回：一个由一个给定对象的自身可枚举属性组成的数组，Symbol属性过滤不会进行输出
属性顺序：数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致；(0以上整数按顺序排列，其他字符串按给定属性顺序排列)

console.log(Object.keys(myObj)); //  ['enumType', 'enumType1']
console.log(Object.keys(object)); // ['0', '1', '2', '3', 'a', 'c', 'b', '-1']
console.log(Object.keys(person1)) // ['name', 'age']

ES5.1新增：Object.getOwnPropertyNames()

方法会返回：一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组
属性顺序：数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致；(0以上整数按顺序排列，其他字符串按给定属性顺序排列)

console.log(Object.getOwnPropertyNames(myObj)); //  ['getFoo', 'enumType', 'enumType1', 'type']
console.log(Object.getOwnPropertyNames(object)); // ['0', '1', '2', '3', 'a', 'c', 'b', '-1']
console.log(Object.getOwnPropertyNames(person1)) // ['name', 'age']

ES6新增：Object.getOwnPropertySymbols()

返回值：一个给定对象自身的所有 Symbol 属性的数组

console.log(Object.getOwnPropertySymbols(myObj)); //  [Symbol(symbol)]
console.log(Object.getOwnPropertySymbols(object)); // []
console.log(Object.getOwnPropertySymbols(person1)) // [Symbol(symbol)]

ES6新增：Reflect.ownKeys

返回值：一个由目标对象自身的属性键组成的数组，包含可枚举，不可枚举，Symbol属性

console.log(Reflect.ownKeys(myObj)); //  ['getFoo', 'enumType', 'enumType1', 'type', Symbol(symbol)]
console.log(Reflect.ownKeys(object)); // ['0', '1', '2', '3', 'a', 'c', 'b', '-1']
console.log(Reflect.ownKeys(person1)) // ['name', 'age', Symbol(symbol)]

ES1st新增：for…in

以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

for (const key in myObj) {
  console.log(key + ':' + myObj[key])
}
for (const key in person1) {
  console.log(key)
}

forIn遍历
forIn遍历2

// 去掉原型链上的属性
for (const key in person1) {
  // Object.prototype.hasOwnProperty.call(person1, 'bar');
  if (person1.hasOwnProperty(key)) {
    console.log(key)
  }
}

总结：

方法	基本属性	原型链	不可枚举	Symbol
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	否	是
Reflect.ownKeys()	是	否	是	是
for…in	是	是	否	否