Chrome 和 Firefox 中 Array.sort(comparisonFunction) 的不同结果

Question

我正在使用anArrayOfObjects.sort((a, b) => a.value - b.value) ，其中一些对象没有value属性。

这导致 Firefox 和 Chrome 中的结果不同，其中 Chrome 似乎将没有value属性/未定义值的对象排序到最后，Firefox 没有。

规范是否没有规定 Chrome 给出的结果，这意味着 Firefox 结果是错误的？ 或者这部分sort结果取决于特定的实现？

 const data2 = [ { 'name': 'a', 'value': 5 }, { 'name': 'b', 'value': 2 }, { 'name': 'c' }, { 'name': 'd', 'value': 1 } ]; console.log('before sorting: ', data2); data2.sort((a, b) => a.value - b.value); console.log('after sorting: ', data2);

Answer 1

两者都不是“错误的”。

undefined - undefined 、 undefined - 1和1 - undefined都返回NaN ，与NaN相比，某些东西总是false的。

两种浏览器之间的差异可能是由于排序实现。
使用的排序算法可以给出不同的结果，具体取决于预先值的顺序，以及实现如何处理NaN 。

Answer 2

不要让浏览器引擎决定如何在有疑问的情况下处理您的代码，只需编写没有它的代码：

data2.sort((a, b) => (a?.value || 0) - (b?.value || 0));

（默认值可以是一些小的或大的数字，以便按照您需要的顺序进行排序。）

Answer 3

比较 function 的工作原理如下：

compareFn(a, b)返回值	排序
< 0	a排在b之后
> 0	在b之前排序a
=== 0	保持a和b的原始顺序

任何涉及undefined的减法都会返回NaN值， 根据规范，它会立即转换为0 。 但是，顺序将取决于实现使用的特定算法，因为它决定了以这种方式比较哪些值。

当您注销比较时，问题变得更加清晰：

 const data2 = [ { 'name': 'a', 'value': 5 }, { 'name': 'b', 'value': 2 }, { 'name': 'c' }, { 'name': 'd', 'value': 1 } ]; console.log('before sorting: ', data2); data2.sort((a, b) => (console.log(a.value, b.value), a.value - b.value)); console.log('after sorting: ', data2);

• Firefox似乎在问> 0 ：

   5 2 5 undefined undefined 1

  1. a是'a'并且b是'b' ，返回值是3所以'a'必须在'b'之后。
  2. a是'a'和b是'c' ，返回值为0所以'a'停留在'c'之前。
  3. a是'c'和b是'd' ，返回值为0所以'c'停留在'd'之前。

• Chrome似乎在问< 0 ：

   2 5 undefined 2 undefined 5 1 5 1 2

  1. a是'b'并且b是'a' ，返回值为-3所以'b'必须在'a'之前。
  2. a是'c'和b是'b' ，返回值为0所以'c'停留在'b'之后
  3. a是'c'并且b是'a' ，返回值为0所以'c'停留在'a'之后
  4. a是'd'并且b是'a' ，返回值为-4所以'd'必须在'a'之前
  5. a是'd'并且b是'b' ，返回值为-1所以'd'必须在'b'之前

具体来说，Chrome 从来没有直接比较'c'和'd' ，所以从来没有被告知要让它们保持相同的顺序。

Answer 4

众所周知，排序算法是特定于浏览器实现的，此外，由于没有银弹算法，某个浏览器可能会针对不同的数据形状使用不同的排序算法作为优化技术。
当查看 Firefox 中的以下示例结果时，这一点变得很明显：

 const arr1 = [ { 'value': 5 }, { 'value': 2 }, { 'value': undefined }, { 'value': 4 }, { 'value': 3 }, { 'value': undefined }, { 'value': 1 }, { 'value': 0 } ]; const arr2 = [5, 2, undefined, 4, 3, undefined, 1, 0]; arr1.sort((a, b) => a.value - b.value); arr2.sort((a, b) => a - b); console.log(arr1.map(v => `${v.value}`).join()); console.log(arr2.map(v => `${v}`).join());

事实上，上述示例的 Chrome 结果符合规范：

4. 让 SortCompare 成为一个带有参数 (x, y) 的新抽象闭包，它捕获 comparefn 并在调用时执行以下步骤：
   一个。 如果 x 和 y 都未定义，则返回 +0。
   湾。 如果 x 未定义，则返回 1。
   c。 如果 y 未定义，则返回 -1。

从上面的陈述可以得出结论， undefined的值总是比较大于任何其他值，这就是它们最后排序的原因。
这个结果可以通过对未定义值进行特殊处理的merge sort算法来实现，下面是它的伪代码：

 const mergeSort = arr => { let voids = 0; const merge = (l, r) => { const out = []; l.length && l[0] === undefined && (l.shift(), voids++); while (l.length && r.length) out.push(l[0] <= r[0]? l.shift(): r.shift()); while(l.length) out.push(l.shift()); while(r.length) out.push(r.shift()); return out; }; const sort = arr => { if (arr.length < 2) return arr; const m = Math.floor(arr.length / 2); const l = arr.slice(0, m), r = arr.slice(m); return merge(sort(l), sort(r)); }; const result = sort(arr); while (voids--) result.push(undefined); return result; }; const arr = [5, 2, undefined, 4, 3, undefined, 1, 0]; console.log(mergeSort(arr).map(v => `${v}`).join());

关于排序后的对象数组Firefox，在第一个例子中，可以通过简单的insertion sort算法得到，如下：

 const insertionSort = arr => { for (let i = 1; i < arr.length; i++) { let x = i - 1, n = arr[i]; for (; x >= 0 && arr[x] > n; x--) arr[x + 1] = arr[x]; arr[x + 1] = n; } return arr; }; const arr = [5, 2, undefined, 4, 3, undefined, 1, 0]; console.log(insertionSort(arr).map(v => `${v}`).join());

Answer 5

@jonrsharpe maa kyu chuda rha jab sab pta h phle se