ECMAScript 2016 (ES7) 新特性之 Object.entries() 实现 Map 转为 Array-JavaScript中文网-JavaScript教程资源分享门户

简介

ECMAScript 2016 (ES7) 新特性之 Object.entries()，是 JavaScript 的一个新方法，用于将一个对象转换成一个数组。该方法返回一个由对象的自身可枚举属性[key, value]对数组形式的集合。该特性在前端开发中具有重要的作用，特别是在 Map 和 Object 函数中的数据转换方面。

Object.entries() 语法

Object.entries() 方法的语法为：

Object.entries(obj)

obj：需要转化为数组的对象。

该方法返回一个二维数组，其中包含了对象的所有可枚举属性的键值对数组。

Object.entries() 应用

在前端工作中，Object.entries() 主要应用在 Map 和 Object 函数中的数据转换方面。下面我们来具体介绍它在这两个函数中的使用方法。

Map 转为 Array

我们常常会使用到 JavaScript 中的 Map 函数，但是在某些情况下，我们需要将 Map 函数转换为数组，以便于我们可以对 Map 数据进行进一步的操作。而 Object.entries() 正好可以满足这一需求。

下面是一个示例代码：我们需要将 Map 对象使用 Object.entries() 转换为数组，并对数组进行了遍历，输出每个元素的内容。

// javascriptcn.com 代码示例
const map = new Map([
  ['name', 'John'],
  ['age', 25]
]);

const array = Object.entries(map);

array.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

该示例代码中，首先我们创建了一个 Map 对象，然后使用 Object. entries() 方法将其转换为数组。最后使用 forEach 方法对数组进行了遍历。

Object 转为 Array

同样，对于 Object 函数，也可以使用 Object. entries() 方法将其转换为数组。下面是一个示例代码，演示了如何将 Object 函数使用 Object.entries() 转换为数组，并对数组进行遍历。

// javascriptcn.com 代码示例
const obj = {
  name: 'John',
  age: 25
};

const array = Object.entries(obj);

array.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

该示例代码中，我们首先定义了一个 Object 变量，然后使用 Object.entries() 方法将其转换为数组，并使用 forEach 方法对数组进行遍历。

总结

Object.entries() 是 ECMAScript 2016 (ES7) 版本的一个新特性，它对存储数据的 Map 和 Object 函数提供了非常方便的数据转换方法。本文中，我们主要介绍了 Object.entries() 在以上两个函数中的使用方法，并提供了示例代码。希望读者有所收获，可以掌握 Object. entries() 的用法，更好地应用于实际的前端工作当中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652eafc37d4982a6ebfc0b1f