Javascript中的数组函数[重复]答案

【问题标题】：Array Function In Javascript [duplicate]Javascript中的数组函数[重复]
【发布时间】：2020-01-26 06:46:32
【问题描述】：

给定一个用户数组，编写一个函数 namesAndRoles，它以字符串形式返回所有用户的姓名和角色，每个值都带有标签。

const users = [{
    name: 'Homer',
    role: 'Clerk',
    dob: '12/02/1988',
    admin: false
  },
  {
    name: 'Lisa',
    role: 'Staff',
    dob: '01/30/1965',
    admin: false
  },
  {
    name: 'Marge',
    role: 'Associate',
    dob: '09/10/1980',
    admin: true
  }
];

function namesAndRoles(users) {
  output = "";
  for (var i = 0; i < users.length; i++)
    output += " Name: " + users[i].name + "\n" + " Role: " + users[i].role + "\n";

  return output;

}

console.log(namesAndRoles(users));

我似乎无法换行。我一直得到的是：

姓名：Homer\n 职务：文员\n 姓名：Lisa\n 职务：职员\n 姓名：Marge\n 职务：助理\n

【问题讨论】：

标签： javascript

【解决方案1】：

在您的代码中，output += " Name: " + users[i].name + "\n" + " Role: " + users[i].role + "\n"; 将为每个值创建一个新行。您可以使用array.reduce，并在它的累加器中推送一个包含用户信息的字符串。然后使用join 正则表达式换行

const users = [{
    name: 'Homer',
    role: 'Clerk',
    dob: '12/02/1988',
    admin: false
  },
  {
    name: 'Lisa',
    role: 'Staff',
    dob: '01/30/1965',
    admin: false
  },
  {
    name: 'Marge',
    role: 'Associate',
    dob: '09/10/1980',
    admin: true
  }
];

function namesAndRoles(users) {
  return users.reduce((acc, curr) => {
    acc.push(`Name:${curr.name} Role:${curr.role} DOB:${curr.dob}`);
    return acc;
  }, []).join('\n')

}

console.log(namesAndRoles(users));

【讨论】：

Map 是一种更短更容易理解的方法。请参阅我的答案非常简单的版本。 \n 也不是正则表达式

【解决方案2】：

你可以简化脚本

\n 被 HTML 忽略。您可以使用 <br/> 或将输出包装为 PRE

const users = [{ name: 'Homer', role: 'Clerk', dob: '12/02/1988', admin: false }, { name: 'Lisa', role: 'Staff', dob: '01/30/1965', admin: false }, { name: 'Marge', role: 'Associate', dob: '09/10/1980', admin: true } ];

function namesAndRoles1(users) {
   return users.map(user => `Name: ${user.name}<br/>Role: ${user.role}${user.admin ? " (admin)":""}<br/>`)
   .join('<hr/>');
}

document.getElementById('output1').innerHTML = namesAndRoles1(users);

function namesAndRoles2(users) {
   return users.map(user => `Name: ${user.name}\nRole: ${user.role}${user.admin ? " (admin)":""}\n`)
   .join('\n');
}


document.getElementById('output2').textContent = namesAndRoles2(users);

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

<div id="output1"></div>

<hr/>

<pre id="output2"></pre>

【讨论】：