javascript - 使用其他数组对对象数组进行排序
问题描述
我创建了这个对象数组:
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; }
推荐阅读
- javascript - For 循环 sumArray 的问题
- c++ - 为什么我的对象声明不调用默认构造函数?
- python - 使用 5 人组合查找包含特定 5 人组合的数据帧的子集,每列标识 5 人中的一个
- java - 我怎样才能阻止这些汽车相互碰撞?
- r - 如何将相同的过滤器应用于 50 多个数据帧?
- python - Python将两个两行组合成单行
- ionic-framework - 离子链接侧菜单项到外部网站
- python - 如何在 If 语句中发出通知但在 Python 中继续 While 循环?
- stripe-payments - 为小额交易充值客户余额
- javascript - 如何在 Jest 中正确模拟类模块?