如何使用JavaScript的fill()方法简化initiliazeField函数实现？

原代码通过嵌套for循环生成带孔洞的二维数组场地，以下是用fill()方法简化后的实现，同时修复了原函数的一些逻辑问题：

const hole = 'O';
const fieldCharacter = '░';

function initiliazeField(height, width, percentage) {
    // 先校验参数合法性，避免重复检查
    if (percentage < 0 || percentage > 35) {
        console.log('Please enter a number between 0 - 35');
        return;
    }

    // 生成单个位置的字符（无需重复传参）
    const getFieldChar = () => Math.floor(Math.random() * 35) < percentage ? hole : fieldCharacter;

    // 用fill() + map()生成二维数组
    const field = Array(height).fill().map(() => 
        Array(width).fill().map(getFieldChar)
    );

    // 打印场地
    field.forEach(row => console.log(row.join(' ')));
    // 返回生成的场地数组（原函数返回的是undefined，这里改为返回实际数据）
    return field;
}

// 调用示例
initiliazeField(20, 20, 20);

简化点说明： #

• 替代外层循环：用Array(height).fill()创建一个长度为height的数组，再通过map()遍历每个元素生成对应的行，替换原有的外层for循环。
• 替代内层循环：每行同样用Array(width).fill()创建长度为width的数组，再map()调用getFieldChar()生成每个位置的字符，替换内层for循环。
• 优化参数校验：把百分比的合法性检查提到最前面，避免原函数中每次生成字符都重复校验，提升效率。
• 修复返回值问题：原函数返回的是forEach()的执行结果（固定为undefined），优化后先生成完整的二维数组，再单独处理打印，同时返回场地数组，让函数更具复用性。
• 简化字符生成逻辑：把fieldOrHole函数改为无参的getFieldChar，因为百分比参数已经在外部校验过，无需重复传递。

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