如何以最佳方式使用JavaScript和jQuery遍历对象

本文概述

• Java脚本
• jQuery的

遍历数组, 如此简单的循环任务不是吗？但是, 你知道如何正确地迭代对象吗？

如果你是新手, 今天可以学习它, 如果你有鸡的记忆, 明天就可以忘记。

Java脚本

使用Java脚本(已知)遍历对象的最简单方法是在循环中使用简单的for..。

它的工作原理非常简单, for循环将对象作为数组进行迭代, 但是该循环将对象的键(而不是索引)作为参数发送。

var OurObject = { testProperty: 123, anotherProperty: "Hey", helloWorld: "Hi" }; for(var key in OurObject){ // Check if the property really exists if(OurObject.hasOwnProperty(key)){ var value = OurObject[key]; // Do something with the item : // console.log(key, value); } }

注意：我们使用hasOwnProperty验证对象是否确实具有循环的给定属性, 以防止原型属性的迭代。

或者像往常一样使用for循环, 使用包含使用Object.keys对象的所有键的数组：

var myObject = {"p1": "value1", "p2": "value2", "p3": "value3"}; // ["p1", "p2", "p3"] var keys = Object.keys(myObject); for(i = 0; i < keys.length; i++){ var value = myObject[keys[i]]; console.log(keys[i], value); }

现在, 如果要遍历所有属性(甚至是那些不可枚举的属性), 则可以使用getOwnPropertyNames方法(在窗口中可用的全局对象)使用以下技巧：

// Define a not enumerable property var obj = Object.create({}, { // non-enumerable property getFoo: { value: function() { return this.foo; }, enumerable: false } }); obj.foo = "Hello"; Object.getOwnPropertyNames(obj).forEach(function (key) { var value = obj[key]; console.log(key, value); });

jQuery的

使用jQuery时, 请使用$ .each函数, 该函数允许你检索索引(对于对象而言为键)和回调中的值：

var obj = { myProperty: "Hello world !", not: "Yes", yes: "Nope", anotherProperty : { hi:"Hello" } }; // or jQuery.each(...) $.each(obj, function(key, value) { console.log(key, value); });

真的不是吗？但是, 如果你使用的是大型对象, 则可能要使用Vanilla Javascript而不是jQuery, 因为它速度更快。