如何以最佳方式使用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, 因为它速度更快。