JavaScript对象到数组的转换与键名重映射教程-js教程-PHP中文网

JavaScript对象到数组的转换与键名重映射教程

本教程详细讲解如何在JavaScript中将单个对象转换为包含该对象的数组，并同时实现对象内部键名的重映射。我们将介绍如何利用Array.prototype.push()方法将对象添加到数组，以及如何通过Array.prototype.map()方法高效、声明式地完成键名转换，避免常见的循环陷阱。

1. 问题描述

在javascript开发中，我们经常会遇到需要对数据结构进行转换的场景。一个常见需求是将一个独立的javascript对象封装到一个数组中，并且在封装过程中，可能还需要对该对象的键名进行重命名。例如，将一个包含name和age属性的对象 { name: "mike", age: "27" } 转换为一个数组，其中包含一个新对象，其属性名为 email 和 password，即期望得到 [{ email: "mike", password: "27" }]。

然而，在尝试实现此功能时，开发者有时会误用循环机制，导致不期望的结果，例如将同一个对象重复添加到数组中，或者未能正确地重映射键名。

2. 错误的实现方式及原因分析

一种常见的错误尝试是使用 for...of 循环结合 Object.entries() 方法来遍历原始对象的键值对，并在循环内部多次将对象推入数组。

var raw_data = {
  name: "Mike",
  age: "27",
};

var array_data = [];

// 错误的循环方式
for (let [key, value] of Object.entries(raw_data)) {
  if (value !== "") { // 这里的条件判断并非关键问题所在
    array_data.push({
      email: `${raw_data.name}`,
      password: `${raw_data.age}`,
    });
  }
}
console.log(array_data);

上述代码的输出将是：

[
  { email: 'Mike', password: '27' },
  { email: 'Mike', password: '27' }
]

出现这种结果的原因在于：

Object.entries(raw_data) 会返回 [["name", "Mike"], ["age", "27"]] 这样一个数组。
for...of 循环会遍历这个数组的每一个元素。对于 raw_data，它会执行两次循环体。
在每次循环中，array_data.push() 都会被调用，并将 { email: raw_data.name, password: raw_data.age } 这个对象推入 array_data。由于循环执行了两次，所以最终数组中包含了两个相同的对象。
此外，在模板字符串中使用 ${raw_data.name} 和 ${raw_data.age} 只是简单地引用了原始对象的属性值，并没有实现基于当前循环键值对的动态映射。

3. 推荐的解决方案：结合 push() 和 map()

为了实现将单个对象转换为包含一个重映射对象的数组，我们可以采用以下两步方法：

3.1 步骤一：将原始对象封装到数组中

首先，我们需要将原始的 raw_data 对象作为一个整体，一次性地推入到一个新的数组中。这样可以确保数组中只包含一个元素。

var raw_data = {
  name: "Mike",
  age: "27",
};

var array_data = [];
array_data.push(raw_data); // 将整个对象推入数组
// 此时 array_data 为 [{ name: "Mike", age: "27" }]

3.2 步骤二：使用 Array.prototype.map() 进行键名重映射

接下来，我们利用 Array.prototype.map() 方法来遍历 array_data 中的每一个对象，并对其进行转换，生成一个新的对象，其中包含我们期望的键名（email 和 password）。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

Array.prototype.map() 方法会创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。它非常适合进行一对一的元素转换。

var new_array = array_data.map(item => {
  return { email: item.name, password: item.age };
});

在这个 map 回调函数中：

item 代表 array_data 中的当前元素，即 { name: "Mike", age: "27" }。
我们返回一个新的对象 { email: item.name, password: item.age }，实现了键名的从 name 到 email，从 age 到 password 的重映射。

3.3 完整代码示例

将上述两个步骤结合起来，完整的解决方案如下：

// 原始数据对象
var raw_data = {
  name: "Mike",
  age: "27",
};

// 步骤一：创建一个新数组并将原始对象推入其中
var array_with_single_object = [];
array_with_single_object.push(raw_data);

// 步骤二：使用 map 方法进行键名重映射
var final_array = array_with_single_object.map(item => {
  return { email: item.name, password: item.age };
});

// 输出最终结果
console.log(final_array);

输出结果：

[
  { email: 'Mike', password: '27' }
]

这正是我们期望的输出，一个包含单个对象的数组，且该对象的键名已按需求重映射。

4. 注意事项与总结

Array.prototype.map() 的优势： map() 方法是处理数组元素转换的强大工具。它具有非破坏性（不会修改原数组），并且代码表达力强，符合函数式编程范式。
避免不必要的循环： 当目标是转换一个或一组固定的对象时，应避免使用 for...of Object.entries() 这样的循环来重复推入数据。理解 map() 的作用能帮助我们选择更高效、更正确的处理方式。
键名匹配： 确保在 map() 回调函数中，新对象的键名与原始对象的属性值能够正确匹配。例如，如果原始对象是 { firstName: "John" }，而期望得到 { givenName: "John" }，则映射应为 { givenName: item.firstName }。
处理多个对象： 如果 raw_data 本身就是一个对象数组（例如 [{ name: "Mike", age: "27" }, { name: "Anna", age: "25" }]），那么可以直接在该数组上调用 map() 方法，无需先推入一个空数组。map() 会自动遍历所有元素并进行转换。

通过理解和正确应用 Array.prototype.push() 和 Array.prototype.map() 方法，我们可以高效且准确地完成JavaScript中对象到数组的转换以及键名的重映射任务。