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

本文概述

  • Java脚本
  • jQuery的
遍历数组, 如此简单的循环任务不是吗?但是, 你知道如何正确地迭代对象吗?
【如何以最佳方式使用JavaScript和jQuery遍历对象】如果你是新手, 今天可以学习它, 如果你有鸡的记忆, 明天就可以忘记。
Java脚本 使用Java脚本(已知)遍历对象的最简单方法是在循环中使用简单的for..。
它的工作原理非常简单, for循环将对象作为数组进行迭代, 但是该循环将对象的键(而不是索引)作为参数发送。
var OurObject = {testProperty: 123, anotherProperty: "Hey", helloWorld: "Hi"}; for(var key in OurObject){// Check if the property really existsif(OurObject.hasOwnProperty(key)){var value = http://www.srcmini.com/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 = http://www.srcmini.com/myObject[keys[i]]; console.log(keys[i], value); }

现在, 如果要遍历所有属性(甚至是那些不可枚举的属性), 则可以使用getOwnPropertyNames方法(在窗口中可用的全局对象)使用以下技巧:
// Define a not enumerable propertyvar obj = Object.create({}, {// non-enumerable propertygetFoo: {value: function() { return this.foo; }, enumerable: false}}); obj.foo = "Hello"; Object.getOwnPropertyNames(obj).forEach(function (key) {var value = http://www.srcmini.com/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, 因为它速度更快。
如何以最佳方式使用JavaScript和jQuery遍历对象

文章图片

    推荐阅读