本文探讨JavaScript中异步请求数据赋值给全局变量的可行性,通过微信小程序开发实例分析延时打印现象。同时详细列举并演示原生JS中通过window、let、const、Object及Function构造函数五种方式设置和获取全局变量的具体代码与注意事项。
JavaScript异步获取的数据能否成功赋值给全局变量
结论:可以!
在开发微信小程序时,需要将接口请求到的数据存储到当前区域的全局变量中。由于网络请求是异步执行的,直接打印往往会出现undefined或初始值的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>万物皆有自己的轨道,迁跃需要能量</div>
<script>
var goodsInfo = {};
$(document).ready(function(){
$.ajax({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",success:function(result){
goodsInfo = result;
console.log(goodsInfo);
}});
console.log(goodsInfo);
var time = 40;
setTimeout(()=>{console.log(goodsInfo);},time);
});
</script>
</body>
</html>当设置延时时间为40ms时,通过浏览器刷新页面,有时能打印出数据,有时则无法获取。
无数据打印的情况

有数据打印的情况

这种方式虽然存在一定局限性,但如果数据并非立即使用,这种方法是可以接受的。当然,还有更优的异步处理方案。
原生JavaScript设置并获取全局变量的方法
原生JavaScript设置并获取全局变量的核心技巧。
主要包含且仅以下五种方式。
1. 通过window对象设置和获取全局变量
利用window对象设置和获取全局变量。window对象是所有全局变量的所有者,作为JavaScript的最顶层对象,我们可以通过它来定义和访问全局变量。
示例如下:
// 设置全局变量
window.myGlobalVariable = "Hello World!";
// 获取全局变量
alert(window.myGlobalVariable); // 输出 "Hello World!"2. 使用ES6新增的let命令声明全局变量
使用let命令声明的全局变量会成为全局对象的属性,从而在任何地方都可以被访问到。需要注意的是,它不会受到函数作用域或块级作用域的限制而改变其全局属性身份。
示例如下:
// 使用let声明全局变量
let myGlobalVariable = "Hello World!";
// 获取全局变量
alert(window.myGlobalVariable); // 输出 "Hello World!"3. 使用ES6新增的const命令声明全局变量
使用const命令声明的全局变量同样会变为全局对象的属性,可以在任何地方访问。
此外,使用const声明的全局变量一旦声明,在全局范围内即不可变,无法再次被重新赋值。
示例如下:
// 使用const声明全局变量
const myGlobalVariable = "Hello World!";
// 获取全局变量
alert(window.myGlobalVariable); // 输出 "Hello World!"4. 使用Object对象设置和获取全局变量
Object对象是JavaScript中的内置对象,可用于访问全局变量。我们可以在Object对象上新增一个属性,随后通过该属性即可访问到对应的变量。
示例如下:
// 使用Object对象设置全局变量
Object.myGlobalVariable = "Hello World!";
// 获取全局变量
alert(window.myGlobalVariable); // 输出 "Hello World!"5. 使用Function构造函数设置和获取全局变量
Function构造函数是JavaScript中的内置函数,既可用于创建新函数,也可用于访问全局变量。
我们可以利用Function构造函数创建一个函数,并将全局变量作为该函数的参数传递进来,从而访问到该变量。
示例如下:
// 使用Function构造函数设置全局变量
var myGlobalVariable = "Hello World!";
var getGlobalVariable = new Function("return myGlobalVariable;");
// 获取全局变量
alert(getGlobalVariable()); // 输出 "Hello World!"总结
以上为个人经验总结,希望能给大家提供参考,也希望大家多多支持本站。