Object.entries() 替代 Internet Explorer 和 ReactJS答案

【问题标题】：Object.entries() alternative for Internet Explorer and ReactJSObject.entries() 替代 Internet Explorer 和 ReactJS
【发布时间】：2018-02-01 15:22:26
【问题描述】：

嗯，我已经构建了一个 Web 应用程序已经有几个星期了，一切都很好。我到了必须在 Internet Explorer 中测试的部分，在所有出现的问题中（除了一个之外，所有的东西都是固定的），不支持 Object.entries()。

我一直在做一些研究并试图提出一个简单的替代方案，但完全没有运气。

更具体地说，我从 API 带来一个对象，以填充 <select></select> 字段的选项，我必须过滤一些信息，就像这样：

Object.entries(this.state.filterInfo.sectorId).map(this.eachOption)

// Function
eachOption = ([key, val], i) => {
    return(
        <option value={val} key={i}>{val}</option>
    );
}

所以除了 Internet Explorer 之外，一切都正常工作。问题是在这个特定的组件中，我渲染了超过 30 个<select></select> 字段。如果有一个不需要我重建所有东西的解决方案，那就太棒了。

有简单的解决方案吗？有办法解决吗？

提前致谢。

【问题讨论】：

您是否探索过加载 polyfill？这是缺少此类功能的标准方法。
polyfill 相当琐碎。
Object.keys(this.state.filterInfo.sectorId).map(this.eachOption,this.state.filterInfo.sectorId) 您在回调中获得 this[key] 的值
documentation中显示了一个polyfill

标签： javascript reactjs ecmascript-6

【解决方案1】：

当您想在旧版浏览器中使用新版 API 时，通常首先要研究的是是否有简单的 polyfill。而且，在MDN doc site 上显示的Object.entries() 确实有一个非常简单的polyfill：

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };

【讨论】：

【解决方案2】：

上述答案不一定是新的，只是完成相同事情的不同代码。

希望这可以帮助任何偶然发现此问题的人。

// Another approach

const entriesPolyFill = (obj) => Object.keys(obj).map(key => [key, obj[key]]);


// Same thing but easier to read

function entriesPolyFill(obj) {
    const keys = Object.keys(obj);

    const keyValuePairs = keys.map(key => {
        const value = obj[key];
        
        return [key, value];
    });
    
    return keyValuePairs;
 };
 
 
// Possible usage if you don't want to alter Object class:
// Ex: Need key-value pairs to iterate over
const entries = (Object.entries ? Object.entries(obj) : entriesPolyFill(obj));

// Then do whatever you want with the Array
// ---> entries.map(), entries.filter(), etc..

// You could also move the whole thing to a function
// and always call the function so you don't have to
// write excess ternary operators in your code:

// -- In a utils file somewhere else...
export function getEntries(obj) {
  return Object.entries ? Object.entries(obj) : Object.keys(obj).map(key => [key, obj[key]]);
}

// Wherever you need to get entries in you project
import { getEntries } from "<path to utils>";

...

const entries = getEntries(obj);

【讨论】：

【解决方案3】：

import 'core-js/es7/object';

这对我有用。

【讨论】：

这代替了默认添加到 angular cli 生成项目中 pollyfills.ts 中的“core-js/es6/object”
我必须添加import 'core-js/es/object';才能让它工作

【解决方案4】：

这是一个简洁的 polyfill，以一种相当巧妙的方式使用 Array.prototype.reduce：

if(!Object.entries) 
    Object.entries = function(obj) {
        return Object.keys(obj).reduce(function(arr, key) {
            arr.push([key, obj[key]]);
            return arr;
        }, []);
    }

【讨论】：

【解决方案5】：

像这样使用 shim/polyfill：https://github.com/es-shims/Object.entries

【讨论】：