时间戳

首页 > 解决方案 > 从对象数组中获取对象键的最佳实践是什么？

javascript - 从对象数组中获取对象键的最佳实践是什么？

问题描述

我有一系列这样的产品：

[
    {
        "productId":1001,
        "productCategory":"Category 3",
        "productName":"Product 1",
        "productImage":"https://picsum.photos/400?image=976",
        "productStock":false,
        "productPrice":"1318.287"
    },{
        "productId":1002,
        "productCategory":"Category 3",
        "productName":"Product 2",
        "productImage":"https://picsum.photos/400?image=765",
        "productStock":false,
        "productPrice":"4753.309"
    },{
        "productId":1003,
        "productCategory":"Category 3",
        "productName":"Product 3",
        "productImage":"https://picsum.photos/400?image=37",
        "productStock":false,
        "productPrice":"338.270"
    },
]

我想在数组中获取对象内部的键tabaleHeader和数据tableData

我已经尝试过这个及其工作：

const [tableData, setTableData] = useState(data); // data is an array of products
const tableHeader = Object.keys(tableData[0]);

我的问题是这是一个好习惯还是有更好的方法来做到这一点？

标签： javascriptreactjsecmascript-6

解决方案

不，我不会解构对象，因为它是不必要的。使用下面的 JSON，我将展示获取密钥的方式。我通过使用来做到这一点Array.prototype.map

let data = [
  {
    "productId": 1001,
    "productCategory": "Category 3",
    "productName": "Product 1",
    "productImage": "https://picsum.photos/400?image=976",
    "productStock": false,
    "productPrice": "1318.287"
  },
  {
    "productId": 1002,
    "productCategory": "Category 3",
    "productName": "Product 2",
    "productImage": "https://picsum.photos/400?image=765",
    "productStock": false,
    "productPrice": "4753.309"
  },
  {
    "productId": 1003,
    "productCategory": "Category 3",
    "productName": "Product 3",
    "productImage": "https://picsum.photos/400?image=37",
    "productStock": false,
    "productPrice": "338.270"
  }
];
let keys = data.map(i=>Object.keys(i));
console.log(keys);

//Or if you wanted the values
let vals = data.map(i=>Object.values(i));
console.log(vals);

推荐阅读