forEach遍历对象数组时textLines/messages未定义问题求助

我尝试用forEach循环遍历对象数组，但获取数组元素时一直提示textLines/messages未定义。我想获取完整对象并用split("")提取文本的每个字符，直接打印数组能正常显示对象数组，但获取数组长度等属性时就显示未定义，请问该如何正确定义数组内的元素（对象）？

代码示例 #

function say(messages = [{text: ' ', speed: 90, pause: false, colour: ['RED//BLUE']}]){        
  let alphabets = [];                                  
  let textLines = messages

  console.log(textLines.length)
  
  textLines.forEach((line, i) => {                       
    if (i < textLines.length - 1)  line.text += " ";        
    
    console.log(typeof textLines[1])
    line.text.split("").forEach((alphabet) => {        
      let span = document.createElement("span");
        span.textContent = alphabet;                       
        textContainer.appendChild(span);
        alphabets.push({                                  
          span: span,
          isSpace: alphabet === " " && !line.pause,
          delayAfter: line.speed,
          classes: line.classes || []
        });
    });
  });

  function revealLetter(list) {
    let nextLetter = list.splice(0, 1)[0];        
    nextLetter.span.classList.add("revealed");        
    nextLetter.classes.forEach((c) => {
        nextLetter.span.classList.add(c);       
    });
    let delay = nextLetter.isSpace && !nextLetter.pause ? 0 : nextLetter.delayAfter;        
    
    if (list.length > 0) {
        setTimeout(function () {         
          revealLetter(list);
        }, delay);      // the delay is the talking speeds
    }
  }

  setTimeout(() => {        // to start the loop
    revealLetter(alphabets);   
  }, 600)
}

say({             // can change what's said, the colour of text, the speed its displayed and if there's a pause (4 things)
  messages: [
    {text: 'Literally what does that even mean???',
    speed: talkingSpeeds.fast,
    pause: false,
    },

    {text: 'Like. what?',
    speed: talkingSpeeds.normal,
    pause: true
    },
    
    {text: 'Stop talking.',
    speed: talkingSpeeds.slow,
    pause: true,
    colour: ['red']
    }
  ]
})

问题原因及修复方案 #

核心问题 #

你调用say函数的方式和函数定义不匹配：函数里messages参数预期接收数组，但你实际传了一个包含messages属性的对象。这就导致函数内部的messages变成了这个传入的对象，而不是数组，对象没有length属性，所以会提示undefined。

两种修复方式 #

方式一：调整函数调用，直接传数组

把调用时的对象包裹去掉，直接传入数组：

say([
  {text: 'Literally what does that even mean???',
  speed: talkingSpeeds.fast,
  pause: false,
  },
  {text: 'Like. what?',
  speed: talkingSpeeds.normal,
  pause: true
  },
  {text: 'Stop talking.',
  speed: talkingSpeeds.slow,
  pause: true,
  colour: ['red']
  }
])

方式二：修改函数参数，适配当前调用格式

如果想保留现在的调用方式（传配置对象），就修改函数的参数结构，通过解构获取messages：

// 修改函数参数为配置对象，解构出messages，同时保留默认值
function say({ messages = [{text: ' ', speed: 90, pause: false, colour: ['RED//BLUE']}] } = {}){        
  let alphabets = [];                                  
  let textLines = messages

  // 后续代码保持不变...
}

额外注意点 #

• 确保textContainer元素在函数外部已经正确获取（比如通过document.getElementById或其他方式），否则会报错无法找到该元素
• talkingSpeeds对象需要提前定义，比如：const talkingSpeeds = { fast: 50, normal: 90, slow: 150 }，不然会出现未定义错误

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