Question

我想在函数中循环遍历一个对象数组。

问题是，当我使用return时，它只返回第一个结果，在本例中为Olaf Kranz，但我想返回所有的名字和姓氏：

Olaf Kranz   
Mark Alien  
Cindy Sunsi  
Anna Pitter  
Piet Schmitz

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() {
  for (i = 0; i < allInfo.length; i++){
    return allInfo[i].name + " " + allInfo[i].lastname + "\n";
  }
};

document.write(getAllFirstAndLastnames());

Answer 1

当你return时，它会立即终止函数 - 你只需要进行一次迭代。改为添加到HTML字符串。另外，请务必使用<br>代替HTML而不是\n：

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 htmlString = '';
  for (let i = 0; i < allInfo.length; i++) {
    htmlString += allInfo[i].name + " " + allInfo[i].lastname + "<br>";
  }
  return htmlString;
}

document.write(getAllFirstAndLastnames());

但.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(({ name, lastname }) => name + ' ' + lastname)
    .join('<br>');
}

document.write(getAllFirstAndLastnames());

Answer 2

reduce怎么样？

＆＃13;

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.reduce(function(str, item) {
        return str += item.name + " " + item.lastname + "<br/>"
    }, "")
};

document.write(getAllFirstAndLastnames());

＆＃13;

如果你想用ES6更加精美的代码。您可以使用箭头功能。

＆＃13;

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.reduce((str, { name, lastname }) => str + name + " " + lastname + "<br/>", "")
};

document.write(getAllFirstAndLastnames());

＆＃13;

Answer 3

你在这里做的是一个映射操作：你正在使用一种类型的数据，并且你想将它转换成另一种类型信息的数组。在这种情况下，您有一个描述人员（名字，姓氏和年龄）的对象数组，并且您希望将其转换为全名字符串数组。这正是map method of Array的用途。

将映射人员数组转换为名称数组后，您可以使用join method of Array将所有条目拼接成单个字符串。

例如：

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}
];


// map array of people objects to array of name strings
var allNames = allInfo.map(function (person) {
  return person.name + " " + person.lastname;
});

// write out string of all the names, separated by line breaks
document.write(allNames.join("<br>"))

map方法称为高阶函数，因为它将另一个函数作为参数。在这种情况下，函数将输入数组的元素转换为输出数组的相应元素。由于该功能仅用于那个地方，我们不打扰给它起个名字;即，它是匿名函数。如果你有一个相当新的浏览器，它可能也支持更简洁的arrow syntax匿名函数：

// map array of people objects to array of name strings
var allNames = allInfo.map(person => person.name + " " + person.lastname);

较新的浏览器也支持template literal strings（a.k.a。字符串插值），这可以使这个例子更加简洁：

// map array of people objects to array of name strings
var allNames = allInfo.map(person => `${person.name} ${person.lastname}`);

返回函数中循环的所有结果（JavaScript）

3 个答案: