像數據屬性用作關鍵字的對象數組？

Question

我有我的網頁上的項目是這樣的：

<audio data-key="65" src="sounds/clap.wav"></audio> 
<audio data-key="83" src="sounds/hihat.wav"></audio> 
<audio data-key="68" src="sounds/kick.wav"></audio> 

我需要播放音頻項目時函數被調用並傳遞變量的值相同的數據項。

所以當傳遞65，那麼這將工作：

const sounds = document.getElementsByTagName('audio'); 

const makeSound = function() { 
    sounds[0].play(); 
} 

但是，這種解決方案顯然是不可擴展的。有沒有一種方法可以讓數組像對象那樣，鍵是音頻項的數據鍵？我所以我想我要一個像這樣的對象：

arrayLikeObj = [ 
    { 
     65, 
     <audio data-key="65" src="sounds/clap.wav"></audio> 
    }, 
    { 
     83, 
     <audio data-key="83" src="sounds/hihat.wav"></audio> 
    }, 
    { 
     68, 
     <audio data-key="68" src="sounds/kick.wav"></audio> 
    } 
] 


const makeSound = function(soundNo) { 
    sounds[soundNo].play(); 
} 

Answer 1

試試這個：

const sounds = document.getElementsByTagName('audio'); 
 
const map = arr => fn => Array.prototype.map.call(arr, fn) 
 

 
const r = map(sounds)(s => Object.assign({[s.dataset.key]: s })) 
 
    .reduce((a, c) => Object.assign(a, c), {}) 
 

 
console.log(r)

<audio data-key="65" src="sounds/clap.wav"></audio> 
 
<audio data-key="83" src="sounds/hihat.wav"></audio> 
 
<audio data-key="68" src="sounds/kick.wav"></audio>

用法：

const makeSound = function(soundNo) { 
    r[soundNo].play(); 
} 

makeSound(83) 

Answer 2

JavaScript數組都是對象，但arrayLikeObj不是一個類似數組的對象：它是一個普通的對象陣！其實，arrayLikeObj是（無效）對象文字的數組。作爲wostex指出的那樣，我懷疑你想要的數據結構如下：

{ 
    65: <audio data-key="65" src="sounds/clap.wav"></audio>, 
    83: <audio data-key="83" src="sounds/hihat.wav"></audio>, 
    68: <audio data-key="68" src="sounds/kick.wav"></audio> 
} 

請注意，這不是一個類似數組的對象可能是因爲它不具有length財產。

要獲得這種數據結構，你可以使用一個for...of循環：

let elements = document.getElementsByTagName('audio'), 
 
    sounds = {}; 
 

 
for (const audio of elements) { 
 
    sounds[audio.getAttribute('data-key')] = audio; 
 
} 
 

 
const makeSound = function (soundNo) { 
 
    sounds[soundNo].play(); 
 
} 
 

 
console.log(sounds); 
 

 
makeSound(65); // <--- Try to change the number and run the script again...

<audio data-key="65" src="https://www.gnu.org/music/FreeSWSong.ogg"></audio> 
 
<audio data-key="83" src="https://www.gnu.org/music/free-software-song-herzog.ogg"></audio> 
 
<audio data-key="68" src="https://www.gnu.org/music/free-software-song-rhythmic.ogg"></audio>

隨意與片段（JSFiddle）玩。它工作正常，至少在Firefox支持Ogg的情況下...在Stack Overflow上，如果你想停止音樂，你可以「隱藏結果」。