前言
随着 ECMAScript 的不断更新和发展，JavaScript 的标准也在不断地更新。在 ECMAScript 2017 (ES8) 中，我们看到了一些新的内置对象方法，比如 Object.values 和 Object.entries。这些新方法是为了让开发者更加方便地操作对象数据，在某些情况下，它们甚至可以替代一些传统的写法。然而，这些新方法也带来了一些问题，特别是在现有项目中使用时，很容易出现兼容性问题。本文将介绍如何克服由 ECMAScript 2017 (ES8) 引起的内置对象方法更改的问题。
问题描述
让我们先来看一下 Object.values 和 Object.entries 这两个新的内置对象方法。它们的作用分别是将对象的值和键值对转换为数组。例如，我们可以使用 Object.values 将一个对象的值转换为数组：
const obj = {a: 1, b: 2, c: 3};
const arr = Object.values(obj);
console.log(arr); // [1, 2, 3]这个例子非常简单，但是它展示了 Object.values 方法的基本用法。当然，我们也可以使用 Object.entries 将一个对象的键值对转换为数组：
const obj = {a: 1, b: 2, c: 3};
const arr = Object.entries(obj);
console.log(arr); // [['a', 1], ['b', 2], ['c', 3]]这个例子同样也很简单，但是它展示了 Object.entries 方法的基本用法。需要注意的是，Object.entries 返回的是一个由键值对数组组成的数组，而每个键值对数组又由两个元素组成，分别是键和值。
问题出现在哪里呢？这些新的内置对象方法在 ES8 中引入，但是在之前的版本中是没有的。这就意味着如果你的项目中使用了这些新的方法，那么它只能在支持 ES8 标准的浏览器或者环境中运行，否则就会抛出错误。这就为我们带来了一些问题。
解决方案
我们可以使用一些方法来解决这个问题，使我们的代码可以运行在不支持这些新方法的浏览器或环境中。接下来我们将介绍一些方法，它们既方便易用又能够有效地解决问题。
- 使用 Polyfill
Polyfill 是一种将新的 API 或者特性提供给旧的环境的方法。在简单的情况下，你可以使用一个 Polyfill 来提供 Object.values 或者 Object.entries 的实现，这样你的代码就可以运行在 ES6 或者更早版本的环境中了。下面是一个简单的 Polyfill 实现：
-- -------------------- ---- -------
-- ---------------- -
------------- - ------------- -
------ ------------------------ -- ----------
-
-
-- ----------------- -
-------------- - ------------- -
------ ------------------------ -- ----- -----------
-
-这个 Polyfill 实现中使用了 map 和 arrow function，这些新的特性都是在 ES6 中引入的。但是，由于 map 和 arrow function 这些特性早在 ES6 中就得到了广泛的支持，所以这个 Polyfill 实现可以运行在大多数环境中。
- 使用 Babel
Babel 是一个 JavaScript 编译器，它可以将 ES6+ 的代码编译成 ES5 的代码。在使用 Babel 时，你可以使用一些插件或者预设来支持 Object.values 和 Object.entries。下面是一个简单的使用 Babel 的示例：
首先，在你的项目中安装 Babel：
npm install --save-dev @babel/core @babel/preset-env
然后，在你的 .babelrc 文件中配置 Babel：
{
"presets": [
["@babel/preset-env", {
"targets": "last 1 version, > 1%, ie 11"
}]
]
}这个配置文件中的 targets 选项指定了支持的目标环境，这里我们指定了最近一个版本的浏览器，全球使用率超过 1% 的浏览器，以及 IE 11。当然，你可以根据你的具体项目需求进行配置。
接下来，你就可以使用 Object.values 和 Object.entries 了：
const obj = {a: 1, b: 2, c: 3};
const arr = Object.values(obj);
console.log(arr); // [1, 2, 3]
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]这里的代码已经经过了 Babel 的编译，所以它可以运行在 ES5 环境中了。
- 手写实现
如果你不想使用 Polyfill 或者 Babel，你也可以手写实现 Object.values 和 Object.entries。事实上，这些新的方法的实现也并不复杂。以下是一个手写实现的示例：
-- -------------------- ---- ------- -------- ----------------- - -- ------ ------ --- ------ ------------------------ -- ---------- - -------- ------------------ - -- ------ ------ --- ------ ------------------------ -- ----- ----------- -
这里的实现与 Polyfill 的实现非常相似，它们都使用了 map 和 arrow function。这里的 objectValues 和 objectEntries 两个函数并没有修改 Object.prototype，它们只是简单地将对象的值或者键值对转换成数组并返回。
结论
在使用 ECMAScript 2017 (ES8) 中引入的内置对象方法时，我们需要考虑到兼容性的问题。通过使用 Polyfill、Babel 或者手写实现，我们可以在不支持新方法的环境中也能够使用这些新方法。这些方法的实现非常简单，所以我们不需要担心性能问题。同时，这些方法还可以使我们的代码变得更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cbcee9babaf620fb23a97