必看!JavaScript遍历对象的多样方法
最编程
2024-01-14 22:33:31
...
数据结构对类型多种多样。数组、对象。。。
对于数组,可简单的进行循环遍历的操作,从而获取到每一个元素。但是对象格式的数据,并不能直接使用遍历数组的方式,那么对象该如何遍历呢?
1. Object.keys() 和 Object.values()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
。
如:
let obj = {
a: 1,
b: 2,
c: 3
}
let keysArr = Object.keys(obj) // ["a", "b", "c"]
let valuesArr = Object.values(obj) // [1, 2, 3]
2. for…in…
以任意顺序
遍历一个对象的除Symbol以外的可枚举属性。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
3. Object.entries()
方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。
let obj = {
a: 1,
b: 2,
c: 3
}
console.log(Object.entries(obj)) // [ [ 'a', 1 ] , [ 'b', 2 ], [ 'c', 3 ] ]
上一篇: 玩转JS:深入理解对象和数组的遍历技巧
推荐阅读
-
JScript 内置对象 Array 中删除元素的方法_javascript技巧
-
确定空对象和数组的 JavaScript 方法
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
JavaScript里的对象复制方法大揭秘
-
复制 JavaScript 对象的方法
-
深入理解 JavaScript 数组与对象的复制方法
-
学JavaScript不用怕!这篇教程带你轻松掌握基本对象和常用对象的使用方法
-
用JavaScript从数组对象中提取一个属性并创建新数组的方法
-
必看!数组对象去重的简易方法
-
ES6:超级简单的方法实现JavaScript数组对象去重