使用其他数组对对象数组进行排序

问题描述：

我创建了这个对象数组:

I create this array of objects:

const palette = [
  {
    color: 'Blue',
    brightness: 'Soft',
  },
  {
    color: 'Blue',
    brightness: 'Medium',
  },
  {
    color: 'Blue',
    brightness: 'Principal',
  },
  {
    color: 'Magenta',
    brightness: 'Soft',
  },
  {
    color: 'Magenta',
    brightness: 'Medium',
  },
  {
    color: 'Magenta',
    brightness: 'Principal',
  }
]

我想要一个带有对象的新数组，其顺序如下:

I want a new array with objects in this order:

const colorOrder = ['Blue', 'Magenta']
const brightnessOrder = ['Principal', 'Soft', 'Medium']

这就是我想要的结果:

const colors = [
  {
    color: 'Blue',
    brightness: 'Principal',
  },
  {
    color: 'Blue',
    brightness: 'Soft',
  },
  {
    color: 'Blue',
    brightness: 'Medium',
  },
  {
    color: 'Magenta',
    brightness: 'Principal',
  }
  {
    color: 'Magenta',
    brightness: 'Soft',
  },
  {
    color: 'Magenta',
    brightness: 'Medium',
  },
]

我尝试使用此功能:

function sortArrayByAnotherArray(array: any[], order: number[] | string[], key: string) {
  const newArray = array.slice(0).sort((a, b) => {
    const A = a[key]
    const B = b[key]
    return order.indexOf(A) < order.indexOf(B) ? 1 : -1
  })
  return newArray
}

我这样称呼它:

const palette1 = sortArrayByAnotherArray(
  palette,
  brightnessOrder,
  'brightness'
)
const palette2 = sortArrayByAnotherArray(
  palette1,
  colorOrder,
  'color'
)

console.log('\n', palette)

console.log('\n', brightnessOrder)
console.log(palette1)

console.log('\n', colorOrder)
console.log(palette2)

结果是:

`
` [ { color: 'Blue', brightness: 'Soft' },
  { color: 'Blue', brightness: 'Medium' },
  { color: 'Blue', brightness: 'Principal' },
  { color: 'Magenta', brightness: 'Soft' },
  { color: 'Magenta', brightness: 'Medium' },
  { color: 'Magenta', brightness: 'Principal' } ]
`
` [ 'Principal', 'Soft', 'Medium' ]
[ { color: 'Blue', brightness: 'Medium' },
  { color: 'Magenta', brightness: 'Medium' },
  { color: 'Blue', brightness: 'Soft' },
  { color: 'Magenta', brightness: 'Soft' },
  { color: 'Blue', brightness: 'Principal' },
  { color: 'Magenta', brightness: 'Principal' } ]
`
` [ 'Blue', 'Magenta' ]
[ { color: 'Magenta', brightness: 'Medium' },
  { color: 'Magenta', brightness: 'Soft' },
  { color: 'Magenta', brightness: 'Principal' },
  { color: 'Blue', brightness: 'Medium' },
  { color: 'Blue', brightness: 'Soft' },
  { color: 'Blue', brightness: 'Principal' } ]

这是一团糟，顺序与数组中的顺序不一样:颜色被反转，亮度值也被反转. 然后，我认为两次(或多次)调用此函数会产生问题. 有办法解决吗?存在一种聪明的方式来做我需要的事吗?

It's a mess, the order is not like the one in the arrays: colors are inverted and also brightness values. Then I think that call this function twice (or more) creates problems. Is there a way to solve this? Exists a smarted way to do what I need?

答

您可以将所需订单与

You could chain the wanted order with logical OR || and the deltas of the indices.

const
    palette = [{ color: 'Blue', brightness: 'Soft' }, { color: 'Blue', brightness: 'Medium' }, { color: 'Blue', brightness: 'Principal' }, { color: 'Magenta', brightness: 'Soft' }, { color: 'Magenta', brightness: 'Medium' }, { color: 'Magenta', brightness: 'Principal' }],
    colorOrder = ['Blue', 'Magenta'],
    brightnessOrder = ['Principal', 'Soft', 'Medium'];

palette.sort((a, b) => 
    colorOrder.indexOf(a.color) - colorOrder.indexOf(b.color) ||
    brightnessOrder.indexOf(a.brightness) - brightnessOrder.indexOf(b.brightness)
);

console.log(palette);

.as-console-wrapper { max-height: 100% !important; top: 0; }

一种使用函数和给定的顺序数组对副本进行排序的方法.

An approach to sort a copy with a function and given order arrays.

function sortArrayByAnotherArrays(data, orders) {
    const
        getObject = array => array.reduce((r, k, i) => (r[k] = i + 1, r), {}),
        objects = orders.map(([k, a]) => [k, getObject(a)]);

    return data
        .slice()
        .sort((a, b) => {
            var v;
            objects.some(([k, o]) => v = o[a[k]] - o[b[k]]);
            return v;
        });
}

const
    palette = [{ color: 'Blue', brightness: 'Soft' }, { color: 'Blue', brightness: 'Medium' }, { color: 'Blue', brightness: 'Principal' }, { color: 'Magenta', brightness: 'Soft' }, { color: 'Magenta', brightness: 'Medium' }, { color: 'Magenta', brightness: 'Principal' }],
    colorOrder = ['Blue', 'Magenta'],
    brightnessOrder = ['Principal', 'Soft', 'Medium'],
    ordered = sortArrayByAnotherArrays(
        palette,
        [
            ['color', colorOrder],           // [key, values in order]
            ['brightness', brightnessOrder]
        ]
    );

console.log(ordered);

.as-console-wrapper { max-height: 100% !important; top: 0; }

使用其他数组对对象数组进行排序

相关推荐