像数据属性用作关键字的对象数组？

问题描述：

<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(); 
}

为什么你不把它作为一个对象，用'data-key'作为键？ – thefourtheye

什么是'soundNo'？ – Bergi

答

试试这个：

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)

答

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上，如果你想停止音乐，你可以“隐藏结果”。

像数据属性用作关键字的对象数组？

相关推荐