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

programming scriptsjqueryfront end technology更新于 2025/5/19 8:22:17

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

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

for 语句会将对象作为数组进行迭代，但 loop 会将键而不是索引作为参数传递给对象。

此循环用于迭代对象的所有非 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按钮的网页。点击"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 的按钮的网页。点击"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>