js数组排序相关
2021/9/17 6:04:50
本文主要是介绍js数组排序相关,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
关于数组排序的方法sort
1 // 首先创建三种不同类型的数组,eg: 2 const numArr = [1, 30, 4, 21, 100000]; 3 const strArr = ['March', 'Jan', 'Feb', 'Dec']; 4 const objArr = [ 5 { name: 'Edward', value: 21 }, 6 { name: 'Sharpe', value: 37 }, 7 { name: 'And', value: 45 }, 8 { name: 'The', value: -12 }, 9 { name: 'Magnetic' }, 10 { name: 'Zeros', value: 37 } 11 ]; 12 /** 13 * 关于数组排序sort方法: 14 * Array.prototype.sort() 15 * 1.特性: 16 * 参数为比较函数compareFunction,如果省略这个函数, 17 * 则所有元素都按照转换为字符串后各个字符的Unicode位点进行排序, 18 * 且比较方式是从字符串的第一个下标开始依次比较Unicode位点大小。 19 * 2.关于compareFunction函数: 20 * 有两个参数,分别是前后两个比较元素,eg:compareFunction(a,b) {} 21 * compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。 22 * 3. 返回值为排序后的数组,注意排序是修改的原数组的顺序,并不是复制数组; 23 * sort方法的使用详情如下: 24 */ 25 26 // 1.不加参数: 27 strArr.sort(); 28 // 输出: ["Dec", "Feb", "Jan", "March"] 29 numArr.sort(); 30 // 输出: [1, 100000, 21, 30, 4] 31 // 因为未指明compareFunction,所以元素转换为字符串进行了字符的Unicode位点大小的比较 32 33 // 2. 添加比较函数参数: 34 // 2.1 仅仅适用于数字的比较函数 35 numArr.sort((a,b) => a - b); // 升序 36 // 输出:[1, 4, 21, 30, 100000] 37 numArr.sort((a,b) => b - a); // 降序 38 // 输出:[100000, 30, 21, 4, 1] 39 40 // 2.2 适用于number[]、string[]类型的排序比较回调函数 41 // 升序配置 42 const compareBaseFnUp = (a, b) => { 43 // 升序配置满足以下3条: 44 // 1. a小于b返回-1; 45 // 2. a大于b返回1; 46 // 3. a等于b返回0, ab相对位置不变 47 if (a < b) { 48 return -1; 49 } else if (a > b) { 50 return 1; 51 } else { 52 return 0; 53 } 54 } 55 // 降序配置 56 const compareBaseFnDown = (a, b) => { 57 // 降序配置满足以下3条: 58 // 1. a小于b返回1; 59 // 2. a大于b返回-1; 60 // 3. a等于b返回0, ab相对位置不变 61 if (a < b) { 62 return 1; 63 } else if (a > b) { 64 return -1; 65 } else { 66 return 0; 67 } 68 } 69 // number[]类型数组排序,升序 70 numArr.sort(compareBaseFnUp); // 输出:[1, 4, 21, 30, 100000] 71 72 // string[]类型数组排序,升序 73 strArr.sort(compareBaseFnUp); // 输出:["Dec", "Feb", "Jan", "March"] 74 75 // number[]类型数组排序,降序 76 numArr.sort(compareBaseFnDown); // 输出:[100000, 30, 21, 4, 1] 77 78 // string[]类型数组排序,降序 79 strArr.sort(compareBaseFnDown); // 输出:["March", "Jan", "Feb", "Dec"] 80 81 // 2.3 适用于object[]类型的排序比较回调函数,设置为升序,降序同理 82 const compareObjFn = (key) => (obj1, obj2) => { 83 // 内部同2.2 适用于number[]、string[]类型的排序比较回调函数 84 if (obj1[key] < obj2[key]) { 85 return -1; 86 } else if (obj1[key] > obj2[key]) { 87 return 1; 88 } else { 89 return 0; 90 } 91 } 92 // 根据name属性来比较 93 objArr.sort(compareObjFn('name')); 94 // 输出: 95 // [ 96 // {name: "And", value: 45}, 97 // {name: "Edward", value: 21}, 98 // {name: "Magnetic"}, 99 // {name: "Sharpe", value: 37}, 100 // {name: "The", value: -12}, 101 // {name: "Zeros", value: 37} 102 // ] 103 104 // 根据value属性来比较 105 objArr.sort(compareObjFn('value')); 106 // 输出: 107 // [ 108 // {name: "The", value: -12}, 109 // {name: "Edward", value: 21}, 110 // {name: "Sharpe", value: 37}, 111 // {name: "And", value: 45}, 112 // // 这里出现了特殊情况, 113 // // 使得compareFunction(a, b)出现了不同的输入,所以导致了排序结果的不确定性; 114 // {name: "Magnetic"}, 115 // {name: "Zeros", value: 37}, 116 // ]
loading。。。
这篇关于js数组排序相关的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-19vue2 开发移动端h5 使用那个ui框架比较好?-icode9专业技术文章分享
- 2024-11-19ReactJS结合TypeScript、Vite、Redux和TanStack (React Query) 实战教程
- 2024-11-19Vue3资料入门教程:零基础快速上手指南
- 2024-11-19Vue3资料:新手入门教程与实战指南
- 2024-11-19Vue资料:新手入门vue.js教程与实践指南
- 2024-11-19Vue资料:初学者入门指南
- 2024-11-18tcpdf可以等待vue动态页面加载完成后再生成pdf吗?-icode9专业技术文章分享
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南