当前位置: 首页 > Web前端 > HTML5

你真的知道如何使用JavaScript中的sort方法吗

时间:2023-04-05 23:32:10 HTML5

在平时的业务开发中,数组(Array)是我们经常使用的数据类型,所以对数组进行排序也是很常见的,除了循环遍历数组的方法要整理数据,使用JS数组中的native方法sort进行整理(没错,更崇尚JS的原生力量)。面试题——如何判断一个对象是否为数组类型原文链接1.举个栗子数组中可以直接用来排序的方法有:reverse()和sort()。因为reverse()方法不够灵活,所以才有了sort()方法。默认情况下,sort()方法按升序对数组进行排序。vararr=[1,3,5,9,4];console.log(arr.sort());//Output:[1,3,4,5,9]这时候发现数据是按升序排列的,没有问题;然后将数组改为:vararr=[101,1,3,5,9,4,11];,然后调用sort()方法打印排序结果。vararr=[101,1,3,5,9,4,11];console.log(arr.sort());//output:[1,101,11,3,4,5,9]这个时候发现数组101和11都在3的前面,因为sort()方法会调用数组的toString()转换方法,然后比较得到的字符串来决定如何排序,即使数组中的每一项都是一个值,sort()方法也会比较字符串.那么字符串是如何排序的呢?它们按照字符串的unicode编码从小到大排序。我们试着把数组中每一项的unicode编码打印出来看看。...//转码方法functiongetUnicode(charCode){returncharCode.charCodeAt(0).toString(16);}//打印转码arr.forEach((n)=>{console.log(getUnicode(String(n)))});//输出:31313133343539意外发现1、101、11字符串的unicode编码都是312,按照指定顺序传入比较函数上面发现sort()方法并没有按照我们想要的顺序排序,那么怎么解决呢,sort()方法可以接收一个比较函数作为参数来指定哪个值在哪个值的前面。比较函数(compare)接受两个参数,如果第一个参数在第二个参数之前,则返回负数;如果两个参数相等,则返回0;如果第一个参数在第二个参数之后,则返回整数。函数比较(值1,值2){如果(值1<值2){返回-1;}elseif(value1>value2){返回1;}else{返回0;我们将比较函数传递给sort()方法,对arr数组进行排序后,打印结果如下:vararr=[101,1,3,5,9,4,11];console.log(arr.sort(compare));//输出:[1,3,4,5,9,11,101];可以发现从小到大排序是没有问题的。3.对对象数组进行排序sort()方法通过传入一个比较函数对数字数组进行排序,但是在开发中,我们会对一个对象数组的某个属性进行排序,比如id、age等,那么如何解决呢?解决这个问题:我们可以定义一个函数,让它接收一个属性名,然后根据属性名创建一个比较函数,作为返回值返回(JS中的函数可以作为值,不仅像传递parameters将一个函数传递给另一个函数,也可以返回一个函数作为另一个函数的结果。函数作为JS中的一等公民不无道理,它们确实非常灵活。),代码如下。函数compareFunc(prop){返回函数(obj1,obj2){varvalue1=obj1[prop];varvalue2=obj2[prop];如果(值1<值2){返回-1;}elseif(value1>value2){返回1;}else{返回0;}}}定义一个数组users,调用sort()方法传入compareFunc(prop),打印结果:varusers=[{name:'tom',age:18},{name:'lucy',age:24},{name:'jhon',age:17},];console.log(users.sort(compareFunc('age')));//输出结果[{name:"jhon",age:17},{name:"tom",age:18},{name:"lucy",age:24}]默认情况下,调用sort()方法时不传入比较函数,sort()方法将调用每个对象的toString()方法来确定它们的顺序。当我们调用compareFunc('age')方法创建比较函数时,排序是基于对象的age属性。4、XML节点的排序虽然后台返回的很多数据都是JSON格式的,但是非常轻量级,容易解析。但是之前有一个项目因为后台返回的都是XML字符串,前端拿到数据后要序列化,有些还需要排序。之前的排序是将XML转化为数组对象进行排序。这样做没有问题,但是感觉代码很冗余,很麻烦。后来突发奇想,得到的xml也是类数组对象。难道我不能直接把类数组对象转成数组来排序吗?//1.模拟后端返回的XML字符串varstr=`tom18lucy24jhon17`//2.定义比较函数functioncompareFunction(prop){returnfunction(a,b){varvalue1=a.getElementsByTagName(prop)[0].textContent;varvalue2=b.getElementsByTagName(prop)[0].textContent;如果(值1<值2){返回-1;}elseif(value1>value2){返回1;}else{返回0;}}}//3.将xml字符串转换为xml对象vardomParser=newDOMParser();varxmlDoc=domParser.parseFromString(str,'text/xml');varuserElements=xmlDoc.getElementsByTagName('user'));//4.UserElements类数组对象转换为数组并排序varuserElements=Array.prototype。slice.call(xmlDoc.getElementsByTagName('user'));var_userElements=userElements.sort(compareFunction('age'));//5.打印排序结果_userElements.forEach((user)=>{console.log(user.innerHTML);});打印排序后的结果可以发现,XML节点已经按照age从小到大排序了。5.总结JS数组的排序方法因为传入了比较函数,灵活多了,而且还按照时间,汉字拼音首字母等进行排序,我们只需要记住传传入比较函数,显式比较两个对象的属性值,通过比较属性值来确定对象的排序顺序。我在工作中也遇到了问题,并找到了解决问题的新思路。以上就是这么多的简单总结。如有不足之处,请指正。参考资料:《JavaScript高级教程》