JS:将代码从JSBin复制到实时站点时出现奇怪的错误
我跟随一个在线课程，在JSBin中运行了一些代码。我遇到了一些错误，但是，JSBin并不是很详细。因此，我将代码复制到本地开发服务器上的一个简单HTML文件中……得到了一些非常奇怪的类型错误。代码在JSBin上运行得很好，但在移到服务器上时就会出错。有人能指出这到底是怎么回事吗？
代码如下：
const suspectNames = [
'Miss Scarlett',
'Colonel Mustard',
'Mrs. White',
'Mr. Green',
'Mrs. Peacock',
'Professor Plum',
];
const suspectListForIn = [];
suspectNames.metaData = { provenInnocent: [] };
function createSuspect(name) {
const colour = name.split(" ")[1]; <----------------------- works online, but not locally
const speak = () => { console.log('My name is ${name}'); }
return { name, colour, speak }
};
// ADD SUSPECTS TO suspectListLoop
// this is the class-taught answer
for (let i in suspectNames){ <----------------------- works locally, but not online
let suspectName = suspectNames[i];
console.log(suspectName);
suspectListForIn.push(createSuspect(suspectName));
};首先，我得到了name.split的这个错误，它在网上工作得很好，但在本地运行得不好：
TypeError: name.split is not a function其次，我不能让课堂上的答案在网上运行，但它在本地运行得很好。到底怎么回事？？我被难住了。:(
编辑:这是另一个使用map的建议函数，但不适用于我：
// another class-taught method doesn't work either online or locally
const suspectListMap = suspectNames.map(suspectName => {
return createSuspect(suspectName);
});
console.log(suspectListMap);EDIT2:在等待一些优秀的回复时(感谢各位)，我想出了一个使用forEach1, which i instinctively wanted to use anyway. it also had no problem with the元数据添加的解决方案：
suspectNames.forEach(element => suspectListLoop.push(createSuspect(element)));
console.log(suspectListLoop);回答 1
Stack Overflow用户
发布于 2020-06-16 06:13:13
正如我在评论中所说的，您的问题源于for...in循环的行为。它遍历对象的属性，并且您的疑似对象数组有一个额外的非字符串属性，称为metaData。下面的代码应该可以为您提供预期的功能。for...of循环用于获取JS中可迭代对象的值(而不是键或索引)。
const suspectNames = [
'Miss Scarlett',
'Colonel Mustard',
'Mrs. White',
'Mr. Green',
'Mrs. Peacock',
'Professor Plum',
];
const suspectListForIn = [];
suspectNames.metaData = { provenInnocent: [] };
function createSuspect(name) {
const colour = name.split(" ")[1];
const speak = () => { console.log('My name is ${name}'); }
return { name, colour, speak }
};
// ADD SUSPECTS TO suspectListLoop
// this is the class-taught answer
for (let suspectName of suspectNames){
console.log(suspectName);
suspectListForIn.push(createSuspect(suspectName));
}
console.log(suspectListForIn);
下一部分真的是所有的风格，我只是为了提供信息而把它放在那里。我会亲自移动代码，并利用数组可用的一些内置函数。
const suspectNames = [
'Miss Scarlett',
'Colonel Mustard',
'Mrs. White',
'Mr. Green',
'Mrs. Peacock',
'Professor Plum',
];
const suspectListForIn = suspectNames.map(createSuspect);
suspectNames.metaData = {
provenInnocent: []
};
function createSuspect(name) {
const colour = name.split(" ")[1];
const speak = () => {
console.log('My name is ${name}');
}
return {
name,
colour,
speak
}
};
console.log(suspectListForIn);
这段代码的最大变化是删除了for循环，并将suspectListForIn的初始化更改为suspectName.map(...)。关于数组的Map函数的Tl;Dr是它接受一个函数，该函数将被赋予数组的每个单独项作为它的第一个参数。您可以对该信息进行某种类型的转换，并返回一个将用作新数组元素的值。Array.prototype.map获取更全面的通读。我使用这一点，以及您的createSuspect函数返回一个可疑对象这一事实，将代码缩短了很多。
如果你有任何问题，请告诉我。
https://stackoverflow.com/questions/62397686
复制相似问题
腾讯云开发者
