ES9 中如何使用 Array.prototype.sort 进行参数排序

阅读时长 3 分钟读完

ES9 中如何使用 Array.prototype.sort 进行参数排序

在前端开发中,经常需要对数组进行排序操作。ES9 中新增了一种方式可以方便地对数组进行参数排序,即使用 Array.prototype.sort() 方法。这个方法可以按照指定的比较规则对数组中的元素进行排序,返回排序后的数组。

基本用法

sort() 方法的基本用法很简单,它接受一个比较函数作为参数,后面我们将详细讨论这个比较函数的作用。比较函数接收两个参数,表示数组中的两个元素,根据函数的返回值进行排序。

以下是一个简单的例子,使用 sort() 方法对一个包含数字的数组进行排序:

上面的例子中,sort() 方法通过比较函数 (a, b) => a - b 来实现排序。比较函数返回 a - b 的值,如果这个值小于 0,表示 a 应该排在 b 前面,如果这个值大于 0,表示 a 应该排在 b 后面,如果这个值等于 0,表示 a 和 b 的位置不变。

ES9 新增的用法

从 ES9 开始,sort() 方法新增了一种可以方便地对数组元素按照指定的参数进行排序的用法。具体来说,可以通过在比较函数外部先定义一个参数数组,指定需要排序的参数,然后在比较函数内部对这个参数数组进行访问来实现参数排序。

下面是一个例子,使用这种方式使一个包含对象的数组按照指定的参数进行排序:

-- -------------------- ---- -------
----- --- - -
  - ----- ------ ---- -- --
  - ----- ------- ---- -- --
  - ----- ------- ---- -- --
--
----- ------ - ------- --------
---------
  --- -- --
    -------------------- ---- -- -
      ------ ---- -- -----------------------------
    -- --
--
-----------------

上面的例子中,sortBy 数组指定了排序的参数,首先按照 age 参数进行排序,如果两个元素的 age 相同,则按照 name 参数进行排序。比较函数使用 reduce() 方法遍历这个数组,如果出现了不同的值,就返回这个值,否则返回 0。在返回值非零的情况下,sort() 方法会根据这个返回值进行排序。

注意,在比较函数中访问参数数组的时候,要使用数组索引的方式进行访问,而不是对象的方式。即使对象中没有指定的属性,也不会导致错误,而是返回 undefined。如果要指定参数的排序顺序,可以在 sortBy 数组中将参数的名字翻转,这样就可以按照相反的顺序进行排序。

总结

ES9 中的 Array.prototype.sort() 方法提供了一种方便的方式进行参数排序。通过指定一个参数数组,在比较函数中访问这个数组进行排序,可以有效地避免手动编写复杂的比较函数。在实践中,可以将这种方式与箭头函数和数组方法如 reduce() 等一起使用,使代码更加简洁和易读。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cddfd5b5eee0b5255d14bb

纠错
反馈