为什么这个循环使用函数参数只返回一次？ [复制]

Question

const alphabets= {
  first: ["a", "b", "c"],
  second: ["d", "e", "f"],
  third: ["g", "h"]
};    

function trial(arr) {

  for (let i = 0; i < arr.length; i++) {
    const argh = `<li class = "text-warning">${i}<li>`;
    return argh;
  }
};

console.log(trial(alphabets.second));

我在用数字替换条件的函数之外尝试了相同的“for循环”，它工作正常。为什么在放入函数并在条件中使用参数时它只循环一次？

Answer 1

return

return 语句结束函数执行并指定要返回给函数调用者的值。

您可以在for循环之外声明变量并在每次迭代中连接htmlString并在循环完成后返回变量。

const alphabets= {
  first: ["a", "b", "c"],
  second: ["d", "e", "f"],
  third: ["g", "h"]
};    

function trial(arr) {
  let argh='';
  for (let i = 0; i < arr.length; i++) {
    argh += `<li class = "text-warning">${i}<li>`;
  }
  return argh;
};

console.log(trial(alphabets.second));

Answer 2

因为 return 语句会停止你的函数。也许你想在返回之前连接一个字符串？

function trial(arr) {

  let returnValue = '';

  for (let letter of arr) {
    returnValue += `<li class = "text-warning">${letter}<li>`;
  }

  return returnValue;
};

Answer 3

如果你想要一个数组，你可以推入一个数组，然后在循环完成后返回。

function trial(arr) {
  const argh = [];
  for (let i = 0; i < arr.length; i++) {
    argh.push(`<li class = "text-warning">${i}<li>`);
  }
  return argh;
};