Question

好吧，我已经建立了几个星期的网络应用程序，一切都很好。我得到了我必须在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>字段。如果有一个解决方案不需要我重建一切，那就太棒了。

有简单的解决方案吗？解决这个问题？

提前致谢。

Answer 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;
  };

Answer 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);

Answer 3

import 'core-js/es7/object';

这对我有用。

Answer 4

使用像这样的垫片/填充物：https://github.com/es-shims/Object.entries

Answer 5

以下是使用Array.prototype.reduce的一种简洁的polyfill，它相当巧妙：

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

Internet Explorer和ReactJS的Object.entries（）替代方案

5 个答案: