微信小程序--var、let、const的用法及区别

时间:2023-01-12 17:02:51


前言

    初学小程序时,在js中经常会申明变量,但是有时用var,有时用let,有时又用const。开始也没有仔细去研究区别,反正一律就用var(现在看来,以前的自己好懒)

var

概念:var申明的变量是全局变量,其作用域为所在的函数内

Page({

data: {

},
onLoad: function (options) {
var k=this
k.a()
k.b()
},
a:function(){
var a=4
console.log("a函数中a="+a)
},
b:function(){
var a=5
console.log("b函数中a=" +a)
}

})

操控台打印结果

微信小程序--var、let、const的用法及区别


总结:从上面的测试代码我们可以看出,var 申明变量的作用范围只是在本函数内,在其他函数中是不起作用的。就像上述例子中a方法中的a变量只存在于a函数,对b函数中的a无影响。

let

概念:let申明的变量是局部变量,该变量只会在最靠近{ }内的范围有效,出了{}之后,该变量就不能够再用了,否则会报该变量未定义的错误。也就是说,该变量的作用域为所在的代码块内。

Page({

data: {

},
onLoad: function (options) {
var k=this
k.a()
},
a:function(){
let i=1
for(let i=0;i<5;i++)
{
console.log("括号中的i="+i)
}
console.log("括号外面的i="+i)
},
})

控制台打印结果

微信小程序--var、let、const的用法及区别


总结:从上面的测试代码我们可以看出,let申明变量的作用域只存在局部(可以理解为一个中括号内)。一旦出了括号,变量值就不是预先申明的值。

const

概念:一般用于申明常量,一般写在js文件的开头

const x=1
Page({

data: {

},
onLoad: function (options) {
var k=this
k.a()
k.b()
},
a:function(){
console.log("a函数中x="+x)
},
b:function(){
console.log("b函数中x=" + x)
}

})

控制台打印结果

微信小程序--var、let、const的用法及区别


总结:可以看出,申明在js头部的const 常量,在整个js中都可以得到该变量的值。那么假设:a函数中申明一个const常量,那么b函数中可以正确打印其值吗?

测试!

Page({

data: {

},
onLoad: function (options) {
var k=this
k.a()
k.b()
},
a:function(){
const x = 1
console.log("a函数中x="+x)
},
b:function(){
console.log("b函数中x=" + x)
}

})

控制台打印结果

微信小程序--var、let、const的用法及区别


说明:这里可以看出,a函数中申明的const常量x,在b函数中并不可以正确打印其值,说明其作用域并没有在b中!如果以后需要js中所有的函数都可以使用一个常量,那么就应该在js文件最上方申明const常量。