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

Question

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

视频中的代码如下

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

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

我试了两个版本，都得到了错误的输出或错误，想弄清楚上面的代码和这两个的区别。另外，我想了解这两个代码是怎么回事。

一个是下面的，不同的是设置了else block.

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

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

console.log(transportation)

这 return 是下面的对象。

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

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

另一个是下面的，不同之处在于将 return 放在 else 块内。

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

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

console.log(transportation)

这 return 是一个错误 Uncaught TypeError: Cannot read property 'car' of undefined。

我了解到 return else 块中的对象会导致错误，因为这会终止执行。

但是，还是不明白那个错误信息的意思。我应该以某种方式在某处定义每个对象键吗？

Answer 1

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', '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)

Answer 2

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

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

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

console.log(transportation)

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

What's going on the function inside of reduce method in JavaScript? - JavaScript30 exercise

javascript

methods

reduce