在我的 React JS 示例中，Array.from(object) 不会将对象转换为数组

Question

我试图接受一个对象并将其转换为数组，以便我可以使用 map 函数在我的 React 应用程序中呈现它。我发现有两种方法可以将对象转换为数组，一种是使用Array.from(object)，另一种是Object.values(object). 当我使用第二种方法时，我的 React 应用程序运行良好。但是如果我使用第一种方法，我得到一个空数组，但是当我控制台记录数组的长度时，它显示数组的实际长度，在我的例子中是 3。此外，undefined在我的例子中，值存储在数组中。请找到以下代码段。const Example = () => {let object = {  productName : "Desktop",  quantity: 2,  price: 4000,  length:3};let arr = Array.from(object);console.log(arr.length);console.log(arr);  return (           <div>              <ul>                                  {arr.map((item,k) => <li key={k}>{item}</li>)}              </ul>           </div>         );};ReactDOM.render(    <Example />,document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="react"></div>

Answer 1

Array.from期望一个值具有length每个元素的属性和编号属性。像这样：

var arrayLike = {

    0: "hello",

    1: "hello again",

    2: "goodbye",

    length: 3,

};

（旁注：Array.from也适用于可迭代对象，但那是另外一回事了）

你的对象不是那样的。您拥有该length属性，因此它为您提供了一个长度为 3 的数组，但您没有0、1或2属性。

如果您实际上不需要对属性名称（产品名称、数量、价格）做任何事情，那么我认为您最好使用 ，Object.values但请记住，还有它Object.entries允许您使用属性名称和它们成对的值：

{Object.entries(object).map(

    ([key, value]) => <li key={key}>{key} - {value}</li>

)}