制作一个名字数组<h1></h1> ，以及年龄在<h2></h2>

Question

我想在<h1></h1>制作一个名称数组，以及<h2></h2>的年龄

我可以使用 map() 方法吗？ 它是如何工作的？ 旁边，有什么解决办法吗？

function readyToPutInTheDOM(arr) {

}

readyToPutInTheDOM([
  {
    name: "Angelina Jolie",
    age: 80
  },
  {
    name: "Eric Jones",
    age: 2
  },
  {
    name: "Paris Hilton",
    age: 5
  },
  {
    name: "Kayne West",
    age: 16
  },
  {
    name: "Bob Ziroll",
    age: 100
  }
]) 
// ["<h1>Angelina Jolie</h1><h2>80</h2>", 
// "<h1>Eric Jones</h1><h2>2</h2>", 
// "<h1>Paris Hilton</h1><h2>5</h2>", 
// "<h1>Kayne West</h1><h2>16</h2>", 
// "<h1>Bob Ziroll</h1><h2>100</h2>"]

非常感谢！

Answer 1

您可以像这样使用forEach或map

function readyToPutInTheDOM(arr) {
  arr.map(c=> {
     document.write("<h1>" + c.name + "</h1>");
     document.write("<h2>" + c.age+ "</h2>");
  });

  arr.forEach(c=> {
     document.write("<h1>" + c.name + "</h1>");
     document.write("<h2>" + c.age+ "</h2>");
  });
}

 function readyToPutInTheDOM(arr) { arr.map(c=> { document.write("<h1>" + c.name + "</h1>"); document.write("<h2>" + c.age+ "</h2>"); }); arr.forEach(c=> { document.write("<h1>" + c.name + "</h1>"); document.write("<h2>" + c.age+ "</h2>"); }); } readyToPutInTheDOM([ { name: "Angelina Jolie", age: 80 }, { name: "Eric Jones", age: 2 }, { name: "Paris Hilton", age: 5 }, { name: "Kayne West", age: 16 }, { name: "Bob Ziroll", age: 100 } ])

Answer 2

是的，您可以使用 map 方法。 Map 的工作原理是遍历数组中的每个条目，然后根据每次迭代return确定该特定数组条目转换为（即映射到）的内容。 因此，您可以简单地返回包裹在<h1></h1>和<h2></h2>标签中的每个数组条目对象属性，如下所示：

 function readyToPutInTheDOM(arr) { return arr.map(function(obj) { return "<h1>" +obj.name +"</h1>" + "<h2>" + obj.age +"</h2>"; }); } var result = readyToPutInTheDOM([{name:"Angelina Jolie",age:80},{name:"Eric Jones",age:2},{name:"Paris Hilton",age:5},{name:"Kayne West",age:16},{name:"Bob Ziroll",age:100}]); console.log(result);

或者，您可以使用 ES6 箭头函数、解构和模板文字：

 const readyToPutInTheDOM = arr => arr.map(({name, age}) => `<h1>${name}</h1><h2>${age}</h2>`); const result = readyToPutInTheDOM([{name:"Angelina Jolie",age:80},{name:"Eric Jones",age:2},{name:"Paris Hilton",age:5},{name:"Kayne West",age:16},{name:"Bob Ziroll",age:100}]); console.log(result);

Answer 3

使用each在你的 JSON 数据中循环并绑定到 DOM 上，如下所示。

 var data = [{ name: "Angelina Jolie", age: 80 }, { name: "Eric Jones", age: 2 }, { name: "Paris Hilton", age: 5 }, { name: "Kayne West", age: 16 }, { name: "Bob Ziroll", age: 100 } ]; var nHTML = ''; $(data).each(function(i, val) { nHTML += '<h1>' + val['name'] + '</h1>'; nHTML += '<h2>' + val['age'] + '</h2>'; }); $('#display').html(nHTML);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id='display'></div>

Answer 4

你的问题不清楚所以我不确定它是你想要的

function readyToPutInTheDOM(arr) {
  let x = document.createElement('div');
  arr.map((v,i)=>{
    x.innerHTML += `<h1> ${v.name}</h1> <h2>${v.age}</h2>`;
  });
   document.body.appendChild(x);
}

Answer 5

所以这个任务很容易通过这种方式完成。

 function readyToPutInTheDOM(arr: { name: string; age: number }[]) {
  return arr.map(
    (arr) => "<h1>" + arr.name + "</h1>" + "<h2>" + arr.age + "</h2>"
  );