如何按順序對 Javascript 中的對象數組進行排序？

Question

我有一個這樣的對象數組：

 const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];

和這樣的orderedData數組：

orderedData = ["price", "count", "left"]

我正在嘗試按鍵對對象數組（jData）進行排序，以便鍵與orderedData 的順序相同。

到目前為止，我的代碼如下所示：

import "./styles.css";

export default function App() {
  const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];

  const orderedData = ["price", "count", "left"];

  let res = jData?.flatMap((x) => Object.keys(x));

  var unique = res.filter(function (elem, index, self) {
    return index === self.indexOf(elem);
  });

  const keys = unique?.filter((key) => orderedData.includes(key));
  
  console.log(keys)

  let newData = jData.sort(
    (a, b) =>
      orderedData.indexOf(a) - orderedData.indexOf(b)
  )
  
  console.log(newData)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

密碼箱

當我在控制台記錄鍵時，我能夠從我的對象數組中獲取鍵並以正確的順序對它們進行排序

  console.log(keys); => output is 

["price"
1: "count"
2: "left"] // same order as in orderedData = ["price", "count", "left"]

但是當我試圖對我的 jData 數組進行排序以便對象中的鍵以相同的順序定位時，沒有任何變化。

let newData = jData.sort(
    (a, b) =>
      orderedData.indexOf(a) - orderedData.indexOf(b)
  )
 console.log(newData) => outputs objects with the same positioned keys.

我想要實現的是顯示這樣的對象：

const jData = [
    {
      price: "500",
      count: "10",
      left: "150"
    },
    {
      price: "350",
       count: "40",
      left: "75",
     
    },
    {
      price: "7500"
      count: "200",
      left: "50",
     
    }
  ];

不知道Javascript能不能做到？ 感謝您的任何提示/建議。

Answer 1

正如@ggorlen 建議的那樣，不能保證 object 中的鍵順序。 您可以遍歷orderedData以按您需要的順序訪問每個 object 的密鑰：

jData.map((item) => (
  <ul>
    orderedData.map((key) => <li>{key}: {item[key]}</li>)
  </ul>
));

Answer 2

你可以試試這個：

 function orderedDataByCustomizedKey(jData,orderedData) {
        const newjData = [];
        jData.forEach((item, i) => {
            const temObj = {};
            orderedData.forEach((orderedDataItem, index) => {
                temObj[orderedDataItem] = item[orderedDataItem];
            })
            newjData.push(temObj);
        })
        return newjData;
    }

Answer 3

我想這對你來說是最好的解決方案。 看一下這個。

 const jData = [ { price: "500", count: "10", left: "150" }, { left: "75", price: "350", count: "40" }, { count: "200", left: "50", price: "7500" } ]; const orderedData = jData.map(x=> { return Object.entries(x).sort(([,a],[,b]) => ba).reduce((r, [k, v]) => ({...r, [k]: v }), {}); }) console.log(orderedData)

Answer 4

依賴 object 鍵順序是一種反模式，即使實現保證插入順序也是如此。 對象傳統上是鍵值對的 collections，適合按鍵查找，但不如 arrays 對迭代或排序友好。

不是對 object 進行排序，而是像這樣處理表格數據的一般方法是在 object 旁邊提供數組orderedData ，並且當您需要按特定順序的對象鍵時，將map沿orderedData和行鍵的每個列插入 map。 您可以將orderedData視為表的標題或列名，將jData視為行數據。

這是一個概念證明，您可以將其推斷到您的用例（我意識到您可能沒有創建確切的組件Table ，但它說明了我的觀點）：

 const Table = ({rows, columns}) => <table> <tbody> {columns.map((name, i) => <th key={name + i}>{name}</th> )} {rows.map((row, i) => <tr key={i}> {columns.map((name, i) => <td key={name + i}>{row[name]}</td> )} </tr> )} </tbody> </table>; const jData = [ { price: "500", count: "10", left: "150" }, { left: "75", price: "350", count: "40" }, { count: "200", left: "50", price: "7500" } ]; const orderedData = ["price", "count", "left"]; ReactDOM.render( <Table rows={jData} columns={orderedData} />, document.body );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>