• 技术文章 >web前端 >前端问答

    详细分析使用let声明变量的优势

    WBOYWBOY2022-08-09 16:25:49转载272
    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了使用let声明变量的好处,ES6不仅引入了let关键字用于解决变量声明的问题,同时引入了块级作用域的概念,下面一起来看一下,希望对大家有帮助。

    大前端成长进阶课程:进入学习

    【相关推荐:javascript视频教程web前端

    使用Let声明变量

    ES6不仅引入了let关键字用于解决变量声明的问题,同时引入了块级作用域的概念。

    块级作用域:

    代码执行时遇到花括号{会创建一个块级作用域、花括号}结束,销毁块级作用域。

       let a = 123;//全局作用域定义
       
       {
       	let a = 456;//然后定义块级作用域
       	console.log(a)//使用的时块级作用域中的a
       }
       console.log(a)//使用的全局作用域中的a
    有了块级作用域之后它的使用范围跟函数一样被限制在了里面
    这样更符合常规语言的逻辑,几乎所有的语言都是这样的,但是因为JS以前有变量提升导致了以前很混乱
    现在有了"let"之后有效的改善了这样的局面

    全局变量挂载到全局对象:全局对象污染问题

    let a = 123;console.log(a)//输出undefined

    而用var声明赋值的话则会挂载到全局
    仅仅是这么一个改动我们都无法拒绝使用Let

    允许重复的变量声明:导致数据被覆盖的问题

    let声明变量不允许当前作用域范围内重复声明

    变量提升?:怪异数据访问闭包问题

    在循环中let会做特殊处理

    //这时我绑定了10个按钮让咋们在点击时输出对应的ifor (let i = 1; i < 10; i ++) {
    	btn.function () {
    		console.log(i)//使用的时当前作用域的i
    	}}

    示例如下:

    为什么要使用let去替代var?

    因为var没有块级作用域的限制,容易造成变量污染。

    下面我们来看几个在let没出现之前,没有块级作用域时会带来的问题。

    1.变量作用域

    21.png

    22.png

    2.没有块级作用域的if语块

    23.png

    这看起来好像没什么,但我们如果场景时这样呢?

    24.png

    25.png

    为什么会这样?我们只是在if语句块外面的修改了name,却影响了整个if语句的输出。

    3.没有块级作用域的for语块

    26.png

    27.gif

    我们可以看出,无论我们点击哪个按钮,输出的都是第五个按钮被点击,为什么会这样?因为这就跟我们在循环体内用var定义有关。

    在没有块级作用域之前,我们是通过闭包来解决这种尴尬的,因为闭包有自己的函数作用域。

    29.png

    30.gif

    使用了let后,我们只需要做出细微的改变,将循环体中var变成let,就可以避免使用闭包这种难度大的语法。

    31.png

    32.gif

    循环体中let实现原理:

    33.png

    你们会问,那使用var之前是怎样的?

    34.png

    ES5之前因为if和for都没有块级作用域的这样一个概念,所以在很多具体的应用场景,我们都必须去借助于function的作用域来解决应(调)用外面变量的的问题。

    ES6家庭中,加入了let和(const),使if和for语句有了块级作用域的存在(原先的var并没有块级作用域的概念)。

    let的出现,通过上述例子,可以说很好弥补了var现存的缺陷,我们可以把let看成完美的var,或者是对var的修整和升级,优化。

    35.png

    【相关推荐:javascript视频教程web前端

    以上就是详细分析使用let声明变量的优势的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript
    上一篇:实例详解使用var声明变量的不足 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• JavaScript HTML DOM导航(总结分享)• 详解JavaScript如何操作元素属性,样式和类名• 快速讲解JavaScript如何操作元素内容• 详解JavaScript实现全选和反选的功能(附代码示例)• 一文详解Javascript类选择器方法
    1/1

    PHP中文网