es6 新增变量声明方式

2022-11-19 11:07:09

let 与 var

var

var声明的变量拥有全局作用域或者局部作用域

在全局中声明变量即为全局变量

在函数中声明变量即为局部变量

而var在使用过程中也逐渐暴露出许多问题

var的几大问题

变量提升

使用var来声明变量会出现变量提升的问题，即在声明变量之前就调用变量

console.log(info);//undefined

var info = 10;

出现上面情况其实是非常不好的，因为在声明之前使用的话应该去报出一个错误而不是用一个undefined给这个变量赋值。

这个问题在函数中尤为明显

var info = 10;

function fn1(){

    console.log(info);//undefined

    var info = 20;

}

fn1();

在循环中的问题

var在循环中的问题也是相当严重

下面我遇到的一个情况

//html中有四个span

var oSpan = document.getElementsByTagName('span');

for(var i = 0 ; i < oSpan.length ; i++ ){

    oSpan[i].onclick = function(){

        console.log(this);//点击出现 你点的那个span

    }

}

我们发现在这时是可以获得点击的元素的

但是我们把this换成oSpan[i]时就会出问题

for(var i = 0 ; i < oSpan.length ; i++ ){

    oSpan[i].onclick = function(){

        console.log(oSpan[i]);//点击出现 undefined

        console.log(i);//点什么都是4

    }

}

我们这个时候会发现我们已经选取不到事件处理函数中i的瞬时值了。而这又是因为什么呢

我们可以把代码拆开

//拆开for

var i = 0;

oSpan[i].onclick = function(){

    console.log(i);

}

var i = 1;

oSpan[i].onclick = function(){

    console.log(i);

}

...

var i = 3;

oSpan[i].onclick = function(){

    console.log(i);

}

var i = 4;

//在你点击的时候是在页面加载完才调用的函数

上面的会看出来由于var声明的变量是全局变量,所以函数中的变量接收是4

解决办法是在循环中写一个闭包函数，模拟一个块级作用域

for(var i = 0 ; i < 4 ; i++){

    oSpan[i].onclick = function(arg){

        return function(){

            console.log(arg);//出现 0,1,2,3

        }

    }(i);

}

然而es6给我们提供了更好的声明变量的方式

let

在es6中，let声明的变量是块级作用域

块级作用域是指在{}中间可以有效使用

for(let i = 0; i < 4 ; i++){

    oSpan[i].onclick = function(){

        console.log(i);

    }

}

上面的就可以找到i的瞬时值原因是每个i与下面的都是同一块作用域，而与另几个循环中的函数互不影响。所以每个函数调用的都是与其同一块作用域的i值。

let其他作用

在let声明的变量不可重复声明否者会报错

let b = 10;

let b = 20;//报错

let不会有变量提升这个问题，let会产生暂时性死区

console.log(a);//报错

let a = 20;

顶层对象的属性

在浏览器的顶层对象是window，在Node环境中是global。

在es5中顶层的属性与全局变量是等价的

window.a = 1;

a = 2;

console.log(window.a)//2

由于顶层对象的属性与全局变量相关，就会产生许多问题

无法再编译时就提示变量未声明的错误，只有运行在会知道
容易不知不觉的就创建出全局变量，导致顶层对象的属性到处都可以读写，这非常不利于模块化编程
window对象有实体含义，指的是浏览器窗口对象，这样也是不合适的

但是let声明的变量不属于顶层对象的属性

var a = 1;

console.log(this.a);//1

let b = 1;

console.log(this.b);//undefined

const

const也是es6的声明方式之一

const声明的变量大多数是做为一个常量,而作为常量时不可对值进行修改，变成只读模式



const INFO = 10;

INFO = 20; //报错

const INFO = 20;//报错

而当const声明的是一个引用数据类型的时候，引用类型内的值是可以修改的，因为引用类型的值存放在堆中的。修改操作是在堆中进行，而变量储存的是地址，不会被修改，而地址指向的数据已经发生改变，故而const声明的变量的值被修改了

const arr = [1,2,3,4];

arr.push(5);

console.log(arr);//[1,2,3,4,5]

码农公寓