使用 while 循环遍历数组

Question

我正在通过训练营实验室并在循环实验室中面临一些挑战。该练习要求创建一个接受一个参数的函数 - 一组事实。我必须使用 while 循环来遍历事实数组，将 !!! 添加到每个事实的末尾，并返回带有感叹号的字符串数组。

const facts = [
  "He was the last Beatle to learn to drive",
  "He was never a vegetarian",
  "He was a choir boy and boy scout",
  "He hated the sound of his own voice"
];

function johnLennonFacts() {
  let i = 0;
  while (i <= facts.lenght) {
    i++;
    console.log(facts[i] + '!!!');
  }
  return facts
}

Answer 1

查看代码中的cmets：

const data = [
  "He was the last Beatle to learn to drive",
  "He was never a vegetarian",
  "He was a choir boy and boy scout",
  "He hated the sound of his own voice"
];

function johnLennonFacts(facts) {
//                       ^^^^^
// your function has to accept the argument here

  var data = facts.slice(); // make a copy of the passed array
  
  var i = 0;

  while (i < data.length) { // fix misspelled length

    data[i] += '!!!'; // use += to add the !!!
    
    i++; // increment after adding the !!!
  }

  return data
}

var result = johnLennonFacts(data); // call the function 
console.log(result);

Answer 2

如果您不必使用while 循环，map 会更干净。

const facts = [
"He was the last Beatle to learn to drive",
"He was never a vegetarian",
"He was a choir boy and boy scout",
"He hated the sound of his own voice"
];

function append(arr) {
  newArr = arr.map(el => el + ' !!!');
  return newArr;
}

console.log(append(facts));

Answer 3

这是您想要实现的目标：

const facts = [
  "He was the last Beatle to learn to drive",
  "He was never a vegetarian",
  "He was a choir boy and boy scout",
  "He hated the sound of his own voice"
];

// With one argument (array of facts) it's better :p
function johnLennonFacts(facts) {
  let i = 0;
  const factsModified = [];
  while (i <= facts.length) {
    factsModified.push(facts[i] + '!!');
    i++;
  }

  return factsModified;
}

Answer 4

一般来说，当迭代次数从一开始就知道时，我更喜欢使用for loop，在这种情况下，map 可能最有意义，正如@kemotoe 的回答中所述（但我理解这是一项任务）。您需要解决一些问题（一些已在 cmets 和其他答案中提到，但在此合并以供您参考）。

1. 您的作业表明您的function 需要接受一个参数，即array。所以你需要在你的函数定义的括号内有一个参数（或参数），然后在你调用它时将你的输入数组传递给函数。比如：

   // 函数定义 函数 johnLennonFacts(arr) { // 你的代码 }

   // 在调用时将“事实”数组传递给函数 johnLennonFacts(事实);

2. 您当前的 while 语句将尝试记录数组的最后 3 个元素，因为您在记录数组的值之前递增 i 并且 1 是数组中第二个元素的索引，因为数组是零索引（意味着数组中的第一个元素位于索引 0 处）。然后，当i 增加到 4 但facts 在索引 4 处没有元素时，您的循环将遇到无法处理的问题。其他答案提供了一些关于如何修复 while 循环的见解。

3. 您需要将facts[i] + '!!!' 分配给您计划从函数返回的数组中的索引。 JavaScript 不知道您希望它根据这一行更改facts[i]，它只是看到您将它与其他一些文本组合在一起，但没有将它放在任何地方。其他答案提供了一些关于如何将新组合的字符串分配给将从函数返回的数组中的索引的一些见解。

只是为了好玩，这里是其他答案的替代方案，可以让您对函数、循环和数组的工作方式有一些额外的了解。

const facts = [
  "He was the last Beatle to learn to drive",
  "He was never a vegetarian",
  "He was a choir boy and boy scout",
  "He hated the sound of his own voice"
];

const exclamation = (arr) => {
  let i = arr.length;
  while (i) {
    i--;
    arr[i] += '!!!';
  }
  
  return arr;
};

const loudfacts = exclamation(facts);
console.log(loudfacts);
/*
[
  "He was the last Beatle to learn to drive!!!",
  "He was never a vegetarian!!!",
  "He was a choir boy and boy scout!!!",
  "He hated the sound of his own voice!!!"
]
*/

• const exclamation = (arr) => {...} 是定义函数的另一种方式（称为arrow function）
• 首先分配i = arr.length，这样我们就可以向后循环遍历数组
• 在我们将新字符串分配给任何数组索引之前，使用 i-- 递减 i，因为我们知道数组的最高索引将比其长度小一，因为数组是零索引的
• 使用arr[i] += '!!!' 为每个数组索引分配一个新的字符串值，这是arr[i] = arr[i] + '!!!' 的快捷方式
• 因为 0 是 "falsy" 值，所以 while 循环在 i 递减为零的迭代后退出
• 然后我们从函数中返回修改后的arr
• 我们调用我们的函数并将facts数组传递给它，将返回值分配给带有let loudfacts = exclamation(facts);的变量