JavaScript for循环判断字符串是否在数组的实现及TypeError报错修复

报错根因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'includes')错误核心是写法逻辑错误，同时配套的随机生成函数也存在隐式问题：

• 你写了options[i].includes(flavorStr)，本意是判断当前口味是否在options数组内，但加了[i]变成取数组第i个元素再判断，而options固定长度为3，循环中i最大为5，超出数组索引范围后options[i]就是undefined，调用方法自然报错。
• generateOptions函数直接将randomizedOptions指向全局数组gFlavors，属于引用赋值，修改randomizedOptions会直接篡改原全局数组，运行几次后gFlavors就会被切成只剩3个元素，后续逻辑全错。
• 仅做了一次重新生成的判断，如果第二次生成的数组仍不包含当前口味，逻辑就不生效，需要循环生成直到满足条件。

修复后完整代码 #

var gFlavors = ['vanilla', 'chocolate', 'strawberry', 'lemon', 'peanutbutter']
// 提前替换为你实际的口味容器DOM选择器
var elFlavorsDiv = document.querySelector('.flavors-container');

function getFlavor() {
    for (var i = 1; i <= gFlavors.length; i++) {
        // 创建图片节点
        const flavor = new Image(150, 150);
        const currentFlavor = gFlavors[i - 1];
        flavor.src = 'img/' + i + '-' + currentFlavor + '.gif';
        flavor.setAttribute('class', 'flavor');
        flavor.setAttribute('data-flavor', currentFlavor);
        elFlavorsDiv.appendChild(flavor);

        // 生成随机数组，直到包含当前口味
        let options = generateOptions();
        while (!options.includes(currentFlavor)) {
            options = generateOptions();
        }
        // 此处补充你拿到符合要求的options后的业务逻辑
        console.log(currentFlavor + ' 对应的随机数组：', options);
    }
}

// 返回3个随机口味的数组的函数
function generateOptions() {
    // 浅拷贝原数组，避免修改全局gFlavors
    const randomizedOptions = [...gFlavors];
    // 洗牌一次即可
    shuffle(randomizedOptions);
    // 取前3个元素返回
    return randomizedOptions.slice(0, 3);
}

// 数组洗牌函数
function shuffle(array) {
    array.sort(() => (Math.random() - 0.5));
}

核心修改说明 #

1. 删除了错误的options[i]索引，直接调用options.includes(flavorStr)判断口味是否存在
2. 替换单次判断为while循环，持续生成随机数组直到包含当前循环对应的口味
3. generateOptions中先对全局数组做浅拷贝，避免操作时修改原数组
4. 简化随机数组生成逻辑，洗牌一次后截取前3个元素即可，删除原多次循环的冗余逻辑
5. 优化了口味取值逻辑，无需从src属性重复解析，直接用循环中已有的gFlavors[i-1]即可，避免解析出错
6. 删除了elFlavorsDiv前多余的var声明，避免变量声明错误

内容的提问来源于stack exchange，提问作者troubledcoder