时间戳

首页 > 解决方案 > 一种编写 for 循环的更短的方法，避免制作太多类似的 if？

javascript - 一种编写 for 循环的更短的方法，避免制作太多类似的 if？

问题描述

我想避免为大量项目编写大量代码。例如，我有这个：

let f_a = document.querySelector('#FToneA');
let f_b = document.querySelector('#FToneB');
let f_c = document.querySelector('#FToneC');
// etc...
let fNameList = [f_a, f_b, f_c,]; // etc...

let fToneA = new Audio('../instrumentarium/assets/snd/flute/A_F.wav');
let fToneB = new Audio('../instrumentarium/assets/snd/flute/B_F.wav');
let fToneC = new Audio('../instrumentarium/assets/snd/flute/C_F.wav');
// etc...
let fToneList = [fToneA, fToneB, fToneC,]; // etc...

然后我有每个元素应该发生的事件，即当您将鼠标悬停在一个元素上时播放一个 .wav 文件。

for (var t of fNameList) {
    t.addEventListener('mouseover', function() {
        function tSet(tone) {
            tone.play();
        };
    if (this === f_a) {
        tSet(fToneA);
    } else if (this === f_b) {
        tSet(fToneB);
    } else if (this === f_c) {
        tSet(fToneC);
    } // etc...

我想要做的类似于你在 Python 中使用 list.index() 做的事情，所以我尝试做的而不是上面的事情如下：

for (var nameIndex of fNameList) {
    nameIndex.addEventListener('mouseover', function() {
        for (var toneIndex of fToneList) {
            if (fNameList.indexOf(nameIndex) === fToneList.indexOf(toneIndex)) {
                toneIndex.play();
            }
        }
    })
};

换句话说，在 Python 中它只是 index() 而不是 indexOf()。但我想我在这里做错了什么。最有可能在“toneIndex.play()”上方的那一行。因为我悬停/单击的每个元素只播放一个声音。

谁能帮我正确地写这个？

标签： javascript

解决方案

考虑使用数组数组，将每个元素（例如#FToneA）与相关音频配对，然后在闭包中引用两者：

const audioTonePairs = [
  [document.querySelector('#FToneA'), new Audio('../instrumentarium/assets/snd/flute/A_F.wav')],
  [document.querySelector('#FToneB'), new Audio('../instrumentarium/assets/snd/flute/B_F.wav')],
  [document.querySelector('#FToneC'), new Audio('../instrumentarium/assets/snd/flute/C_F.wav')]
];

for (const [toneElm, audio] of audioTonePairs) {
  toneElm.addEventListener('mouseover', () => audio.play());
}

确保使用const, not var，以便循环闭合正常工作。

您可能也想构建audioTonePairs较少重复的内容：

const audioTonePairs = ['A', 'B', 'C'].map(key => [
  document.querySelector(`#FTone${key}`),
  new Audio(`../instrumentarium/assets/snd/flute/${key}_F.wav`),
]);

推荐阅读