[英]Sort array of objects using other arrays
我创建了这个对象数组:
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',
}
]
我想要一个带有对象的新数组,顺序如下:
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' } ]
情况一团糟,顺序与数组中的顺序不一样:颜色被反转,亮度值也被反转。 然后,我认为两次(或多次)调用此函数会产生问题。 有办法解决吗? 存在一种明智的方式来做我需要的事情?
您可以使用逻辑OR ||
链接所需的订单。 以及指标的差异。
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; }
一种使用功能和给定顺序数组对副本进行排序的方法。
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; }
排序的颜色中的每个对象的指数差colorOrder
在每个对象的索引的差异,和备用的亮度brightnessOrder
。
请记住, .sort
进行原位sorted
与palette
是同一对象。 如果您不想突变原始数组,请先对其进行克隆。
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"}]; const colorOrder = ['Blue', 'Magenta']; const brightnessOrder = ['Principal', 'Soft', 'Medium']; const sorted = palette.sort((a, b) => ( colorOrder.indexOf(a.color) - colorOrder.indexOf(b.color) || brightnessOrder.indexOf(a.brightness) - brightnessOrder.indexOf(a.brightness) )); console.log(sorted);
如果结果取反,则可以尝试将排序条件取反
return order.indexOf(A) > order.indexOf(B) ? 1 : -1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.