背景
随着 JavaScript 语言的不断发展，ES7 中新增了许多语言特性，其中包括 Object.values() 方法。该方法可以返回一个给定对象自身可枚举属性的值的数组，不包括继承的属性。
然而，由于不是所有浏览器都支持 Object.values() 方法，需要使用 Babel 编译器来将 ES7 中的 Object.values() 方法转换为 ES5 中可运行的语法。
Babel 编译
Babel 是一种 JavaScript 编译器，可以将新版本的 JavaScript 代码转换为向后兼容的代码。通过使用 Babel，我们可以使用新版本 JavaScript 语言特性，而不需要担心浏览器兼容性问题。
为了编译 ES7 中的 Object.values() 方法，我们需要在项目中引入 @babel/polyfill 和 @babel/plugin-transform-object-entries，然后在 babel.config.js 中添加以下配置：
module.exports = { presets: [ '@babel/preset-env' ], plugins: [ '@babel/plugin-transform-object-entries' ] };
以上配置文件旨在将 ES7 中的 Object.values() 方法转换为 ES5 中所支持的 Object.entries() 和 Array.prototype.map() 方法。其中，@babel/preset-env 用于将 ES7 转换为 ES5，而 @babel/plugin-transform-object-entries 则将对象转换为一个二元数组，以便使用 Array.prototype.map() 方法。
使用方法
经过 Babel 编译后，我们可以在项目中使用 Object.values() 方法了。
-- -------------------- ---- ------- -- --- -- ----- --- - - -- -- -- -- -- - -- ----- ------ - ------------------- -- ---- --- -- ---- -------- --- --- - - -- -- -- -- -- - -- --- ------ - -------------------------------- ------ - --- ----- - -------------------- --- - - --------- ------ -- ---展开代码
如上所示，我们只需要在项目中正常使用 Object.values() 方法即可，Babel 会自动将其转换为新特性的等价语法。
总结
通过使用 Babel 编译器，我们可以将 ES7 中的 Object.values() 方法转换为向后兼容的语法，以便在不同浏览器和平台上使用。同时，该编译方法对于其他新特性的编译也同样适用，为前端开发提供了更多可能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f09b47d4982a6eb81394a
