.includs(或我应用的任何其他方法)不是函数

Question

我有一个具有以下结构的对象和一段JavaScript代码，用于将该对象的.duration(最初是一个字符串(转换为具有相应分钟数的数字：

let movies = [
{
"title": "The Shawshank Redemption",
"year": 1994,
"director": "Frank Darabont",
"duration": "2h 22min",
"genre": [
"Crime",
"Drama"
],
"rate": 9.3
},
{
"title": "The Godfather",
"year": 1972,
"director": "Francis Ford Coppola",
"duration": "2h",
"genre": [
"Crime",
"Drama"
],
"rate": 9.2
},
{
"title": "The Godfather: Part II",
"year": 1974,
"director": "Francis Ford Coppola",
"duration": "22min",
"genre": [
"Crime",
"Drama"
],
}
];

function turnHoursToMinutes(arr) {
return arr
.slice(0, arr.length)
.map(movie => {
if (movie.duration.includes('h')) {
const durationArr = movie.duration.split(/D+/).map(item => Number(item));
durationArr[0] *= 60;
movie.duration = durationArr.reduce((acc, num) => acc + num, 0);
return movie;
}   
movie.duration = Number(movie.duration.slice(0,2));
return movie
});
};
console.log(turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies));
console.log(movies !== turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies)[0].duration === 'number');

当我执行代码时，程序会返回一个错误(显示在最后3个console.log中(，说我在.map中传递的第一个方法不是函数。我已经看了几天了，但我仍然不知道是什么原因导致了这个问题。最糟糕的是，它实际上正确地打印了结果：/

谢谢你的帮助！

Answer 1

在更改源movie对象中的duration属性时会发生这种情况。

在第一次运行turnHoursToMinutes之后，movie.duration不再是string，而是number，其prototype中没有includes功能。

这是正在改变duration属性的行：

movie.duration = Number(movie.duration.slice(0,2));

尝试复制movie对象，然后应用转换：

let movies = [
{
"title": "The Shawshank Redemption",
"year": 1994,
"director": "Frank Darabont",
"duration": "2h 22min",
"genre": [
"Crime",
"Drama"
],
"rate": 9.3
},
{
"title": "The Godfather",
"year": 1972,
"director": "Francis Ford Coppola",
"duration": "2h",
"genre": [
"Crime",
"Drama"
],
"rate": 9.2
},
{
"title": "The Godfather: Part II",
"year": 1974,
"director": "Francis Ford Coppola",
"duration": "22min",
"genre": [
"Crime",
"Drama"
],
}
];

function turnHoursToMinutes(arr) {
return arr
.slice(0, arr.length)
.map(movie => {
const updatedMovie = {...movie};
if (updatedMovie.duration.includes('h')) {
const durationArr = updatedMovie.duration.split(/D+/).map(item => Number(item));
durationArr[0] *= 60;
updatedMovie.duration = durationArr.reduce((acc, num) => acc + num, 0);
return updatedMovie;
}   
updatedMovie.duration = Number(movie.duration.slice(0,2));
return updatedMovie
});
};
console.log(turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies));
console.log(movies !== turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies)[0].duration === 'number');

Answer 2

第一次调用turnHoursToMinutes时将movie.duration更改为Number，第二次调用该函数时会出现错误，因为Number没有.includes函数。

解决此问题的一种方法是使用Object.assign返回电影对象的副本，在映射函数中创建电影的克隆，然后修改该副本并返回，从而创建具有修改的duration属性的新对象数组。

以下是您的代码片段的副本，只添加了一行即可使其工作：

let movies = [
{
"title": "The Shawshank Redemption",
"year": 1994,
"director": "Frank Darabont",
"duration": "2h 22min",
"genre": [
"Crime",
"Drama"
],
"rate": 9.3
},
{
"title": "The Godfather",
"year": 1972,
"director": "Francis Ford Coppola",
"duration": "2h",
"genre": [
"Crime",
"Drama"
],
"rate": 9.2
},
{
"title": "The Godfather: Part II",
"year": 1974,
"director": "Francis Ford Coppola",
"duration": "22min",
"genre": [
"Crime",
"Drama"
],
}
];

function turnHoursToMinutes(arr) {
return arr
.slice(0, arr.length)
.map(movie => {
movie = Object.assign({}, movie);
if (movie.duration.includes('h')) {
const durationArr = movie.duration.split(/D+/).map(item => Number(item));
durationArr[0] *= 60;
movie.duration = durationArr.reduce((acc, num) => acc + num, 0);
return movie;
}   
movie.duration = Number(movie.duration.slice(0,2));
return movie
});
};
console.log(turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies));
console.log(movies !== turnHoursToMinutes(movies));
console.log(typeof turnHoursToMinutes(movies)[0].duration === 'number');