來自數組的源代碼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

回答

相關問題