javascript - 为什么 reduce 受浮点问题影响而 for 循环不受影响？

Question

当我使用 reduce 方法编写以下代码时，值不精确:

return bytes.reduce((accumulator, currentValue, index) => {
                 return accumulator + (currentValue * Math.pow(256,(bytes.length - 2) - index));
    }
)

例如。输出数字 5.99609375, 10.99609375, 7.99609375, 14.99609375但是，当我编写以下代码时，结果是准确的:

let result = 0.0;
for (let i = 0; i < bytes.length - 1; ++i) {
                result = result + (bytes[i] * Math.pow(256, (bytes.length - 2) - i));
    }
return result

例如。输出数字 5, 10, 7, 14输入字节数组是:

Uint8Array(4) [0, 0, 5, 255]
Uint8Array(4) [0, 0, 10, 255]
Uint8Array(4) [0, 0, 7, 255]
Uint8Array(4) [0, 0, 14, 255]

这是为什么呢？有没有办法使 reduce 方法精确工作？

const res = document.getElementById('result');
const res2 = document.getElementById('result2');
const arr = a = [
  [0, 0, 5, 255],
  [0, 0, 10, 255],
  [0, 0, 7, 255],
  [0, 0, 14, 255]
];
const fn = (bytes) => {
  let result = 0.0;
  for (let i = 0; i < bytes.length - 1; ++i) {
    result = result + (bytes[i] * Math.pow(256, (bytes.length - 2) - i));
  }
  return result
}
fn2 = (bytes) => {
  return bytes.reduce((accumulator, currentValue, index) => {
    return accumulator + (currentValue * Math.pow(256, (bytes.length - 2) - index));
  })
}
res.innerText += `${arr.map(fn)}`;
res2.innerText += `${arr.map(fn2)}`;

<div id="result"></div>
<div id="result2"></div>

Answer 1

Why reduce is affected by floating point issue and for loop not? When I write following code with reduce method, values are imprecise

这不是 float 问题。如果您查看结果，您会看到类似这样的内容:

5.99609375

当你有浮点精度时是这样的

0.020000000000000004

问题出在 for 循环中，因为您只迭代了 bytes 数组中的前 n-1 项。

for (let i = 0; i < bytes.length - 1; ++i) {

只需迭代所有数组项。

for (let i = 0; i < bytes.length; ++i) {

您看到两个 values，因为 reduce 方法遍历所有数组项，for 循环遍历前 n-1 项。

不幸的是，当然没有办法让 reduce 的内置版本过早退出。

但是你可以使用slice方法。

return bytes.slice(0, -1).reduce((accumulator, currentValue, index) => {
    return accumulator + (currentValue * Math.pow(256,(bytes.length - 2) - index));
})