循环后重置数组

Question

我写了一些 JavaScript 函数 (selectMeal) 循环 7 次，从数组 (tempMealList) 中随机选择一项，然后将该项推送到另一个数组 (dinnersPicked)。一旦项目被添加到新数组 (dinnersPicked)，它就会从原始数组 (tempMealList) 中删除，以避免再次被选中。

在控制台中，此函数 (selectMeal) 的每个运行都不会产生任何问题，但是当我在 HTML 中单击按钮触发该函数时，每次按钮单击数组时used 似乎被永久更改，第二次点击时不考虑在第一个运行函数中随机选择的项目，同样对于任何连续点击，不考虑之前显示的任何项目。

我试图通过在函数开头重新定义变量来重置每次点击时考虑的数组来解决函数中的这个问题，但这似乎不起作用。

我哪里做错了，我怎样才能确保每次点击都考虑原始数组？

代码如下：

    //Meal objects
let a = {Food:'Chicken and leek', Link: 'null', Difficulty: 'Easy'};
let b = {Food:'Spaghetti Bolognese', Link: 'null', Difficulty: 'Medium'};
let c = {Food:'Lasagna', Link: 'null', Difficulty: 'Medium'};
let d = {Food:'Roast lamb', Link: 'null', Difficulty: 'Hard'};
let e = {Food:'Roast chicken', Link: 'null', Difficulty: 'Hard'};
let f = {Food:'Fajitas', Link: 'null', Difficulty: 'Easy'};
let g = {Food:'Tortilla pizza', Link: 'null', Difficulty: 'Easy'};
let h = {Food:'Spaghetti Carbonara', Link: 'null', Difficulty: 'Easy'};
let i = {Food:'Chicken salad', Link: 'null', Difficulty: 'Easy'};
let j = {Food:'Pies and mash', Link: 'null', Difficulty: 'Easy'};
let k = {Food:'BBQ', Link: 'null', Difficulty: 'Medium'};
let l = {Food:'Lamb chops and potatoes', Link: 'null', Difficulty: 'Medium'};
let m = {Food:'Takeaway', Link: 'null', Difficulty: 'Easy'};
let n = {Food:'Beans on toast', Link: 'null', Difficulty: 'Easy'};
let o = {Food:'Sausage and mash', Link: 'null', Difficulty: 'Easy'};
let p = {Food:'Stir fry', Link: 'null', Difficulty: 'Medium'};
let q = {Food:'Seasoned Chicken and rice', Link: 'null', Difficulty: 'Easy'};
let r = {Food:'Shepards Pie', Link: 'null', Difficulty: 'Hard'};
let s = {Food:'Beef nachos', Link: 'null', Difficulty: 'Medium'};
let t = {Food:'Burgers', Link: 'null', Difficulty: 'Easy'};
let u = {Food:'Jacket potato', Link: 'null', Difficulty: 'Easy'};
let v = {Food:'Chicken curry', Link: 'null', Difficulty: 'Medium'};
let w = {Food:'Chicken enchiladas', Link: 'null', Difficulty: 'Medium'};
let x = {Food:'Pasta bake', Link: 'null', Difficulty: 'Medium'};
let y = {Food:'Chicken bake', Link: 'null', Difficulty: 'Hard'};
let z = {Food:'Chilli Con Carne', Link: 'null', Difficulty: 'Easy'};

//Array for meals 
const mealList = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];


//Array to store the dinners chosen
let dinnersPicked = [];

//Function for selecting the meals
const selectMeal = () => {

dinnersPicked = [];
let tempMealList = mealList;

for (i=0; i<7; i++) {
  randomMeal = tempMealList[Math.floor(Math.random() * tempMealList.length)];
  dinnersPicked.push(randomMeal);
  const index = tempMealList.indexOf(randomMeal);
  tempMealList.splice(index,1)
};

showMeals(dinnersPicked);
};

const showMeals = (dinnersPicked) => {
//Monday
  document.getElementById('monFood').innerHTML = dinnersPicked[0].Food;
  document.getElementById('monFood').setAttribute('href', dinnersPicked[0].Link);
  document.getElementById('monDifficulty').innerHTML = dinnersPicked[0].Difficulty;
//Tuesday
  document.getElementById('tueFood').innerHTML = dinnersPicked[1].Food;
  document.getElementById('tueFood').setAttribute('href', dinnersPicked[1].Link);
  document.getElementById('tueDifficulty').innerHTML = dinnersPicked[1].Difficulty;
//Wednesday
  document.getElementById('wedFood').innerHTML = dinnersPicked[2].Food;
  document.getElementById('wedFood').setAttribute('href', dinnersPicked[2].Link);
  document.getElementById('wedDifficulty').innerHTML = dinnersPicked[2].Difficulty;
//Thursday
  document.getElementById('thuFood').innerHTML = dinnersPicked[3].Food;
  document.getElementById('thuFood').setAttribute('href', dinnersPicked[3].Link);
  document.getElementById('thuDifficulty').innerHTML = dinnersPicked[3].Difficulty;
//Friday
  document.getElementById('friFood').innerHTML = dinnersPicked[4].Food;
  document.getElementById('friFood').setAttribute('href', dinnersPicked[4].Link);
  document.getElementById('friDifficulty').innerHTML = dinnersPicked[4].Difficulty;
//Saturday
  document.getElementById('satFood').innerHTML = dinnersPicked[5].Food;
  document.getElementById('satFood').setAttribute('href', dinnersPicked[5].Link);
  document.getElementById('satDifficulty').innerHTML = dinnersPicked[5].Difficulty;
//Sunday
  document.getElementById('sunFood').innerHTML = dinnersPicked[6].Food;
  document.getElementById('sunFood').setAttribute('href', dinnersPicked[6].Link);
  document.getElementById('sunDifficulty').innerHTML = dinnersPicked[6].Difficulty;
};

供参考（我不认为这有什么区别...）这是从 HTML:

触发函数的方式

<div class='button -dark center' onclick="selectMeal()">Click for random meals</div>

Answer 1

当您执行 let tempMealList = mealList; 时，这两个变量现在指向同一个数组。所以当你做 tempMealList.splice(index,1) 你也在修改 mealList.

请尝试 let tempMealList = [...mealList]; 制作副本。

循环后重置数组

Resetting an array after a loop

javascript

arrays

dynamic-arrays