JavaScript 中 reduce 方法内部的函数是怎么回事?- JavaScript30练习



我一直在Wes Bos的JavaScript30上做数组练习。请帮我做这个练习。,也就是#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块。

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)

返回下面的对象。

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

此时else是否检测不到?为什么函数一直返回相同的值0 ?

另一个是下面的,不同的是把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)

返回错误:Uncaught TypeError: Cannot read property 'car' of undefined

我理解在else块内返回对象会导致错误,因为这会终止执行。

但是,仍然不明白错误信息的含义。我应该在某个地方以某种方式定义每个对象键吗?

Reduce函数接受一个函数,在每次迭代中返回的任何值将被分配给第一个参数(在我们的例子中是obj)。你错过了返回,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)

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)

最新更新