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循环：

＆＃13;

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...

＆＃13;

<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>

＆＃13;

随意使用代码段（JSFiddle）。它工作正常，至少在支持Ogg的Firefox上......在Stack Overflow上，你可以＆＃34;隐藏结果＆＃34;如果你想停止音乐。

数组像对象，数据属性用作键？

2 个答案: