ES9 之 Array.prototype.sort() 的 Polyfill 实现
前端开发中，经常需要对数组进行排序。ES6以前，我们使用的是Array.prototype.sort()，但是这个方法有一些问题。
在ES5及以前版本的JavaScript中，sort()方法使用的是基于ASCII码排序的，也就是说它无法准确地对一些Unicode字符排序。此外，sort()方法也无法保证在所有情况下都按照期望的方式排序，例如排序一个包含字符串和数字的数组时，有可能会出现结果不一致的情况。
针对这个问题，ES6中Array.prototype.sort()进行了一些改进。ES6的sort()方法使用的是一种新的排序算法，称为“TimSort”，该算法具有更好的性能和排序结果质量。同时，ES6的sort()方法还允许我们指定一个回调函数，以便对数组中的元素进行自定义排序。
但是对于一些老项目，可能使用的是ES6以下的版本。那么在这种情况下，我们可以使用Polyfill的方式来实现ES6的sort()方法。
Polyfill 实现
Polyfill指的是一种技术，通过在浏览器中注入JavaScript代码来实现缺失的API或方法。下面是一个实现ES6的sort()方法的Polyfill代码：
// javascriptcn.com 代码示例
if (!Array.prototype.sortBy) {
Array.prototype.sortBy = function(compareFunc) {
if (!compareFunc || typeof compareFunc !== 'function') {
throw new TypeError('argument should be a function');
}
let arr = Array.prototype.slice.call(this);
for (let i = 1; i < arr.length; i++) {
let key = arr[i];
let j = i - 1;
while (j >= 0 && compareFunc(arr[j], key) > 0) {
arr[j + 1] = arr[j];
j--;
}
arr[j + 1] = key;
}
return arr;
};
}我们定义了一个Array.prototype.sortBy()方法，该方法接受一个参数：compareFunc回调函数用于自定义数组排序。该回调函数应该接受两个参数，分别为要比较的两个数组元素，返回值为一个整数。如果返回值小于0，则第一个元素排在第二个元素前面，如果返回值大于0，则第一个元素排在第二个元素后面。
针对这个函数，我们还做了一些判断，确保传入的参数是一个函数。
使用示例
下面是使用示例。假设我们有一个包含5个数字的数组，我们想将它按照升序排序：
const arr = [11, 2, 7, 5, 13];
const sorted = arr.sortBy(function(a, b) {
return a - b;
});
console.log(sorted); // [2, 5, 7, 11, 13]在上面的代码中，我们首先定义了一个包含5个数字的数组。然后，我们调用了我们刚刚定义的sortBy()方法，将回调函数传递给它。在这里，我们使用一个简单的匿名函数来比较两个数字。根据compareFunc的返回值，我们将数组按照升序排列。
总结
我们知道，在新的JavaScript规范中，sort()方法有了新的实现方式和回调函数的定义方式。但是在老项目中，会遇到不能使用sort()方法的问题。这时候，我们可以使用Polyfill的方式来实现ES6的sort()方法的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f62c17d4982a6eb8ef81c