javascript Internet Explorer 和 ReactJS 的 Object.entries() 替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45849831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Object.entries() alternative for Internet Explorer and ReactJS
提问by Pablo Zehle
Well, I've been building a web application for a couple weeks now, and everything good. I got to the part that I had to test in Internet Explorer, and of all of the things that came up (all fixed except for one), Object.entries() is not supported.
好吧，我已经构建了一个 Web 应用程序几个星期了，一切都很好。我到了我必须在 Internet Explorer 中测试的部分，以及出现的所有问题（除一个外都已修复），不支持 Object.entries()。
I've been doing some research and try to come up with a simple alternative, but no luck at all.
我一直在做一些研究并试图提出一个简单的替代方案，但根本没有运气。
To be more specific, I'm bringing an object from an API, to fill options for <select></select>fields I have to filter some information, just like this:
更具体地说，我从 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>
);
}
So everything works correctly except for Internet Explorer. The thing is that in this particular component I'm rendering over 30 <select></select>fields. IF there is a solution that doesn't require me to rebuild everything, it would be amazing.
因此，除 Internet Explorer 外，一切正常。问题是在这个特定的组件中，我渲染了 30 多个<select></select>字段。如果有一个解决方案不需要我重建一切，那就太棒了。
Is there a simple solution? A way around this?
有没有简单的解决方案？有办法解决这个问题吗？
Thanks in advance.
提前致谢。
回答by jfriend00
The usual first item to research when you want to use a newer API in an older browser is whether there is a simple polyfill. And, sure enough there is a pretty simple polyfill for Object.entries()shown on the MDN doc site:
当您想在较旧的浏览器中使用较新的 API 时，通常首先要研究的项目是是否有简单的 polyfill。而且，果然有一个非常简单的 polyfillObject.entries()显示在MDN 文档站点上：
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;
};
回答by Austin AB
Nothing necessarily new to the above answer, but just different code to accomplish the same thing.
上面的答案不一定是新的，只是完成同一件事的不同代码。
Hopefully this helps anyone who stumbles upon this.
希望这可以帮助任何偶然发现此问题的人。
// 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);回答by Hector
import 'core-js/es7/object';
This works for me.
这对我有用。
回答by Mystical
Here's a concise polyfill using Array.prototype.reducein a rather clever way:
这是一个简洁的 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;
}, []);
}
回答by lukaleli
Use shim/polyfill like this one: https://github.com/es-shims/Object.entries
像这样使用 shim/polyfill：https: //github.com/es-shims/Object.entries
