在JavaScript中对对象数组进行排序的常规操作和骚操作

JavaScript中对象数组排序的通用操作和取巧操作其实大可不必，JS原生的Array.sort可以直接进行一些复杂而漂亮的排序。在本文中，将介绍Array.sort的一些通用排序和一些棘手的操作。基本数组排序默认情况下，Array.sort函数将数组中每个需要排序的元素转换为字符串，并按Unicode顺序进行比较。constfoo=[9,1,4,'zebroid','afterdeck'];富。种类（）;//返回[1,4,9,'afterdeck','zebroid']constbar=[5,18,32,newSet,{user:'EleanorRoosevelt'}];bar.sort();//returns[18,32,5,{user:'EleanorRoosevelt'},Set{}]你可能很好奇什么是32排在5之前。发生这种情况是因为数组中的每个元素首先被转换为字符串，在Unicode顺序中，“32”出现在“5”之前。需要注意的是Array.sort会改变原来的数组。constbaz=['我的猫吃了我的作业',37,9,5,17];baz.sort();//baz数组被修改console.log(baz);//shows[17,37,5,9,'Mycatatemyhomework']为了避免这种情况，我们可以创建一个新的待排序数组实例，然后对新数组进行修改。在这里您可以使用Array.slice返回一个新的Array实例。//创建baz数组的新实例并对其进行排序constsortedBaz=baz.slice().sort();我们也可以使用ES6中的扩展运算符来实现：constsortedBaz=[...baz].sort();在这两种情况下，输出是相同的：console.log(baz);//['我的猫吃了我的作业',37,9,5,17];控制台日志（sortedBaz）；//[17,37,5,9,'Mycatatemyhomework']Array.sort本身无法对对象数组进行排序。不过不用担心，sort还提供了一个参数，可以根据比较函数的返回值对数组元素进行排序。使用比较函数排序假设foo和bar是比较函数要比较的两个元素，比较函数的返回值设置如下：小于0：foo在bar之前大于0：bar等于0在foo之前：foo和bar保持彼此不同的变化。让我们看一个简单的例子：constnums=[79,48,12,4];函数比较（a，b）{如果（a>b）返回1；如果（b>a）返回-1；返回0；}nums.sort(compare);//=>4,12,48,79我们可以稍微重构一下：functioncompare(a,b){returna-b;}使用箭头函数重构：nums.sort((a,b)=>a-b);如何对对象数组进行排序现在，让我们对对象数组进行排序。假设以下歌手数组：constsingers=[{name:'StevenTyler',band:'Aerosmith',born:1948},{name:'KarenCarpenter',band:'TheCarpenters',born:1950},{name:'KurtCobain',band:'Nirvana',born:1967},{name:'StevieNicks',band:'FleetwoodMac',born:1948},];我们可以使用compare功能，然后根据singers中的band字段来排序。functioncompare(a,b){//使用toUpperCase()忽略字符大小写constbandA=a.band.toUpperCase();constbandb=b.band.toUpperCase();让比较=0；如果(bandA>bandB){比较=1;}elseif(bandAvarB){比较=1;}elseif(varAa.localeCompare(b));//['bjork','Bjork','Bj?rk']根据compareValues函数，我们可以这样写：functioncompareValues(key,order='asc'){returnfunctioninnerSort(a,b){if(!a.hasOwnProperty(key)||!b.hasOwnProperty(key))返回0;constcomparison=a[key].localeCompare(b[key]);return((order==='desc')?(comparison*-1):comparison);};}小结以上就是对使用JS常用函数对对象数组进行排序的简单介绍。尽管许多库都提供了这种动态排序功能，但我们并不真正相信自己可以实现这种方法。另外，了解幕后发生的事情对我们来说也没什么坏处。最后说一句题外话，本人在一线互联网公司工作十几年，指导过很多同行业的小辈。帮助了很多人学习和成长。我意识到有很多经验和知识值得和大家分享，我们也可以通过我们的能力和经验来解答大家在IT学习中的很多困惑，所以在繁忙的工作状态下，我仍然坚持整理和分享各种东西。我可以免费分享最近的前端面试题，包括HTML、CSS、JavaScript、服务器端和网络、Vue、浏览器、数据结构和算法等等，还在整理和更新中。希望大家都能找到自己喜欢的工作。有需要的朋友点此免费获取题目+解析PDF。点击此处免费获取标题+解析PDF。