JS操作json对象key、value的常用方法分析

今天我们一起来详细讲解一下JS操作json对象key、value的常用方法分析。

常用方法分析

在JS中，我们可以使用以下一些方法来操作json对象中的key和value。

1. 获取json对象的keys

我们可以使用Object.keys()方法来获取json对象中所有的keys，具体用法如下所示：

const json = {
  name: "Tom",
  age: 18,
  gender: "male"
};

const keys = Object.keys(json);
console.log(keys); // ["name", "age", "gender"]

2. 获取json对象的values

我们可以使用Object.values()方法来获取json对象中所有的values，具体用法如下所示：

const json = {
  name: "Tom",
  age: 18,
  gender: "male"
};

const values = Object.values(json);
console.log(values); // ["Tom", 18, "male"]

3. 获取json对象的key-value对

我们可以使用Object.entries()方法来获取json对象中所有的key-value对，具体用法如下所示：

const json = {
  name: "Tom",
  age: 18,
  gender: "male"
};

const entries = Object.entries(json);
console.log(entries); // [["name", "Tom"], ["age", 18], ["gender", "male"]]

4. 修改json对象中的value

我们可以直接通过json对象的key来修改它对应的value，具体用法如下所示：

const json = {
  name: "Tom",
  age: 18,
  gender: "male"
};

json.age = 20; // 直接修改json对象中的age属性对应的value

console.log(json); // {name: "Tom", age: 20, gender: "male"}

5. 删除json对象中的key

我们可以使用delete关键字来删除json对象中的一个key，具体用法如下所示：

const json = {
  name: "Tom",
  age: 18,
  gender: "male"
};

delete json.age; // 删除json对象中的age属性

console.log(json); // {name: "Tom", gender: "male"}

示例分析

下面我们通过两个例子来进一步说明JS操作json对象key、value的常用方法具体的应用场景。

例子一：渲染表格数据

假设我们现在有一个json对象，里面存储了一些用户信息，我们希望将这些信息渲染到一个表格中。我们可以使用以上所述的方法来实现这个需求。具体代码如下所示：

<table>
  <thead>
    <tr>
      <th>名字</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

const users = [
  { name: "Tom", age: 18, gender: "male" },
  { name: "Jack", age: 20, gender: "male" },
  { name: "Lucy", age: 22, gender: "female" }
];

const tableBody = document.getElementById("tableBody");

users.forEach(user => {
  const tr = document.createElement("tr");

  Object.values(user).forEach(value => {
    const td = document.createElement("td");
    td.textContent = value;
    tr.appendChild(td);
  });

  tableBody.appendChild(tr);
});

如上代码所示，我们通过Object.values()方法来获取json对象中的values，然后通过循环来将这些values渲染到表格的单元格中。

例子二：将json对象转成表单数据

假设我们现在有一个表单，里面包含了一些输入框，我们需要将表单中的数据转成json对象。我们可以使用以上所述的方法来实现这个需求。具体代码如下所示：

<form>
  <div>
    <label for="name">名字：</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">
  </div>
  <div>
    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </div>
  <button type="button" id="submitBtn">提交</button>
</form>

const form = document.querySelector("form");
const submitBtn = document.getElementById("submitBtn");
const json = {}; // 存储表单数据的json对象

form.addEventListener("input", () => {
  const formData = new FormData(form); // 获取表单数据

  for (const key of formData.keys()) {
    json[key] = formData.get(key);
  }
});

submitBtn.addEventListener("click", () => {
  console.log(json);
});

如上代码所示，我们通过FormData对象来获取表单中的数据，然后通过循环将这些数据转成json对象存储起来。最后，当用户点击提交按钮时，我们将存储的json对象打印到控制台中。

以上就是JS操作json对象key、value的常用方法分析的完整攻略，希望能对你有所帮助。