Вернуть все результаты цикла в функцию (JavaScript) - PullRequest
Новая
       26

Вернуть все результаты цикла в функцию (JavaScript)

0 голосов
/ 14 мая 2018

Я хочу перебрать массив объектов в функции.

Проблема, когда я использую 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());

Ответы [ 3 ]

0 голосов
/ 14 мая 2018

Как насчет reduce? 

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());

Если вы хотите более модный код с ES6. Вы можете использовать функции стрелок. 

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());
0 голосов
/ 14 мая 2018

Здесь вы выполняете операцию mapping : вы берете массив с одним типом данных и хотите преобразовать его в массив с другим типом информации. В этом случае у вас есть массив объектов, описывающих людей (имя, фамилию и возраст), и вы хотите преобразовать его в массив строк с полным именем. Это именно то, для чего используется метод map Array.

После того, как вы сопоставили массив людей в массив имен, вы можете использовать метод join из 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 известен как функция высшего порядка , потому что он принимает другую функцию в качестве аргумента. В этом случае функция преобразует элемент входного массива в соответствующий элемент выходного массива. Поскольку функция используется только в одном месте, мы не даем ей имя; то есть это анонимная функция . Если у вас достаточно новый браузер, он, вероятно, также поддерживает более краткий синтаксис стрелки для анонимных функций: 

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

Новые браузеры также поддерживают шаблонные строковые литералы (a.k.a. строковая интерполяция), что может сделать этот пример еще более лаконичным: 

// map array of people objects to array of name strings
var allNames = allInfo.map(person => `${person.name} ${person.lastname}`);
0 голосов
/ 14 мая 2018

Когда вы 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());
...