未使用use strict/constant却出现TypeError: 'x' is read-only错误排查

核心问题总结 #

报错和异常现象均指向fetchArray函数返回的emotionsArray不符合预期：要么是只读对象/非数组类型，导致数组方法调用失败；要么是数组元素结构错误，引发图片加载逻辑失效。

分步修复步骤 #

1. 解决只读与splice调用失败问题 #

• 验证fetchArray返回值类型：在调用shuffle或splice前，打印console.log(Array.isArray(emotionsArray))和console.log(Object.isFrozen(emotionsArray))，确认是可修改的原生数组。如果是类数组（如DOM集合），用Array.from(emotionsArray)转成原生数组；如果是冻结对象，移除Object.freeze()相关逻辑。
• 重构shuffle函数为非破坏性操作：如果原shuffle直接修改原数组，改成返回新数组的实现，避免触发只读限制：

  function shuffle(arr) {
    const newArr = [...arr];
    for (let i = newArr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
    }
    return newArr;
  }
  // 调用方式改为重新赋值
  emotionsArray = shuffle(emotionsArray);
  

• 检查数组元素类型：splice is not a function说明emotionsArray[i]不是数组，检查fetchArray返回的数组结构，确保每个元素都是预期的数组类型，而非单个字符串/对象。

2. 修复仅显示alt文本的问题 #

• 检查loadImageArray的图片赋值逻辑：确保正确设置src属性，路径需对应当前页面可访问的资源（避免使用API相对路径），示例：

  function loadImageArray(imgItem) {
    const img = document.createElement('img');
    // 确认src路径正确，可拼接绝对路径前缀
    img.src = `./images/${imgItem.src}`; 
    img.alt = imgItem.alt;
    return img;
  }
  

• 验证DOM插入流程：确保生成的<img>元素被正确添加到页面容器中，比如：

  const container = document.getElementById('img-container');
  emotionsArray.forEach(item => {
    const img = loadImageArray(item);
    container.appendChild(img);
  });
  

• 排查资源加载错误：打开浏览器控制台「网络」面板，查看图片请求状态，若为404则修正src路径。

3. 排查fetchArray的核心问题 #

• 确认fetch解析逻辑：确保API返回的JSON被正确解析为数组，示例：

  async function fetchArray(url) {
    const res = await fetch(url);
    const data = await res.json();
    // 验证返回数据结构
    if (!Array.isArray(data)) throw new Error('返回数据不是数组');
    return data;
  }
  

• 避免意外修改原数据：如果fetchArray中对返回数据做了过滤、映射操作，确保返回的是新数组，而非原响应的只读对象。

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