データ属性をキーにしたオブジェクトのような配列ですか？

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プロパティを持っていないため。

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）と遊ぶこと自由に感じなさい：

は、このデータ構造を取得するには、 for...ofループを使用することができます。少なくともOggがサポートされているFirefoxではうまくいきます...音楽を停止したい場合は、スタックオーバーフローで「結果を隠す」ことができます。