p5.js中loadStrings()加载文件后数组元素访问返回undefined问题排查

你遇到的这个情况，其实是浏览器控制台的一个小“坑”加上p5.js加载机制的细节导致的，我给你拆解下：

为啥会出现「数组能看到内容，但取元素是undefined」？ #

当你在preload里直接console.log(data)时，浏览器控制台并不会立刻把数组的真实内容打印出来——它只是存了一个指向数组的引用。等你后来在控制台点开数组查看时，数据已经完全加载好了，所以能看到正确的元素；但在你执行console.log(data[0])的那一瞬间，p5.js可能还没把加载完成的数据真正赋值到data数组里（哪怕网络请求已经返回200 OK了，内部的处理回调可能还没跑完）。

而且虽然p5.js的preload会等所有加载任务完成才进入setup，但在preload函数内部同步跑的代码，可能赶在加载回调完成前就执行了，这时候访问数组元素自然就是undefined。

最简单的解决办法 #

把访问数组元素的代码挪到setup函数里！因为setup是百分百在preload所有加载工作完成后才会执行的，这时候data数组已经被完全填充了：

var data;

function preload() {
  // 只专注加载数据，别在这里急着访问元素
  data = loadStrings('../txt/data.txt');
}

function setup() {
  console.log(data); // 这里数组内容完全没问题
  console.log(data[0]); // 这下能正确输出"abcde"啦
}

额外的排查小技巧 #

如果挪到setup还是有问题，可以检查这几点：

• 确认你的data.txt是UTF-8编码，没有奇怪的不可见字符搞事情
• 看看项目里有没有其他代码不小心把全局的data变量给覆盖了
• 试试用loadStrings的回调版本，确保数据加载完再处理：

  var data;
  
  function preload() {
    loadStrings('../txt/data.txt', function(loadedData) {
      data = loadedData;
      console.log(data[0]); // 这里能直接拿到正确值
    });
  }
  

这样应该就能解决你的问题啦～

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