Javascript循环（初学者）

时间：2016-12-09 21:43:50

标签： javascript arrays loops if-statement

我目前正处于学习Javascript的初级阶段，并且想知道你如何能够遍历这个数组并输出所有数据作为html内容：

var links = new Array(); //Missing this part as code

links[0] = new Array();
links[0]["linkName"] = "W3Schools";
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png";
links[0]["linkURL"] = "http://www.w3schools.com/";
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";

links[1] = new Array();
links[1]["linkName"] = "Code Academy";
links[1]["linkLogo"] = "";
links[1]["linkURL"] = "https://www.codecademy.com/";
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.";

links[2] = new Array();
links[2]["linkName"] = "";
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg";
links[2]["linkURL"] = "http://www.w3.org/";
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web.";

4 个答案:

答案 0 :(得分：1)

使用您的结构，我们可以这样做：

var links = new Array(); // Missing this part as code

links[0] = new Array();
links[0]["linkName"] = "W3Schools";
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png";
links[0]["linkURL"] = "http://www.w3schools.com/";
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";

links[1] = new Array();
links[1]["linkName"] = "Code Academy";
links[1]["linkLogo"] = "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png";
links[1]["linkURL"] = "https://www.codecademy.com/";
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.";

links[2] = new Array();
links[2]["linkName"] = "The World Wide Web Consortium";
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg";
links[2]["linkURL"] = "http://www.w3.org/";
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web.";

// Loop through the main array
for(var i = 0; i < links.length; ++i){

  // As we loop, we'll create new HTML elements that will be configured
  // with the information we extract from the objects in the array:
  var div = document.createElement("div");
  var a = document.createElement("a");
  var img = document.createElement("img");
  
  // Use data in the nested array to configure the new HTML element
  a.href = links[i]["linkURL"];
  img.src = links[i]["linkLogo"];
  img.alt = links[i]["linkDescription"];
  img.title = links[i]["linkName"];
  
  // Place the image inside of the link:
  a.appendChild(img);
  
  // Place the link inside of the div
  div.appendChild(a);
  
  // Inject div element into the web page
  document.body.appendChild(div);
}
img {width:200px}

但是，在JavaScript中，数组最适合存储单个数据项甚至嵌套数组。 但是，当您需要存储名称和值以使用这些名称时，最好使用专为键/值对存储而设计的Object。

这是您的数据，重组为对象，然后放入数组中，最后，数组循环，提取对象数据，并将数据放入HTML元素。

// First set up objects to store the name/value pairs (arrays don't do this)
var object1 = {
 linkName : "W3Schools",
 linkLogo : "http://www.w3schools.com/images/w3schools.png",
 linkURL : "http://www.w3schools.com/",
 linkDescription : "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP."
};

var object2 = {
 linkName : "Code Academy",
 linkLogo : "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png",
 linkURL : "https://www.codecademy.com/",
 linkDescription : "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages."
};

var object3 = {
 linkName : "The World Wide Web Consortium",
 linkLogo : "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg",
 linkURL : "http://www.w3.org/",
 linkDescription : "The World Wide Web Consortium is the main international standards organization for the World Wide Web."
};

// Place the objects into an array:
var objects = [object1, object2, object3];

// Loop through each of the objects in the array
for(var i = 0; i < objects.length; ++i){

  // As we loop, we'll create new HTML elements that will be configured
  // with the information we extract from the objects in the array:
  var div = document.createElement("div");
  var a = document.createElement("a");
  var img = document.createElement("img");
  
  // Use data in the object to configure the new HTML element
  a.href = objects[i].linkURL;
  img.src = objects[i].linkLogo;
  img.alt = objects[i].linkDescription;
  img.title = objects[i].linkName;
  
  // Place the image inside of the link:
  a.appendChild(img);
  
  // Place the link inside of the div
  div.appendChild(a);
  
  // Inject div element into the web page
  document.body.appendChild(div);
}
img {width: 200px;}

答案 1 :(得分：1)

以下代码将给定结构映射到表示包含所有给定元素的html的字符串数组中：

const linksAsHTML = links.map(link=>
`<a href="${link["linkURL"]}" title="${links["linkDescription"]}">
  <img src="${link["linkLogo"]}" alt="${links["linkName"] }"/>
</a>`);

有很多方法可以将这个字符串数组转换为页面上的html，但作为初学者，我建议学习如何使用jQuery

注意：这只是无数种方法中的一种，但希望这可以帮助您弄清楚您想要做什么。

答案 2 :(得分：0)

数据结构有点不确定，所以我认为这些都是锚点：

links = []; //A man missed a declaration

links[0] = new Array();
links[0]["linkName"] = "W3Schools";
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png";
links[0]["linkURL"] = "http://www.w3schools.com/";
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";

links[1] = new Array();
links[1]["linkName"] = "Code Academy";
links[1]["linkLogo"] = "";
links[1]["linkURL"] = "https://www.codecademy.com/";
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.";

links[2] = new Array();
links[2]["linkName"] = "";
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg";
links[2]["linkURL"] = "http://www.w3.org/";
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web.";

//Looping though the array
for(var i=0, j=links.length; i<j; i++){
    if (!!links[i]['linkName']){ //Displaying empty links makes less sense
        //Creating a new anchor
        var tA = document.body.appendChild(document.createElement('a'));
        tA.href = links[i]['linkURL']; //Assigning the href
        tA.innerHTML = links[i]['linkName']; //Assigning the name
        tA.title = links[i]['linkDescription'];  //Assigning the description

    //Adding logo if available
    if(!!links[i]['linkLogo']){
        var tI = tA.appendChild(document.createElement('img'));
        tI.src = links[i]['linkLogo']
    }
    }
}

答案 3 :(得分：-1)

 for (var i = 0, len = arr.length; i < len; i++) {
   someFn(arr[i]);
 }
相关问题
最新问题