JS实现键值对遍历json数组功能示例

下面我将为您详细讲解“JS实现键值对遍历json数组功能示例”的完整攻略。

一、前置知识

在进行键值对遍历json数组的操作前，需要您先了解以下基础知识：

1. JSON数组：JSON是一种轻量级的数据交换格式，通常使用JSON格式来传输数据，JSON数组即是由多个JSON对象组成的数组。

2. for...in循环：用于遍历一个对象的所有可枚举属性，循环中可以获取到枚举属性的名称。

3. Object.keys()：用于获取对象的所有可枚举属性的名称，返回一个由属性名组成的数组。

二、实现步骤

现在，让我们来实现键值对遍历json数组的功能。下面是具体步骤：

1. 首先，定义一个JSON数组，其中包含多个JSON对象，用于模拟真实场景。

js
const data = [
{
name: "John",
age: 30,
email: "[e-mail]"
},
{
name: "Jane",
age: 25,
email: "[e-mail]"
},
{
name: "Jack",
age: 35,
email: "[e-mail]"
}
];

1. 使用for...in循环遍历数组中每个JSON对象的可枚举属性，并输出它们的名称和值。

js
for (let i = 0; i < data.length; i++) {
const person = data[i];
for (let key in person) {
console.log(key + ": " + person[key]);
}
}

运行结果为：

name: John
age: 30
email: [e-mail]
name: Jane
age: 25
email: [e-mail]
name: Jack
age: 35
email: [e-mail]

1. 使用Object.keys()方法获取数组中第一个JSON对象的所有属性名称，并输出它们的名称和值。

js
const keys = Object.keys(data[0]);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
console.log(key + ": " + data[0][key]);
}

运行结果为：

name: John
age: 30
email: [e-mail]

至此，我们已经实现了键值对遍历json数组的功能。

三、示例说明

在实际开发中，键值对遍历json数组的功能经常会被使用到。下面以两个实例来进一步说明：

示例1：表格渲染

假设我们要实现一个表格组件，需要从后台获取JSON数据，并根据数据渲染出一个表格。此时，键值对遍历json数组的功能就派上了用场。

假设我们从后台获取到的数据如下：

const data = [
   {
      name: "John",
      age: 30,
      email: "[e-mail]"
   },
   {
      name: "Jane",
      age: 25,
      email: "[e-mail]"
   },
   {
      name: "Jack",
      age: 35,
      email: "[e-mail]"
   }
];

我们可以使用以下代码将数据渲染成一个表格：

function renderTable(data) {
   const table = document.createElement("table");
   // 表头
   const header = document.createElement("tr");
   const headerKeys = Object.keys(data[0]);
   for (let i = 0; i < headerKeys.length; i++) {
      const headerKey = headerKeys[i];
      const headerCell = document.createElement("th");
      headerCell.textContent = headerKey;
      header.appendChild(headerCell);
   }
   table.appendChild(header);
   // 表格内容
   for (let i = 0; i < data.length; i++) {
      const row = document.createElement("tr");
      const person = data[i];
      for (let key in person) {
         const cell = document.createElement("td");
         cell.textContent = person[key];
         row.appendChild(cell);
      }
      table.appendChild(row);
   }
   return table;
}

document.body.appendChild(renderTable(data));

渲染结果如下：

name	age	email
John	30	[e-mail]
Jane	25	[e-mail]
Jack	35	[e-mail]

示例2：数据过滤

假设我们在一个电商网站中实现一个商品列表，能让用户根据商品的分类、价格、品牌等信息进行搜索和筛选。此时，键值对遍历json数组的功能也就派上用场了。

假设我们有如下的商品数据：

const products = [
   {
      name: "iPhone XR",
      brand: "Apple",
      category: "Electronics",
      price: 749,
      inStock: true
   },
   {
      name: "Samsung Galaxy S10",
      brand: "Samsung",
      category: "Electronics",
      price: 899,
      inStock: true
   },
   {
      name: "Nike Air Max 270 React",
      brand: "Nike",
      category: "Footwear",
      price: 161.97,
      inStock: false
   },
   {
      name: "Levi's 501 Original Fit Jeans",
      brand: "Levi's",
      category: "Clothing",
      price: 59.5,
      inStock: true
   }
];

以下代码实现了将商品数据渲染为一个列表，并允许用户根据商品的分类和品牌来进行过滤。

<input type="text" id="category-input" placeholder="Enter category name">
<div>
   <input type="checkbox" id="brand-apple"> <label for="brand-apple">Apple</label>
   <input type="checkbox" id="brand-samsung"> <label for="brand-samsung">Samsung</label>
   <input type="checkbox" id="brand-nike"> <label for="brand-nike">Nike</label>
   <input type="checkbox" id="brand-levis"> <label for="brand-levis">Levi's</label>
</div>
<ul id="product-list"></ul>

<script>
const categoryInput = document.getElementById("category-input");
const brandCheckboxes = document.querySelectorAll('[id^="brand-"]');
const productList = document.getElementById("product-list");

function renderList(products) {
   productList.innerHTML = "";
   for (let i = 0; i < products.length; i++) {
      const product = products[i];
      const item = document.createElement("li");
      item.textContent = product.name + " - " + product.price;
      productList.appendChild(item);
   }
}

function filterList() {
   const filteredProducts = products.filter(product => {
      const categoryMatch = categoryInput.value === "" || product.category.toLowerCase().includes(categoryInput.value.toLowerCase());
      const brandMatch = Array.from(brandCheckboxes).filter(checkbox => checkbox.checked).some(checkbox => checkbox.id.endsWith(product.brand.toLowerCase()));
      return categoryMatch && brandMatch;
   });
   renderList(filteredProducts);
}

filterList();

categoryInput.addEventListener("input", filterList);
brandCheckboxes.forEach(checkbox => checkbox.addEventListener("change", filterList));
</script>

使用上述代码，我们可以根据多个条件来对商品进行过滤，便于用户快速找到所需商品。

以上是两个关于键值对遍历json数组的简单示例。希望对您有所帮助。