当前位置：首页 > news >正文

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

news 2026/6/11 11:59:59

`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]));