如何在函数之外访问Javascript变量值

Question

我整个晚上都用这个和另一个把头从砖墙上撞下来，但没有成功。我想做的是访问函数内但在该函数之外的数组中设置的值。这怎么可能做到呢？例如：

function profileloader()
{
    profile = [];
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
}

然后我会在页面下方的段落标记中添加类似以下内容的内容：

document.write("Firstname is: " + profile[0]);

显然，这将包含在脚本标记中，但我得到的只是控制台上的一个错误，指出：“profile[0] 未定义”。

有人知道我哪里出错了吗？我似乎无法弄清楚这一点，而且到目前为止，当我在函数之间或函数外部传递值时，我见过的其他解决方案都不起作用。

感谢任何可以帮助我的人，这可能是我错过的简单事情！

Answer 1

由于

var

前面没有

profile=[];

，因此它存储在全局窗口范围中。

我怀疑你在使用之前忘记调用 profileloader() 。

最好的做法是以明显的方式声明全局变量，如本页其他答案所示

依赖副作用并不被认为是好的做法。

使用 document.write 也不是一个好习惯 - 例如，如果在加载后执行，它会擦除页面。

---

注释代码以显示发生了什么，注意不推荐方法：

这应该有效。它确实有效：

function profileloader() {
  profile = []; // no "var" makes this global in scope
  profile[0] = "Joe";
  profile[1] = "Bloggs";
  profile[2] = "images/joeb/pic.jpg";
  profile[3] = "Web Site Manager";
}
profileloader(); // mandatory
document.write("Firstname is: " + profile[0]);

首选：

document.addEventListener('load', () => { // when the page loads
  let profiles = []; // now in scope of the load event handler

  const profileLoader = () => {
    // Simulate an Ajax call and populate the profiles array
    profiles.push({
      "First name": "Joe",
      "Last name": "Bloggs",
      "img": "images/joeb/pic.jpg",
      "Job title": "Web Site Manager"
    });
    profiles.push({
      "First name": "Jane",
      "Last name": "Bloggs",
      "img": "images/joeb/pic.jpg",
      "Job title": "CIO"
    });
  };

  profileLoader(); // mandatory
console.log(profiles)
  const profilesContainer = document.getElementById('profiles'); // Assuming <div id="profiles"></div> exists

  profiles.forEach(profile => {
    // Create a div for each profile
    const div = document.createElement('div');
    div.classList.add('profile');
console.log(profile)
    // Loop through profile keys and dynamically create elements
    Object.entries(profile).forEach(([key, value]) => {
      const isImage = key === 'profilePic';
      const elem = document.createElement(isImage ? 'img' : 'span');
      if (isImage) elem.src = value;
      else elem.textContent = `${key}: ${value}`;
      elem.classList.add(key.replace(/\s+/g,''));
      div.appendChild(elem); console.log(elem.outerHTML)
      if (!isImage) div.appendChild(document.createElement('br')); // Add line breaks for non-image fields
    });

    // Append the profile div to the container
    profilesContainer.appendChild(div);
  });
});

<div id="profiles">
</div>

Answer 2

在函数外部声明它，以便外部作用域可以看到它（但要小心全局变量）

var profile = [];
function profileloader(){
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
}

或者让函数返回它：

function profileloader(){
    var profile = [];
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
    return profile;
}

var myprofile = profileloader(); //myprofile === profile