JS 对象遍历知多少?

更新日期: 2021-07-20阅读: 1.5k标签: 遍历

写在最前面

本文主要是对 JS 对象(不含数组、Map、Set 结构)的 7 个遍历方法进行总结归纳,写该文章的这天恰好是我最喜爱的球星艾弗森的 45 周岁生日,因此本文会以艾弗森的基本资料为模板生成一个 JS 对象并对其进行遍历 。

定义对象

首先让我们定义如以下代码所示的对象 player:

const player = {
name: 'Allen Iverson',
[Symbol('birthday')]: '1975/06/07',
};
Object.defineProperties(player, {
isHallofFame: {
enumerable: false,
value: true,
},
[Symbol('ScoreKingTime')]: {
enumerable:false,
value: 4,
},
});
Object.defineProperties(player.__proto__, {
university: {
enumerable: true,
value: 'Georgetown',
},
team: {
enumerable: false,
value: '76ers',
},
[Symbol('country')]: {
enumerable: true,
value: 'USA',
},
[Symbol('hometown')]: {
enumerable: false,
value: 'Virginia',
},
});

如上述代码所示,定义了一个 player 的对象,其共有以下 8 个属性:

原型属性可枚举Symbol 属性
nameAllen  Iverson
birthday1975/06/07
isHallofFametrue
ScoreKingTime4
universityGeorgetown
team76ers
countryUSA
hometownVirginia

其中浅颜色的属性都是不可枚举的属性,__proto__下的属性则为其原型上(即 Object.prototype)的属性,Symbol 类型的值自然为 Symbol 属性

for...in

for(const name in player) {
console.log('name:', name);
}
// name: name
// name: university

for...in 循环是我们较为常用的遍历对象方法了,结合 MDN 里所言以及输出结果不难得出其遍历的属性, 包含自身以及原型上所有可枚举的属性,不包含 Symbol 属性 。因为其可遍历到原型上可枚举的属性,因此我们的代码中通常会多出一句这样的判断(如果我们不需要原型上的属性):

for(const name in player) {
if (Object.prototype.hasOwnProperty.call(player, name)) {
console.log('name:', name);
}
}
// name: name

Object.keys

MDN:The Object.keys() method returns an array of a given object's own enumerable property names , iterated in the same order that a normal loop would.

const keys = Object.keys(player);
console.log('keys:', keys);
// keys: ["name"]

Object.keys 大概是我们最常用的遍历方法了,如在 vue 源码对 data 进行遍历响应式处理也是用这个方法。通过输出结果也表明:其返回的是 所有自身可枚举的属性(不含 Symbol 属性) ,不包含原型上的任何属性。

Object.getOwnPropertyNames

const ownPropertyNames = Object.getOwnPropertyNames(player);
console.log('ownPropertyNames:', ownPropertyNames);
// ownPropertyNames: ["name", "isHallofFame"]

Object.getOwnPropertyNames 返回的是 所有自身的属性(包含不可枚举属性但不包含 Symbol 属性) ,不包含原型上的任何属性。

Object.getOwnPropertySymbols

const ownPropertySymbols  = Object.getOwnPropertySymbols(player);
console.log('ownPropertySymbols:', ownPropertySymbols);
// ownPropertySymbols: [Symbol(birthday), Symbol(ScoreKingTime)]

通过输出不难得出 Object.getOwnPropertySymbols 返回的是 自身的所有 Symbol 属性(包含不可枚举的) ,但是不含原型上的任何属性。

Reflect.ownKeys

const ownKeys = Reflect.ownKeys(player);
console.log('ownKeys:', ownKeys)
// ownKeys: ["name", "isHallofFame", Symbol(birthday), Symbol(ScoreKingTime)]

Reflect.ownKeys 返回的是 自身的所有属性(包含不可枚举的以及所有 Symbol 属性) ,不包含原型 上的任何属性。

Object.values

const values = Object.values(player);
console.log('values:', values);
// values: ["Allen Iverson"]

Object.values 同 Object.keys 一样,其遍历的是 所有自身可枚举的属性(不含 Symbol 属性) ,不包含原型上的任何属性。但与 Object.keys 不同的是:其返回的不再是 key 值而是 value 值集合。

Object.entries

const entries =Object.entries(player);
console.log('entries:', entries);
// entries: [["name", "Allen Iverson"]]

其也同 Object.keys 一样,遍历的是 所有自身可枚举的属性(不含 Symbol 属性) ,不包含原型上的任何属性。不同的是,其返回值是 [key, value]的集合。Object.entries 在我们平时的开发中可能很少用到,但是其可配合Object.fromEntries一起使用:有以下代码:

// 对象转换
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
Object.entries(object1)
.map(([ key, val ]) => [ key, val * 2 ])
);
console.log(object2);
// { a: 2, b: 4, c: 6 }

结合文章中的代码输出结果可得到以下表格:

含原型属性含不可枚举含 Symbol 属性返回值
for...inkey
Object.keys[key...]
Object.getOwnPropertyNames[key...]
Object.getOwnPropertySymbols是(只有 symbol)[key...]
Reflect.ownKeys[key...]
Object.values[value...]
Object.entries[[key,value]...]

简而言之:

  • 只有 for...in 可以遍历到原型上的属性

  • Object.getOwnPropertyNames 和 Reflect.ownKeys 可获取到不可枚举的属性

  • Object.getOwnPropertySymbols 和 Reflect.ownKeys 可获取到 Symbol 属性

作者:张宇航,微医前端技术部医保支撑组,一个不文艺的处女座程序员
原文:https://mp.weixin.qq.com/s/9m2d_EbuI7uqVcLhvIaFQQ


链接: https://fly63.com/article/detial/10557

js中循环总结,多种循环遍历的实现介绍(while,for,map,foreach等)

循环是所有语言最基础的语法。这篇文章将介绍avascript多种循环遍历的实现介绍,包括for ..in遍历方式 ,do..while,forEach,for…of,map等等,

JavaScript数组遍历:for、foreach、for in、for of、$.each、$().each的区别

JavaScript数组遍历的区别,推荐在循环对象属性的时候使用for in,在遍历数组的时候的时候使用for of;for in循环出的是key,for of循环出的是value;for of是ES6新引入的特性。修复了ES5的for in的不足;

PHP遍历二叉树

遍历二叉树,这个相对比较复杂。二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历。什么是广度优先遍历?就是根节点进入,水平一行一行的便利。

js数组、对象、字符串的遍历

数组遍历:for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显,forEach --ES5语法;对象遍历:for...in --以任意顺序遍历一个对象自有的、继承的、可枚举的

Js二叉树与多叉树的遍历

二叉树的顺序存储结构就是用一维数组存储二叉树中的各个结点,并且结点的存储位置能体现结点之间的逻辑关系。二叉树的遍历有三种方式,如下:

JS中map与forEach的用法

相同点:都是循环遍历数组中的每一项;每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)

Js数组遍历方法总汇

for in语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作);For循环可以将代码块执行指定的次数。forEach按照原始数组元素顺序依次处理元素.

深度优先遍历,广度优先遍历实现对象的深拷贝 深度优先遍历

深度优先遍历(Depth-First-Search),是搜索算法的一种,它沿着树的深度遍历树的节点,尽可能深地搜索树的分支。当节点v的所有边都已被探寻过,将回溯到发现节点v的那条边的起始节点。

Js中常见的几种循环遍历

项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。

JavaScript中,数组和对象的遍历方法总结

循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现。这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!