前端百题斩005—— js中9种遍历对象的方法

Posted 执鸢者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端百题斩005—— js中9种遍历对象的方法相关的知识,希望对你有一定的参考价值。

写该系列文章的初衷是“让每位前端工程师掌握高频知识点,为工作助力”。这是前端百题斩的第5斩,希望朋友们关注公众号“执鸢者”,用知识武装自己的头脑

5.1 简介

对象是在编程中最常见的部分,很多情况下需要遍历该对象上的属性,那么有几种方式可以帮助我们遍历该对象上的属性呢?下面一起来了解九种方法。

下面测试方法所用的对象如下所示:

const parentObj = {
    a: \'aaaaa\',
    b: Symbol(\'bbbbb\'),
    c: \'ccccc\'
};

const Obj = Object.create(parentObj, {
    d: {
        value: \'ddddd\',
        enumerable: true
    },
    e: {
        value: \'eeeee\',
        enumerable: false
    },
    [Symbol(\'f\')]: {
        value: \'fffff\',
        enumerable: true
    }
});
  1. Object.keys(obj)
Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性(不含Symbol属性)。这些属性的顺序与手动遍历该对象属性时的一致。
console.log(\'Object.keys()\', Object.keys(Obj)); // Object.keys() [ \'d\' ]
  1. Object.values(obj)
Object.values()返回一个数组,其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
console.log(\'Object.values()\', Object.values(Obj)); // Object.values() [ \'ddddd\' ]
  1. Object.entries(obj)
Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
console.log(\'Object.entries()\', Object.entries(Obj)); // Object.entries() [ [ \'d\', \'ddddd\' ] ]
  1. Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。
console.log(\'Object.getOwnPropertyNames()\', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ \'d\', \'e\' ]
  1. Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。
console.log(\'Object.getOwnPropertySymbols()\', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]
  1. for……in
遍历所有可枚举的属性(包括原型上的),然后可利用hasOwnProperty判断对象是否包含特定的自身(非继承)属性,其具有以下特点:

(1)index索引为字符串型数字,不能直接进行几何运算

(2)遍历顺序有可能不是按照实际数组的内部顺序

(3)会遍历数组的所有可枚举属性,包括原型

(4)for...in更适合便利对象,不要使用for...in遍历数组

for(let key in Obj) {
    // for in: d
    // for in: a
    // for in: b
    // for in: c
    console.log(\'for in:\', key);
}
  1. for……of
必须部署了Iterator接口后才能使用。使用范围:数组、Set和Map结构、类数组对象(arguments、DOMNodeList对象……)、Generator对象以及字符串
for(let value of Object.values(Obj)) {
    // for of: ddddd
    console.log(\'for of:\', value);
}
  1. forEach
使用break不能中断循环使用
Object.values(Obj).forEach(value => {
    // forEach: ddddd
    console.log(\'forEach:\', value);
});
  1. Reflect.ownKeys(obj)
返回一个数组,包含对象自身的所有属性,不管属性名是Symbol还是字符串,也不管是否可枚举。
console.log(\'Reflect.ownKeys()\', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ \'d\', \'e\', Symbol(f) ]

5.2 特点总结

类型特点
Object.keys(obj)返回对象本身可直接枚举的属性(不含Symbol属性)
Object.values(obj)返回对象本身可直接枚举的属性值(不含Symbol属性)
Object.entries(obj)返回对象本身可枚举属性键值对相对应的数组(不含Symbol属性)
Object.getOwnPropertyNames(obj)返回对象所有自身属性的属性名(不包括Symbol值作为名称的属性)
Object.getOwnPropertySymbols(obj)返回一个给定对象自身的所有 Symbol 属性的数组
for……in所有可枚举的属性(包括原型上的)
for……of必须部署了Iterator接口后才能使用,例如数组、Set和Map结构、类数组对象、Generator对象以及字符串
forEachbreak不能中断循环
Reflect.ownKeys(obj)对象自身所有属性

5.3 遍历顺序

上述遍历对象的属性时都遵循同样的属性遍历次序规则:
  1. 首先遍历所有属性名为数值的属性,按照数字排序
  2. 其次遍历所有属性名为字符串的属性,按照生成时间排序
  3. 最后遍历所有属性名为Symbol值的属性,按照生成时间排序
用下面代码来验证上述遍历规则
const Obj = {
    [Symbol(0)]: \'symbol\',
    1 : \'1\',
    \'c\': \'c\',
    \'1a1\': \'11\',
    22223333: \'2\',
    \'d\': \'d\'
};

console.log(Reflect.ownKeys(Obj)); // [ \'1\', \'22223333\', \'c\', \'1a1\', \'d\', Symbol(0) ]

1.如果觉得这篇文章还不错,来个分享、点赞吧,让更多的人也看到

2.关注公众号执鸢者,与号主一起斩杀前端百题。

以上是关于前端百题斩005—— js中9种遍历对象的方法的主要内容,如果未能解决你的问题,请参考以下文章

前端百题斩002——js中6种变量声明方式

前端百题斩006——js中三类字符串转数字的方式

前端百题斩[001]——typeof和instanceof

前端百题斩001——typeof和instanceof

js遍历对象的几种方法以及 删除对象中的某个元素的方法

前端工程师学习go语言第一弹——基础篇