JavaScript中TypedArray计数函数里(x.length || x)的作用及原因

先把问题里的代码贴出来方便分析：

function numElements(typedArrayConstructor, ...typedArrays) { 
  // 计算所有数组中的总元素数 
  return typedArrays.reduce((x,y) => (x.length || x) + y.length); 
}
console.log(numElements(Int32Array, Int8Array.of(1, 2, 3), Int16Array.of(4, 5, 6), Float32Array.of(7, 8, 9)));

这个表达式的作用其实是兼容reduce迭代过程中累加器x的两种不同类型，咱们一步步拆解就能明白：

• 首先，这段代码里的reduce没有传入初始累加值（也就是reduce的第二个参数），所以第一次迭代时：

  • x是typedArrays数组里的第一个元素——也就是Int8Array.of(1,2,3)这个TypedArray实例，y是第二个元素Int16Array.of(4,5,6)
  • 这时候x.length是3（这个数组的元素个数），||运算符会取第一个真值，所以(x.length || x)的结果就是3，加上y.length（3）得到6，作为下一次迭代的x

• 到了第二次迭代时：

  • x已经变成了上一步计算出的数值6，而数字类型是没有length属性的，所以x.length会返回undefined
  • 这时候||运算符就会取第二个操作数x本身（也就是6），再加上第三个数组的length（3），最终得到正确的总元素数9

那为什么必须用这个或运算？
如果直接写x + y.length，第一次迭代时x是TypedArray对象，对象和数字相加会触发类型转换，变成字符串拼接（比如[object Int8Array] + 3），结果就完全错误了。而(x.length || x)刚好能处理两种情况：

• 当x是数组时，取它的length属性（正确的元素数数值）
• 当x是累加后的数值时，直接用x本身继续累加

这样就能保证每一次都是数值相加，最终得到正确的总元素数。

内容的提问来源于stack exchange，提问作者Ray Jasson