探究|vue源码中重写的7个数组方法（三）
2024-11-04 03:14:28
接续
探究|vue源码中重写的7个数组方法（一）
探究|vue源码中重写的7个数组方法（二）
本文主要分为三点，①是Array.sort()，②是Array.reverse()，③是本系列的总结
可改变数组自身的方法1.Array.sort()sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
语法：
Array.sort([compareFunction])compareFunction：用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
几种场景示例
①数字排序：a-b比较数字
let?list?=?[4,?2,?5,?1,?3]list.sort((a,?b)?=>?a?-?b)console.log(list)?//?[1,?2,?3,?4,?5]//?和上面的写法具有一样的效果/*?list.sort(function?(a,?b)?{??return?a?-?b})?*/②对象属性排序：比较对象中的属性
let?list?=?[??{?name:?'array',?value:?43?},??{?name:?'list',?value:?25?},??{?name:?'map',?value:?28?},??{?name:?'set',?value:?-8?}]//?按照属性?value?排序，希望排序相反，仅需被减数和减数互换位置即可list.sort((a,b)=>b.value-a.value)console.log(list)?//let?list?=?[??{?name:?'set',?value:?43?},??{?name:?'list',?value:?25?},??{?name:?'map',?value:?28?},??{?name:?'array',?value:?-8?}]//?按照属性?name?排序，被减数与减数互换位置，亦可获得相反的排序结果list.sort(function?(a,b){??let?nameA?=?a.name.toUpperCase();?//?转换为大写字符再比较??let?nameB?=?b.name.toUpperCase();?//?转换为大写字符再比较??if?(nameA?>?nameB)?{????return?-1;??}??if?(nameA?<?nameB)?{????return?1;??}??return?0;})console.log(list)?//需要注意的是：
1.如果没有指明compareFunction，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如"Banana"会被排列到"cherry"之前。当数字按由小到大排序时，9出现在80之前，但因为（没有指明compareFunction），比较的数字会先被转换为字符串，所以在Unicode顺序上"80"要比"9"要靠前。
2.理想状态上a和b相等时，他们的相对位置会保持不变，但是ECMAScript?标准并没有这种保证，而且这也要看浏览器的实现情况，比如Mozilla在2003年之前的版本就没有遵守a和b相等时相对位置保持不变的特征。不过现在版本的大多数现代浏览器都是支持的，因此也可以使用。
2.Array.reverse()reverse()方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。
reverse()通常被用来做倒序排序，这有时比较有用，例如我们在做分页的按照升序时间排序，这时候查的是接口，而如果我们并不比那么关注及时性，我们置换成时间降序排序的话可以不必向服务器请求，而是前端直接使用reverse()倒叙，还有例如点赞数量排序、评论数量排序一类。但我们强调这是在能接受损失一定及时性为前提的做法，在这个前提下，可以一定程度减轻服务器的压力，达到节流的目的。
使用示例
场景一：对数组中的元素倒序排序
//?数组中的元素倒序let?list?=?['hello',?'new',?'word']list.reverse()console.log(list)?//?['word',?'new',?'hello']场景二：对类数组的对象倒序排序
//?对对象使用?reverse.call(obj)let?obj?=?{1:'hello',2:'new',3:'word',last:'last'}Array.prototype.reverse.call(obj)console.log(obj)?//?{1:?'hello',?3:?'word',?5:?'new',?last:?'last'}可以看到对对象向使用的结果并不理想，但似乎也有一定规律。这个规律就是会对类似语法的值进行比较然后进行排序。
总结正如本系列一期所言，push()，pop()，shift()，unshift()，splice()，sort()，reverse()是7个可改变自身的数组的方法。它们主要是通过对数组添加或删除或排序元素，来改变原数组本身。
热门标签
