如何在JavaScript函数中返回循环的全部结果

你碰到的这个问题其实很常见——在循环里直接使用return会立刻终止函数执行，所以你的函数只处理了第一个对象就返回结果了，后面的元素根本没机会被遍历到。

问题分析 #

看你当前的代码：

function getAllFirstAndLastnames() {
  for (i = 0; i < allInfo.length; i++){
    return allInfo[i].name + " " + allInfo[i].lastname + "\n";
  }
};

第一次循环到i=0时，函数就执行了return语句，直接把Olaf Kranz返回出去，函数随即停止运行，剩下的4个对象完全没被处理。

解决方案 #

我们需要先收集所有的姓名组合，最后一次性返回结果，这里有两种常用的实现方式：

方法1：用数组收集结果后拼接

先创建一个空数组，把每个对象的姓名组合添加到数组里，最后用空格把数组元素拼接成一个完整的字符串：

var allInfo = [ 
  {name: "Olaf", lastname: "Kranz", age:33}, 
  {name: "Mark", lastname: "Alien", age:21}, 
  {name: "Cindy", lastname: "Sunsi", age:65}, 
  {name: "Anna", lastname: "Pitter", age:20}, 
  {name: "Piet", lastname: "Schmitz", age:29} 
]; 

function getAllFirstAndLastnames() {
  // 声明一个数组用来存储所有姓名组合
  let fullNames = [];
  // 用let声明i，避免全局变量污染
  for (let i = 0; i < allInfo.length; i++){
    fullNames.push(allInfo[i].name + " " + allInfo[i].lastname);
  }
  // 用空格拼接所有元素，得到预期的字符串
  return fullNames.join(' ');
};

document.write(getAllFirstAndLastnames());

方法2：用map+join简化代码

如果你喜欢更简洁的写法，可以用数组的map方法先把每个对象转换成姓名字符串，再用join拼接：

var allInfo = [ 
  {name: "Olaf", lastname: "Kranz", age:33}, 
  {name: "Mark", lastname: "Alien", age:21}, 
  {name: "Cindy", lastname: "Sunsi", age:65}, 
  {name: "Anna", lastname: "Pitter", age:20}, 
  {name: "Piet", lastname: "Schmitz", age:29} 
]; 

function getAllFirstAndLastnames() {
  return allInfo.map(person => `${person.name} ${person.lastname}`).join(' ');
};

document.write(getAllFirstAndLastnames());

预期输出 #

两种方法都会得到你想要的结果：

Olaf Kranz Mark Alien Cindy Sunsi Anna Pitter Piet Schmitz

内容的提问来源于stack exchange，提问作者Everlike