如何在 JavaScript 中通过布尔属性对对象数组进行排序

JavaScript7个月前发布 admin
1,146 0

要在 JavaScript 中按布尔属性对对象数组进行排序,请使用回调作为参数对数组调用 sort() 方法。 在函数中,使用布尔属性返回计算结果为正数、负数或零的表达式。

这将按布尔属性对数组进行就地排序,即:

const trueFirst = users.sort((a, b) => b.boolProp – a.boolProp);

const falseFirst = users.sort((a, b) => a.boolProp – b.boolProp);

举个例子:

const users = [
{ name: ‘Kate’, premium: false },
{ name: ‘Bob’, premium: true },
{ name: ‘Jeff’, premium: false },
{ name: ‘Samantha’, premium: true },
];

const premiumFirst = users.sort((a, b) => b.premium – a.premium);

/*
[
{ name: ‘Bob’, premium: true },
{ name: ‘Samantha’, premium: true },
{ name: ‘Kate’, premium: false },
{ name: ‘Jeff’, premium: false }
]
*/

console.log(premiumFirst);

const nonPremiumFirst = users.sort((a, b) => a.premium – b.premium);

/*
[
{ name: ‘Kate’, premium: false },
{ name: ‘Jeff’, premium: false },
{ name: ‘Bob’, premium: true },
{ name: ‘Samantha’, premium: true }
]
*/

console.log(nonPremiumFirst);

Array sort() 方法采用回调函数作为参数。 它使用从此回调返回的值来确定对值进行排序的顺序。

对于数组中的每个项目对,a 和 b:

如果返回值为负数,则在排序数组中 a 被放置在 b 之前。

如果值为正,则将 b 放在 a 之前。

如果值为 0,则 a 和 b 的顺序不变。

const arr = [5, 3, 8, 1, 7];

// Sort in ascending order
arr.sort((a, b) => a – b);

console.log(arr); // [ 1, 3, 5, 7, 8 ]

// Sort in descending order
const desc = arr.sort((a, b) => b – a);

console.log(desc); // [ 8, 7, 5, 3, 1 ]

因为我们对布尔值使用了减法运算符 (-),所以在减法发生之前它们被强制转换为数字。 真值被强制为 1,假值被强制为 0。

console.log(true + true); // 2

console.log(true + false); // 1

console.log(false + false); // 0

了解 sort() 方法和布尔强制转换的工作原理后,很容易理解将布尔属性值为 true 的对象放置在 false 对象之上的排序方式,反之亦然。

按布尔属性对对象数组进行排序而不进行突变
sort() 方法对数组进行就地排序,这意味着它会被修改。 为了防止这种情况,我们可以使用扩展语法 (…) 来创建数组的浅表副本以进行排序:

const users = [
{ name: ‘Kate’, premium: false },
{ name: ‘Bob’, premium: true },
{ name: ‘Jeff’, premium: false },
{ name: ‘Samantha’, premium: true },
];

// 👇 Clone array with spread syntax
const premiumFirst = […users].sort((a, b) => b.premium – a.premium);

/*
[
{ name: ‘Bob’, premium: true },
{ name: ‘Samantha’, premium: true },
{ name: ‘Kate’, premium: false },
{ name: ‘Jeff’, premium: false }
]
*/

console.log(premiumFirst);

/*
Original not modified:
[
{ name: ‘Kate’, premium: false },
{ name: ‘Bob’, premium: true },
{ name: ‘Jeff’, premium: false },
{ name: ‘Samantha’, premium: true }
]
*/

console.log(users);

通过避免突变,我们可以使代码更具可读性、可预测性和模块化。

© 版权声明

相关文章

暂无评论

暂无评论...