Babel 对 Object.entries 的支持

Posted 2023-02-22

【中文标题】Babel 对 Object.entries 的支持

【英文标题】：Babel support for Object.entries

【发布时间】：2016-05-07 12:29:48

【问题描述】：

我正在查看stage 3 proposal of Object.values/Object.entries，我真的很想在我当前的 javascript 项目中使用它。

但是，我不知道是否有任何 Babel 预设支持它。由于上面链接的 GitHub 存储库说这是第 3 阶段的提案，我认为它会成为 babel-preset-stage-3 的一部分，但似乎不是。

是否有任何 Babel 预设（甚至插件？）可以让我今天使用 Object.entries？

【问题讨论】：

babeljs.io/docs/usage/polyfill , github.com/zloirock/core-js#ecmascript-7-proposals

@FelixKling：谢谢，但恐怕我真的不知道如何处理您链接的信息！

Babel polyfill 仅使用 core-js，但我不确定哪些功能。如果你只想支持Object.entries，只需为此加载 core-js 的 polyfill。

@FelixKling：我终于知道怎么用了！请添加您的评论作为答案，我会很乐意接受它！ :)

【参考方案1】：

我所做的是安装core-js，然后在我的文件顶部调用它：

require('core-js/fn/object/entries');

这使Object.entries 可用。感谢@FelixKling。

更新

在core-js@3中，导入路径发生了变化：

require('core-js/features/object/entries');

【参考方案2】：

使用babel，安装

babel-preset-env babel-plugin-transform-runtime

支持 Object.values/Object.entries 以及其他 *ES20** 功能。

根据模块的建议，配置 .babelrc 如下：

  "plugins": ["transform-runtime"],
  "presets": ["env"]

【讨论】：

我在babeljs.io/docs/plugins/preset-es2017 中没有看到对Object.entries 的支持。支持是否移至另一个预设？ github.com/bettiolo/babel-preset-es2017/issues/37 似乎确认此功能不在预设范围内。

我的目标是浏览器。在这种情况下，您需要使用babeljs.io/docs/usage/polyfill。您能否更新答案以解决用户应该为节点与浏览器做些什么？

babel-polyfill 目前确实支持Object.entries，当定位浏览器时，您只需在应用程序入口点（根 index.js）中包含import "babel-polyfill";

babel-preset-es2017 现已弃用，改用 babel-preset-env

【参考方案3】：

更新：

如 cmets 中所述，您可以通过使用 map 函数而不是 reduce 来提高性能。

请注意，代码区分大小写 (object != Object)。

// Object.values

var objectToValuesPolyfill = function(object) 
    return Object
             .keys(object)
             .map(
                  function(key) 
                    return object[key];
                  
              );


Object.values = Object.values || objectToValuesPolyfill;

// Object.entries

var objectToEntriesPolyfill = function(object) 
    return Object
             .keys(object)
             .map(
                  function(key) 
                    return [key, object[key]];
                  
              );


Object.entries = Object.entries || objectToEntriesPolyfill;

用法：

// es6

Object.values = Object.values || (x => Object.keys(x).map(k => x[k]));
Object.entries = Object.entries || (x => Object.keys(x).map(k => [k, x[k]]));

// es5

Object.values = Object.values || function(x) 
    return Object.keys(x).map(function(k) 
        return x[k];
    )
;

Object.entries = Object.values || function(x) 
    return Object.keys(x).map(function(k) 
        return [k, x[k]];
    )
;


const a = 
  key: "value",
  bool: true,
  num: 123


console.log(
  Object.values(a)
)

console.log(
  Object.entries(a)
)

【讨论】：

您实际上可以在这里使用map 而不是reduce，这有点简单：.map(key => object[key])（其中object 是您的x）。另外，我假设您在给变量一个字母名称时会追求性能而不是可读性，但由于这是一个教育答案，我建议使用逻辑名称并添加关于缩短它们以提高性能的评论。

【参考方案4】：

我在 2020 年底找到的另一种替代解决方案，适用于 IE11。

npm install --save-dev babel-plugin-transform-es2017-object-entries

然后添加到package.json中

"babel": 
    "plugins": [
        "transform-es2017-object-entries"
    ]