JavaScript 中的 reduce 方法内部的函数发生了什么？ - JavaScript30 练习

如何解决JavaScript 中的 reduce 方法内部的函数发生了什么？ - JavaScript30 练习

我一直在 Wes Bos 的 JavaScript30 上进行数组练习。 请帮我解决this exercise.，这是#8。

视频中的代码如下。

const data =['car','car','truck','bike','walk','van','truck']

const transportation = data.reduce(function(obj,item) {
  if (!obj[item]) {
    obj[item] = 0;
  }
  obj[item]++;
  return obj;
},{});
console.log(transportation)

我尝试了两个版本并得到错误的输出或错误，想弄清楚上面的代码和这两个之间的区别。另外，我想了解这两个代码发生了什么。

一个如下，区别在于设置else块。

const data = ['car',item) {
  if (!obj[item]) {
    obj[item] = 0;
  } else {
    obj[item]++;
  }
  return obj;
},{});

console.log(transportation)

这将返回下面的对象。

{car: 0,truck: 0,bike: 0,walk: 0,van: 0}

在这种情况下，else 没有检测到任何东西吗？为什么函数总是返回相同的零值？

另一个如下所示，区别在于将 return 放在 else 块内。

const data = ['car',item) {
  if (!obj[item]) {
    obj[item] = 0;
  } else {
    obj[item]++;
    return obj;
  }
},{});

console.log(transportation)

这会返回一个错误，指出 Uncaught TypeError: Cannot read property 'car' of undefined。

我知道返回 else 块内的对象会导致错误，因为这会终止执行。

但是，仍然不明白该错误消息的含义。我应该以某种方式在某处定义每个对象键吗？

解决方法

const data = ['car','car','truck','bike','walk','van','truck']

const transportation = data.reduce(function(obj,item) {
  // if (!obj[item]) { // `obj[item] === 0` ==> `!obj[item] === false`
  if (!(item in obj)) {
    obj[item] = 0;
  } else {
    obj[item]++;
  }
  return obj;
},{});

console.log(transportation)

,

Reduce 函数接受一个函数，并且在每次迭代中，您返回的任何值都将分配给第一个参数（在我们的例子中为 obj）。你错过了返回， undefined 将被分配并因此出错。

const data = ['car',item) {
    if (!obj[item]) {
        obj[item] = 1;
    } else {
        obj[item]++;
    }
    return obj;
},{});

console.log(transportation)