openblog

Appearance

js对象遍历方法 ​

for in ​

for…in 主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。其语法如下：

js
for (var in object) {
 执行的代码块
}
for (var in object) {
 执行的代码块
}

其中两个参数：

  • var：必须。指定的变量可以是数组元素，也可以是对象的属性。
  • object：必须。指定迭代的的对象。
js
var obj = {a: 1, b: 2, c: 3}; 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}
var obj = {a: 1, b: 2, c: 3}; 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}

输出结果

js
键名： a
键值： 1
键名： b
键值： 2
键名： c
键值： 3
键名： a
键值： 1
键名： b
键值： 2
键名： c
键值： 3

注意：

  • for in 方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。

Object.keys()、Object.values()、Object.entries() ​

这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和Symbol属性）组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，这个三个元素返回的值分别如下：

  • Object.keys()：返回包含对象键名的数组；
  • Object.values()：返回包含对象键值的数组；
  • Object.entries()：返回包含对象键名和键值的数组。
js
let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));  
console.log(Object.values(obj));
console.log(Object.keys(obj));
let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));  
console.log(Object.values(obj));
console.log(Object.keys(obj));

输出结果

js
['id', 'name', 'age']
[1, 'hello', 18]
[['id', 1], ['name', 'hello'], ['age', 18]
['id', 'name', 'age']
[1, 'hello', 18]
[['id', 1], ['name', 'hello'], ['age', 18]

注意

  • Object.keys()方法返回的数组中的值都是字符串，也就是说不是字符串的key值会转化为字符串。 结果数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性。

Object.getOwnPropertyNames() ​

Object.getOwnPropertyNames()方法与Object.keys()类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

js
let a = ['Hello', 'World'];
Object.keys(a) 
Object.getOwnPropertyNames(a)
let a = ['Hello', 'World'];
Object.keys(a) 
Object.getOwnPropertyNames(a)

输出结果

js
["0", "1"]
["0", "1", "length"]
["0", "1"]
["0", "1", "length"]

这两个方法都可以用来计算对象中属性的个数：

js
var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj)
Object.keys(obj).length
Object.getOwnPropertyNames(obj).length
var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj)
Object.keys(obj).length
Object.getOwnPropertyNames(obj).length

输出结果

js
["0", "1", "2"]
3
3
["0", "1", "2"]
3
3

Object.getOwnPropertySymbols() ​

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性：

js
let obj = {a: 1}
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})
let obj = {a: 1}
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})

输出结果

js
Symbol baz Symbol foo
Symbol baz Symbol foo

Reflect.ownKeys() ​

Reflect.ownKeys() 返回一个数组，包含对象自身的所有属性。它和Object.keys()类似，Object.keys()返回属性key，但不包括不可枚举的属性，而Reflect.ownKeys()会返回所有属性key：

js
var obj = {
    a: 1,
    b: 2
}
Object.defineProperty(obj, 'method', {
    value: function () {
        alert("Non enumerable property")
    },
    enumerable: false
})
console.log(Object.keys(obj))
console.log(Reflect.ownKeys(obj))
var obj = {
    a: 1,
    b: 2
}
Object.defineProperty(obj, 'method', {
    value: function () {
        alert("Non enumerable property")
    },
    enumerable: false
})
console.log(Object.keys(obj))
console.log(Reflect.ownKeys(obj))

输出结果

js
["a", "b"]
["a", "b", "method"]
["a", "b"]
["a", "b", "method"]

注意：

  • Object.keys() ：相当于返回对象属性数组； Reflect.ownKeys() :相当于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)。