尝试从JavaScript数组中删除JSON对象时收到错误消息

因此，我正在尝试构建一个相对简单的应用程序，它将由8位预先确定的名人组成一组，一次随机显示两位，并允许用户选择他们喜欢的一位，直到只剩下一位为止。我已经设法让JavaScript端的几乎所有东西都正常工作，但偶尔我会收到一条错误消息，可能会使应用程序崩溃，我不知道如何修复它。我非常感谢社区能提供的任何帮助

我已经检查了代码，查找可能导致错误的逻辑问题，并尝试使用console.logs来识别它，但错误似乎会阻止console.logs在发生时显示

您可以在此处找到GitHub存储库：

以及此处的实时站点（有错误）：

代码的一个重要部分被组织为一系列if语句，我将在下面显示：

if(initialPicValue1 === initialPicValue2 && initialPicValue2 === celebArrayLength){
    initialPicValue2 -= 1;
}
if (initialPicValue1 === initialPicValue2){
    initialPicValue2 += 1;
}
if(initialPicValue1 === initialPicValue2 && initialPicValue1 === 0){
    initialPicValue2 += 1;
}
if (celebArrayLength === 1){
    return alert("Congrats! Your Favorite Celeb is " + celebArray[0].name);
}

我希望能够在没有任何问题的情况下干净地遍历数组中的所有对象，直到只剩下一个。但是，我有时会随机得到以下错误：

未捕获类型错误：无法读取未定义的属性“picture” 按按钮1（logic.js:128）

---

在HTMLButtonElement.onclick（index.html:21）

中，我可以看到您在以下行中得到一个错误：

console.log(celebArray[initialPicValue2].picture);

问题是你有一个名人数组，

celebArray

，当你点击其中一个按钮时，你正在访问该数组中的索引。当你在数组中只剩下一个名人时，就会发生错误，它试图访问一个不存在的索引。因此，为了避免出现错误，您必须在

if（celebArrayLength==1）

之前，在

功能中按Button

将第一块代码放入

if

语句中：

if (celebArray.length > 1) {
  // do something
}

然后，当它运行

if（celebArrayLength==1）

并发现只剩下一个名人时，您可以通过执行以下操作隐藏按钮，因为现在游戏结束了

if (celebArrayLength === 1) {
  $('button').hide()
  return alert("Congrats! Your Favorite Celeb is " + celebArray[0].name);
}

在您的代码中，每个按钮都有一个函数，但我已经对其进行了简化，因此现在有一个函数可以为两个按钮运行，您可以像这样传入按钮的编号

，然后您有一个像这样的函数

function pressButton（e）

因此，在该函数中，它在变量

e

中有按钮的编号，您可以通过从数组

[1,2]

中删除

e

然后使用剩余的编号来获得另一个按钮的编号：

var arr = [1,2] // a list with the numbers of the buttons
arr.splice(e-1, 1) // we remove the one that was pressed
var other = arr[0] // the one left is the other one

我整理了一些其他类似的东西。希望你能看到我做了什么。一般来说，最好不要复制函数，这样当您想要更改某些内容时，只需编辑一个函数就更容易了，这样您就不必担心忘记对两个函数都进行编辑

这是我的版本，它解决了你的问题。我已经将这些图片链接到它们的在线位置，但我保留了相关链接，只是发表了评论

var-celebArray=[
{
姓名：“汤姆·汉克斯”，
//图片：“assets/images/tomHanks.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/tomHanks.jpg"
},
{
姓名：“本尼迪克特·坎伯巴奇”，
//图片：“assets/images/benedictCumberbatch.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/benedictCumberbatch.jpg"
},
{
姓名：“查理兹·塞隆”，
//图片：“assets/images/charlizeTheron.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/charlizeTheron.jpg"
},
{
姓名：“伊万杰琳·莉莉”，
//图片：“assets/images/evangelineLilly.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/evangelineLilly.jpg"
},
{
姓名：“卡蒂·萨克霍夫”，
//图片：“assets/images/kateeSackhoff.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/kateeSackhoff.jpg"
},
{
姓名：“小罗伯特·唐尼”，
//图片：“资产/images/robertDowneyJr.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/robertDowneyJr.jpg"
},
{
姓名：“罗斯·莱斯利”，
//图片：“assets/images/roseLeslie.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/roseLeslie.jpg"
},
{
名称：“丹泽尔华盛顿”，
//图片：“assets/images/denzelWashington.jpg”
图片：“https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/denzelWashington.jpg"
},
];
函数picValues（）{
var initialPicValues={}
celebArrayLength=celebArray.length；
initialPicValues[1]=数学地板（（数学随机（）*celebArrayLength））；
var keys=Object.keys（celebArray）
键。拼接（初始值[1]，1）
var rnd_2=Math.floor（（Math.random（）*keys.length））；
initialPicValues[2]=键[rnd_2]
返回初始值
}
var celebArrayLength=celebArray.length；
var initialPicValues=picValues（celebArray）
函数loadPics（）{
$（“#picture1”）.css（“背景图像”，“url”（+celebArray[initialPicValues[1]]].picture+”）；
$（“#picture2”）.css（“背景图像”，“url”（+celebArray[initialPicValues[2]]].picture+”）；
}
loadPics（）；
log（“初始数组：”）；
控制台日志（celebArray）；
功能按钮（e）{
如果（celebArrayLength>1）{
var arr=[1,2]//带有按钮编号的列表
arr.splice（e-1，1）//我们移除按下的一个
var other=arr[0]//左边的是另一个
控制台日志（“初始图片”+其他+“值”）；
console.log（initialPicValues[其他]）；
控制台日志（“删除名人”）；
log（celebArray[initialPicValues[other]].picture）；
celebArray.拼接（初始值[other]，1）；
initialPicValues=picValues（celebArray）
}
如果（celebArrayLength==1）{
$('