Babel 支持 Object.entries

Babel support for Object.entries

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

不过不知道有没有babel preset支持。由于上面链接的 GitHub 存储库说这是第 3 阶段的提案,我认为它会是 babel-preset-stage-3 的一部分,但似乎不是。

是否有任何 Babel 预设(甚至插件?)让我今天可以使用 Object.entries?

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

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

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

更新

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

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

使用babel,安装

  1. babel-preset-env
  2. babel-plugin-transform-runtime

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

根据模块的建议,配置 .babelrc 如下:

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

更新:

如评论中所述,您可以使用 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)
)

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

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

然后添加到package.json

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