Object.entries() 和 Object.formEntries()的用法详解

`Object.entries()` 和 `Object.fromEntries()` 允许在对象和数组之间转换，方便与 `Map` 进行交互。

• Object.entries：传入一个对象，返回该对象的键值对的数组，即每个键和对应的值，转化为一个数组，以此类推，最后这些数组再被放到一个新数组中
• Object.fromEntries：传入一个数组，或者传入一个Map，数组最好是和Object.entries生成的数组结构一致，根据传入的返回一个对象
• Map：ES6新增的数据结构，能够进行迭代，使用...展开运算符可将Map类型转化为Object.entries生成的数组对象 ，将Map传入Object.fromEntries能得到一个对象

Object.entries()

该方法返回一个由对象自身可枚举属性的键值对组成的二维数组，每个子数组形式为 [key, value]，顺序与 for...in 循环一致，但不会遍历原型链上的属性。

• 若输入是数组，键会被转换为字符串索引（如 ['0', 1]）。
• 若输入是字符串，会按字符索引生成键值对。
• 数字或 Symbol 类型的键会被强制转为字符串。

基本的用法如下：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 输出: [['a', 1], ['b', 2], ['c', 3]]

处理空对象：

const emptyObj = {};
const entries = Object.entries(emptyObj);
console.log(entries);
// 输出: []

非对象参数：

如果传入非对象参数（如 null 或 undefined），Object.entries 会抛出错误

try {
    console.log(Object.entries(null));
} catch (e) {
    console.error(e);
    // 输出: TypeError: Cannot convert undefined or null to object
}

使用 for…of 迭代：

Object.entries 返回的数组可以使用 for...of 迭代

const obj = { x: 10, y: 20, z: 30 };

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}
// 输出:
// x: 10
// y: 20
// z: 30

应用场景

1. 通过 filter 过滤无效属性

通过 Object.entries 结合 filter 方法，筛选出满足特定条件的键值对

const obj = { a: 1, b: 2, c: 3, d: 4 };

const filteredEntries = Object.entries(obj).filter(([key, value]) => value > 2);
console.log(filteredEntries);
// 输出: [['c', 3], ['d', 4]]

2. 对象属性值的转换

使用 map 方法对对象属性值进行转换，然后重新构建对象

const obj = { name: 'Alice', age: 25 };

const transformedEntries = Object.entries(obj).map(([key, value]) => {
    return [key, typeof value === 'string' ? value.toUpperCase() : value];
});

const newObj = Object.fromEntries(transformedEntries);
console.log(newObj);
// 输出: { name: 'ALICE', age: 25 }

3. 嵌套对象处理

const nestedObj = {
    user: {
        name: 'Bob',
        age: 30
    },
    location: {
        city: 'New York',
        country: 'USA'
    }
};

const nestedEntries = Object.entries(nestedObj).flatMap(([key, value]) =>
    Object.entries(value).map(([subKey, subValue]) => [`${key}.${subKey}`, subValue])
);

console.log(nestedEntries);
// 输出: [['user.name', 'Bob'], ['user.age', 30], ['location.city', 'New York'], ['location.country', 'USA']]

4. 结合其他方法进行数据处理

使用 reduce 方法结合 Object.entries 对对象进行复杂的数据处理

const obj = { apple: 10, banana: 20, cherry: 30 };

const total = Object.entries(obj).reduce((sum, [key, value]) => sum + value, 0);
console.log(total);
// 输出: 60

4. 与 URLSearchParams 结合生成URL参数

`Object.entries` 和 `URLSearchParams` 可以结合使用来生成 URL 参数。以下是一个示例：

const paramsObject = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};
// 使用 Object.entries 将对象转换为键值对数组
const paramsArray = Object.entries(paramsObject);
// 使用 URLSearchParams 将键值对数组转换为 URL 参数
const urlParams = new URLSearchParams(paramsArray);
// 获取生成的 URL 参数字符串
const queryString = urlParams.toString();
console.log(queryString); // 输出: "name=John%20Doe&age=30&city=New%20York"

5.将对象转换为Map类型

`Object.entries()` 方法可以将对象的键值对转换为数组形式，然后可以利用 `Map` 构造函数将其转换为 `Map` 对象。以下是一个示例：

const obj = {
  a: 1,
  b: 2,
  c: 3
};
// 使用 Object.entries() 转换对象为数组
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]
// 将数组转换为 Map
const map = new Map(entries);
console.log(map); // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }
// 访问 Map 中的值
console.log(map.get('b')); // 2

在这个例子中，`Object.entries(obj)` 将对象转换为一个包含键值对的数组，然后通过 `new Map(entries)` 创建了一个 `Map` 对象。

Object.fromEntries()

用于将键值对数组或Map对象转换为普通对象的方法，是Object.entries()的逆操作。

将键值对数组（如[['key1', 'value1'], ['key2', 'value2']]）或Map实例转换为对象，格式为{ key1: 'value1', key2: 'value2' }。

应用场景

1. 从数组创建对象

const entries = [['name', 'Alice'], ['age', 25]];
const obj = Object.fromEntries(entries);
// { name: 'Alice', age: 25 }

2. Map/数组转对象

将 Map 或二维数组快速转换为普通对象

const map = new Map([['color', 'blue'], ['size', 'medium']]);
const obj = Object.fromEntries(map);
// { color: 'blue', size: 'medium' }

3. URL 查询参数解析

与 URLSearchParams 结合，将查询字符串转为对象

const queryString = 'name=Alice&age=25';
const params = new URLSearchParams(queryString);
const obj = Object.fromEntries(params);
// { name: 'Alice', age: '25' }

​4. 数据清洗与重构

过滤或转换对象属性，例如仅保留特定字段或数值计算

// 过滤属性
const filtered = Object.fromEntries(Object.entries(obj).filter(([k]) => k !== 'id'));
// 数值翻倍
const doubled = Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v * 2]));

总结

• Object.entries()适用于需要以数组形式操作对象属性的场景（如遍历、转换数据结构）
• ​Object.fromEntries() 擅长将键值对列表还原为对象，尤其在处理表单、URL 参数或 Map 结构时非常高效。

两者结合使用可实现对象属性的灵活转换与重构。