来自数组的源代码javascript

我是HTML和JavaScript的新手。我有一个嵌入了几个音频文件的短代码。我使用的是循环的，我想用从字符串数组作为源的WAV文件（而不是为“file1.wav”谢谢。来自数组的源代码javascript

<!DOCTYPE html> 

    <html> 
    <body> 
    <p id="demo"></p> 

<script> 
    var AudioFiles = [ 
    "file1.wav", 
    "file2.wav", 
    "file3.wav", 
    ]; 

    for(var i = 0; i < 3; i++){ 
     document.body.innerHTML = document.body.innerHTML + ` 
      <audio controls> 
      <source src="file1.wav"; type="audio/wav"> 
      </audio> 
     ` 
    }; 
</script> 

    </body> 
    </html>

来源

2017-07-01 user552231

您可以使用字符串interpolati。在和数组索引查找这个，因为它似乎你使用ES6。

<script> 
    var AudioFiles = [ 
    "file1.wav", 
    "file2.wav", 
    "file3.wav", 
    ]; 

    for(var i = 0; i < 3; i++){ 
     document.body.innerHTML = document.body.innerHTML + ` 
      <audio controls> 
      <source src="${AudioFiles[i]}"; type="audio/wav"> 
      </audio> 
     ` 
    }; 
</script>

然而，也有一些问题，我想指出：

首先，我们不倾向于通过常规的首字母大写来命名我们的变量。（因此，使用的audioFiles代替AudioFiles大写字母被保留类和构造函数，通常

其次，这可能不是追加元素到DOM的最佳方式看看在appendChild功能：。https://www.w3schools.com/jsref/met_node_appendchild.asp

第三，我们可以使用函数forEach做类似的事情，而无需使用反自己，这是更好，因为它更声明，并且不容易出错，手动：

<script> 
    var audioFiles = [ 
     "file1.wav", 
     "file2.wav", 
     "file3.wav", 
    ]; 

    audioFiles.forEach(function(item) { 
     document.body.innerHTML = document.body.innerHTML + ` 
      <audio controls> 
      <source src="${item}"; type="audio/wav"> 
      </audio> 
     ` 
    }); 
</script>

这将取audioFiles中的每个项目并将其传递到迭代器函数item。

然而，我们可以做得比这更好的...

<script> 
    var audioFiles = [ 
     "file1.wav", 
     "file2.wav", 
     "file3.wav", 
    ]; 

    document.body.innerHTML = 
     document.body.innerHTML + 
     audioFiles.map(function(item) { 
     return ` 
      <audio controls> 
      <source src="${item}"; type="audio/wav"> 
      </audio> 
     `}).join(); 
</script>

这样，我们重复自己少，所以再有少出问题。

映射函数遍历一个数组并将其转换为另一个数组，迭代器函数的结果。

来源

2017-07-01 15:15:29

只需使用数组索引内循环

var AudioFiles = [ 
"file1.wav", 
"file2.wav", 
"file3.wav", 
]; 

for(var i = 0; i < 3; i++){ 
    document.body.innerHTML = document.body.innerHTML +'<audio controls><source src="'+AudioFiles[i]+'"; type="audio/wav"></audio>' 
};

来源

2017-07-01 15:03:51

在音频和控件之间添加空格 – Dark

@BharathShetty Ahh ..谢谢。 –

由于您使用的模板的文字，你可以使用这个语法：${variable}在字符串中嵌入之外的变量

for(var i = 0; i < 3; i++){ 
    document.body.innerHTML = document.body.innerHTML + ` 
     <audio controls> 
     <source src="${AudioFiles[i]}"; type="audio/wav"> 
     </audio> 
    ` 
};

来源

2017-07-01 15:09:09

const audioFiles = ["file1.wav", "file2.wav", "file3.wav"]; //list all file paths 
const html = audioFiles.map(audio => { 
    return ` 
    <audio controls> 
     <source src="${audio}"; type="audio/wav"> 
    </audio>`; 
}).join(""); /*prepare html to update - remember to join(""), 
because map outputs an array*/ 
document.body.innerHTML += html;

此方法只更新DOM一次。

来源

2017-07-01 15:21:10

来自数组的源代码javascript

回答

相关问题