Question

我想将对象的键的顺序更改为给定的键（先是男性，然后是孩子，然后是女性）有一个物体：

const types = [
    {female: 100, male: 200, children: 150},
    {female: 100, male: 200, children: 150}
];

我从后端获取对象，在这里我需要将应用前端的按键顺序更改为male, children, female。我从来没有遇到过这个问题，我尝试了几种方法，没有成功。我将非常感谢您的帮助。对象字段的示例输出代码：

{types && (
  <ul>_.map(Object.keys(types), key => (
    <li key={_.uniqueId(`${key}`)}>
      <span>{key, types[key]}</span>
    </li>
  </ul>
)}

100 female
200 male
150 children

结论看起来像这样。有必要更改为：

200 male
150 children
100 female

非常感谢您！

Answer 1

您可以使用JSON.stringify（value [，replacer [，space]]）格式化字符串，然后再次转换为json

const types = [
    {female: 100, male: 200, children: 150},
    {female: 100, male: 200, children: 150}
];

var newjson = JSON.parse(JSON.stringify( types , ["male","female","children"]));
console.log(newjson);

Answer 2

您可能想使用Map而不是对象来存储来自后端的数据。 JS对象不保证键的顺序（无序）。即使JS引擎实现具有IC，这也可以使您欺骗顺序永远不变。我在下面引用了ECMA Script第三版，它将使它更加清晰。

4.3.3 对象：对象是对象类型的成员。它是属性的无序集合，每个属性都包含一个基本体值，对象或功能。存储在的属性中的函数对象称为方法。

自ECMAScript 2015起，可以使用Map对象。映射与对象共享一些相似之处，并保证键顺序：

Map按插入顺序迭代其元素，而迭代没有为对象指定顺序。

Answer 3

我认为依赖对象属性的顺序确实不是一个好主意。由于它是使用Map来自后端的对象，因此无法解决您的问题。

最简单的方法可能是按照您要显示的顺序排列一个带有属性名称的数组。它为您提供了所需的所有灵活性，并消除了对象对订单的依赖。

const 
  data = [
    {female: 100, male: 200, children: 150},
    {female: 101, male: 201, children: 151}
  ],
  // This array controls the order the data item properties
  // will be added to the DOM.
  displayOrder = ['male', 'female', 'children'];

/**
 * Returns a string with the values of the provided item
 * wrapped in markup for TD elements.
 */ 
function createItemCells(item) {
  // Iterate of the properties to display in the table, this ensures
  // they'll be added in the desired order.
  return displayOrder.reduce((result, key) => {
    // Append a TD element for the current item property.
    return result + `<td>${item[key]}</td>`;
  }, '');
}

const
  // Iterate over the items in the data array and create a string
  // per item to show the data in the table.
  rows = data.reduce((output, item) => {  
    // Append a new row to the output.
    return output + `<tr>${ createItemCells(item) }</tr>`;
  }, '');
  
// Insert the generated rows into the table body in the DOM.
document.getElementById('output').innerHTML = rows;

<table>
  <thead>
    <tr>
      <th>Male</th>
      <th>Female</th>
      <th>Children</th>
    </tr>
  </thead>
  <tbody id="output"></tbody>
</table>

Answer 4

情况：我们需要以特定顺序在HTML列表中显示对象的属性和值。

问题：

1）不保证100％的属性顺序，具体取决于引擎的实现。

2）数据来自JSON格式的后端，因此我们无法代表Map之类的复杂对象，因为JSON不知道什么是地图。

解决方案：

1）完全写出模板：

const types = [
  {female: 100, male: 200, children: 150},
  {female: 100, male: 200, children: 150}
];
const html = [
  '<ul>',
  ...types.map( item => `<li>${ item.male } male<\/li><li>${ item.children } children<\/li><li>${ item.female } female<\/li>` ),
  '</ul>'
].join( '' );
console.log( html );

2）提供一个包含正确循环顺序的数组：

const types = [
  {female: 100, male: 200, children: 150},
  {female: 100, male: 200, children: 150}
];
const proper_order = [ 'male', 'children', 'female' ];
const create_html = function( data, order ) {
  return [
    '<ul>',
    ...types.map( item => order.map( property_name => `<li>${ item[ property_name ] } ${ property_name }<\/li>` ).join( '' )),
    '</ul>'
  ].join( '' );
};
const html = create_html( types, proper_order );
console.log( html );

免责声明：我正在使用array.join（''）;创建html字符串的方法仅作为示例。建议使用适当的模板引擎。相同的逻辑仍然适用。

如何更改JS对象键顺序

4 个答案: