一、简单的数字数组排序
const numArr = [2, 6, 4, 3, 8];
const sortNumber = (a, b) => {
return a - b;
};
console.log(numArr.sort(sortNumber));//[2, 3, 4, 6, 8]
二、数组对象排序
const arrObj = [
{ id: 1, num: 222 },
{ id: 3, num: 443 },
{ id: 5, num: 111 },
{ id: 2, num: 100 },
{ id: 4, num: 444 }
];
const sortObject = (arr, key) => {
return arr.sort((a, b) => {
return a[key] - b[key];
})
};
console.log(sortObject(arrObj, "num"));
三、对象数组按照另一个数组排序
借鉴博客地址:JavaScript ES6实现一个对象数组按照另一个对象数组进行排序
//arr2按照arr1的buyerId顺序排序
const arr1 = [
{ buyerId: "1", name: "WW" },
{ buyerId: "2", name: "RR" },
{ buyerId: "3", name: "OO" },
{ buyerId: "4", name: "ll" },
{ buyerId: "5", name: "DD" },
{ buyerId: "6", name: "SS" }
];
const arr2 = [
{ buyerId: "4", totalPrice: "7.00" },
{ buyerId: "3", totalPrice: "90.00" },
{ buyerId: "2", totalPrice: "10.00" },
{ buyerId: "6", totalPrice: "70.00" },
{ buyerId: "1", totalPrice: "9.00" },
{ buyerId: "5", totalPrice: "60.00" }
];
const curArr = arr1.map(item => { return item.buyerId });
arr2.sort((a, b) => {
const prev = curArr.indexOf(a.buyerId);
const next = curArr.indexOf(b.buyerId);
return prev - next;
});
console.log(arr2, 'arr2');
四、对象数组按照另一个对象数组的排序而变化
方法1:
- 创建两个key值,用于合并两个数组;
- 为新数组mergeArr排序(利用案例二的思路);
- 创建两个新数组arr3New、arr4New 用于接收排序过的值。 具体代码如下:
//数组对象排序的方法
const sortObject = (arr, key) => {
return arr.sort((a, b) => {
return a[key] - b[key];
})
};
const arr3 = [2, 6, 4, 3, 8];
const arr4 = [10, 9, 8, 7, 6];
const SY1 = Symbol("arr3"), SY2 = Symbol("arr4");
const mergeArr = arr3.map((item, index) => {
//注意:Symbol 值作为对象属性名时,不能用点运算符
return {
[SY1]: item,
[SY2]: arr4[index]
}
});
const sortArr = sortObject(mergeArr, SY1);
const arr3New = [], arr4New = [];
sortArr.forEach(item => {
arr3New.push(item[SY1]);
arr4New.push(item[SY2]);
});
console.log(arr3New);//[2, 3, 4, 6, 8]
console.log(arr4New);//[10, 7, 8, 9, 6]
方法2:
- 记住第一个数组的下标,将其转为对象;
- 为新数组arr3Copy排序(利用案例二的思路);
- 创建两个新数组arr5New、arr6New 用于接收排序过的值。 具体代码如下:
const arr3Copy = arr3.map((item, index) => {
return { value: item, index };
});
const resArr = sortObject(arr3Copy, "value");
const arr5New = [], arr6New = [];
resArr.forEach(item => {
arr5New.push(item.value);
arr6New.push(arr4[item.index]);
})
console.log(arr5New);//[2, 3, 4, 6, 8]
console.log(arr6New);//[10, 7, 8, 9, 6]
扩展知识:Symbol
点运算符后面总是字符串,不会读取mySymbol作为标识名所指代的那个值,导致obj的属性名实际上是一个字符串,而不是一个 Symbol 值。出自 阮一峰老师的 《ECMAScript 6 入门》
const ONE = Symbol("1");
const obj = { ONE: 1 };//这里的obj把ONE当成了字符串
obj[ONE] = 2;
console.log(obj[ONE]);//2
console.log(obj.ONE);//1