为何array.join()返回空字符串？console.log显示数组有内容

这是个典型的异步操作时序问题，我来帮你拆解清楚：

为什么会出现这个矛盾？ #

你代码里的jQuery.getJSON是异步HTTP请求——简单说就是：forEach会快速遍历完names数组，一口气发出所有请求，但这些请求的回调函数（就是你用来往urlname里push数据的那个函数）并不会立刻执行，得等服务器把数据返回后才会触发。

而你后面的console.log(urlname)和urlname.join("")是同步执行的——在所有异步请求还没拿到数据、还没往数组里塞内容的时候，这两行代码就已经跑完了。

那为什么控制台能看到完整数组？这是浏览器控制台的“小特性”：它显示的是数组的实时引用，当后面异步回调执行完往数组里加了内容，你点开控制台里的数组展开项时，看到的是更新后的状态，但执行join的那一刻，数组确实是空的，所以输出空字符串。

解决方案 #

我们需要等所有异步请求都完成后，再去处理urlname数组，这里给你两种常用的写法：

方案1：用Promise.all批量处理异步请求 #

把每个getJSON包装成Promise，然后用Promise.all等待所有请求完成：

var names = []; 
var urlname = []; 
// 加个默认值，防止localStorage里没有数据时返回null导致报错
names = JSON.parse(localStorage.getItem('saved-names')) || []; 

// 把每个请求转换成Promise
const requestPromises = names.map(key => {
  return new Promise((resolve, reject) => {
    jQuery.getJSON(`https://webpro.com/api/v5/info.php?name=${key}`, function(data) {
      // 处理当前请求返回的数据
      const newItems = data.map(val => `||1 ${encodeURIComponent(val.name)}`);
      resolve(newItems);
    }).fail(error => {
      // 别忘了处理请求失败的情况
      reject(`获取${key}的数据失败：${error}`);
    });
  });
});

// 等待所有请求完成后再处理结果
Promise.all(requestPromises)
  .then(allResults => {
    // 把所有请求返回的结果合并到urlname
    urlname = urlname.concat(...allResults);
    console.log(urlname); // 这里的数组是完整的
    console.log("String: " + urlname.join("")); // 现在能正确输出拼接后的字符串
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

方案2：用async/await（更简洁易读） #

如果你的运行环境支持ES6+的async函数，可以用这种更直观的写法：

async function fetchAndProcessNames() {
  // 先获取本地存储的名字列表，加默认值防错
  var names = JSON.parse(localStorage.getItem('saved-names')) || [];
  var urlname = [];

  // 用for...of循环代替forEach，因为forEach不支持await
  for (const key of names) {
    try {
      // 等待当前请求完成后再继续下一个
      const data = await jQuery.getJSON(`https://webpro.com/api/v5/info.php?name=${key}`);
      const newItems = data.map(val => `||1 ${encodeURIComponent(val.name)}`);
      urlname.push(...newItems);
    } catch (error) {
      console.error(`处理名字${key}时出错：`, error);
    }
  }

  // 所有请求完成后再打印和拼接
  console.log(urlname);
  console.log("String: " + urlname.join(""));
}

// 调用这个异步函数
fetchAndProcessNames();

核心总结 #

异步操作不会阻塞代码的执行顺序，所以依赖异步结果的逻辑，必须放在异步任务完成之后执行，不能和异步任务同步跑。

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