如何使用 jQuery 迭代 JavaScript 对象的属性？

在本文中，我们将学习如何使用 jQuery 迭代 JavaScript 对象的属性。

使用 JavaScript 迭代对象的最简单方法是使用for in 循环。

for 语句将像数组一样迭代对象，但循环将向对象发送键而不是索引作为参数。

此循环用于迭代对象的全部非 Symbol 可迭代属性。hasOwnProperty() 方法可用于检查属性是否属于对象本身。可以通过使用键作为对象的索引来查找对象的每个键的值。

语法

以下是使用 jQuery 迭代 JavaScript 对象的语法。

for (let key in example) {
   if (example.hasOwnProperty(key)) {
      value = example[key];
      console.log(key, value);
   }
}

示例

以下是使用 jQuery 迭代 JavaScript 对象的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>
   </title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script>
      function iterateObject() {
         let example = {
            Book: "Rich Dad Poor Dad",
            Author: "Robert Kiyosaki",
         };
         for (let key in example) {
            if (example.hasOwnProperty(key))
            {
               value = example[key];
               document.write(key, value, "<br>");
            }
         }
      }
   </script>
</body>
</html>

执行上述程序后，它将生成一个包含名为iterate的按钮的网页。单击迭代按钮后，页面上将显示以下内容

示例

以下是使用 jQuery 迭代 JavaScript 对象的另一个示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>
   </title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script>
      function iterateObject() {
         let example = {
            Student: "Amar",
            Branch: "Information Technology",
            Section:"A",
            Rollno:22
         };
         for (let key in example) {
            if (example.hasOwnProperty(key))
            {
               value = example[key];
               document.write(key, value, "<br>");
            }
         }
      }
   </script>
</body>
</html>

执行上述程序后，它将生成一个包含名为iterate的按钮的网页。单击迭代按钮后，页面上将显示以下内容。

使用 Object.entries()

我们还可以使用Object.entries() 方法返回对象自身可枚举的字符串键属性对的数组。该数组与 map() 方法一起使用，以从上下文的对中提取键和值。

可以通过访问数组对的第一和第二索引来提取键值对中的键和值。第一个索引对应于键，第二个索引对应于对的值。

语法

以下是使用 jQuery 迭代 JavaScript 对象的语法。

Object.entries(example).map(entry => {
   let key = entry[0];
   let value = entry[1];
   console.log(key, value);
});

示例

以下是使用 jQuery 迭代 JavaScript 对象的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script >
      function iterateObject() {
         let example = {
            Student: "Amar",
            Branch: "Information Technology",
            Section:"A",
            Rollno:22
         };
         Object.entries(example).map(entry => {
            let key = entry[0];
            let value = entry[1];
            document.write(key, ": ", value, "<br>");
         });
      }  
   </script>
</body>
</html>

执行上述程序后，它将生成一个包含名为iterate的按钮的网页。单击迭代按钮后，页面上将显示以下内容。

更新于: 2022-11-18

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告