如何在Javascript中按键顺序对对象数组进行排序？_Javascript_Arrays_Object

如何在Javascript中按键顺序对对象数组进行排序？

javascript arrays object

如何在Javascript中按键顺序对对象数组进行排序？,javascript,arrays,object,Javascript,Arrays,Object,我有这样一个对象数组： const jData = [ { price: "500", count: "10", left: "150" }, { left: "75", price: "350", count: "40" }, { count: &qu

我有这样一个对象数组：

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

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

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

和orderedData数组，如下所示：

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

我试图按键对对象数组（jData）进行排序，以便键的顺序与orderedData相同

到目前为止，我的代码如下所示：

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

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

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

但是，当我试图对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"
    },
    {
      left: "75",
      price: "350",
      count: "40"
    },
    {
      count: "200",
      left: "50",
      price: "7500"
    }
  ];

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

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

我不知道是否可以用Javascript来做？感谢您提供的任何提示/建议。

正如@ggorlen所建议的，对象中键的顺序不保证。您可以迭代

orderedData

以按需要的顺序访问每个对象的键：

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

jData.map（（项）=>(

map（（key）=>{key}:{item[key]}）

));

正如@ggorlen所建议的那样，对象中键的顺序不能保证。您可以迭代

orderedData

以按需要的顺序访问每个对象的键：

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

jData.map（（项）=>(

map（（key）=>{key}:{item[key]}）

));

您可以尝试以下方法：

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

您可以尝试以下方法：

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

我想这是你最好的解决办法。看看这个

const jData=[
{
价格：“500”，
计数：“10”，
左：“150”
},
{
左：“75”，
价格：“350”，
计数：“40”
},
{
计数：“200”，
左：“50”，
价格：“7500”
}
];
const orderedData=jData.map（x=>{
返回Object.entries（x）
.sort（（[，a]，，b]）=>b-a）
.reduce（（r[k，v]）=>（{…r[k]：v}），{}）；
})
console.log（orderedData）

我想这是最适合您的解决方案。看看这个

const jData=[
{
价格：“500”，
计数：“10”，
左：“150”
},
{
左：“75”，
价格：“350”，
计数：“40”
},
{
计数：“200”，
左：“50”，
价格：“7500”
}
];
const orderedData=jData.map（x=>{
返回Object.entries（x）
.sort（（[，a]，，b]）=>b-a）
.reduce（（r[k，v]）=>（{…r[k]：v}），{}）；
})
依赖对象键顺序的console.log（orderedData）

是一种反模式，即使实现保证插入顺序也是如此。对象传统上是键值对的集合，适合按键查找，但对迭代或排序不如数组友好

像这样的表格数据的一般方法不是对对象进行排序，而是在对象旁边提供数组

orderedData

，当您需要对象的键按特定顺序时，

map

沿着

orderedData

并在行的每一列中键入。您可以将

orderedData

视为表的标题或列名，

jData

视为行数据

下面是一个概念证明，您可以推断到您的用例中（我知道您可能没有创建确切的组件

表

，但它说明了我的观点）：

const Table=（{rows，columns}）=>
{columns.map（（名称，i）=>
{name}
)}
{rows.map（（row，i）=>
{columns.map（（名称，i）=>
{行[名称]}
)}
)}
;
常量jData=[
{
价格：“500”，
计数：“10”，
左：“150”
},
{
左：“75”，
价格：“350”，
计数：“40”
},
{
计数：“200”，
左：“50”，
价格：“7500”
}
];
常量orderedData=[“价格”、“计数”、“左”]；
ReactDOM.render(
,
文件正文
);
依赖对象键顺序是一种反模式，即使实现保证插入顺序也是如此。对象传统上是键值对的集合，适合按键查找，但对迭代或排序不如数组友好
像这样的表格数据的一般方法不是对对象进行排序，而是在对象旁边提供数组orderedData
，当您需要对象的键按特定顺序时，map
沿着orderedData
并在行的每一列中键入。您可以将orderedData
视为表的标题或列名，jData
视为行数据
下面是一个概念证明，您可以推断到您的用例中（我知道您可能没有创建确切的组件表
，但它说明了我的观点）：

const Table=（{rows，columns}）=>
{columns.map（（名称，i）=>
{name}
)}
{rows.map（（row，i）=>
{columns.map（（名称，i）=>
{行[名称]}
)}
)}
;
常量jData=[
{
价格：“500”，
计数：“10”，
左：“150”
},
{
左：“75”，
价格：“350”，
计数：“40”
},
{
计数：“200”，
左：“50”，
价格：“7500”
}
];
常量orderedData=[“价格”、“计数”、“左”]；
ReactDOM.render(
,
文件正文
);

最近保证了对象密钥顺序，但这有什么区别？通常，您可以通过键而不是迭代来查找它们。这可能是一个@ggorlen，我以后需要在我的应用程序中迭代对象，我需要键：值以正确的顺序显示。@ggorlen，请你分享一段代码，我对JavaScript相当陌生，不知道如何做。对象键顺序最近得到了保证，但这有什么区别？通常，您可以通过键而不是迭代来查找它们。这可能是一个@ggorlen，我以后需要在我的应用程序中迭代对象，并且我需要按正确的顺序显示键：值。@ggorlen，你能分享一段代码吗？我对JavaScript相当陌生，不知道怎么做。