likes
comments
collection

探究|vue源码中重写的7个数组方法(三)

作者站长头像
站长
· 阅读数 22

探究|vue源码中重写的7个数组方法(三)

前言

接续

探究|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) //

探究|vue源码中重写的7个数组方法(三)

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) //

探究|vue源码中重写的7个数组方法(三)

需要注意的是:

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个可改变自身的数组的方法。它们主要是通过对数组添加或删除或排序元素,来改变原数组本身。