前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6 折腾记 - let/const 块级变量及块作用域

ES6 折腾记 - let/const 块级变量及块作用域

作者头像
CRPER
发布2024-02-02 15:07:57
1280
发布2024-02-02 15:07:57
举报
文章被收录于专栏:CRPER折腾记

前言

代码语言:javascript
复制
话说ES6之前有局部变量,全局变量,唯独木有块级变量;也没有常量之说...

块级变量let及常量const

var

ES5及之前是木有块级变量这个说法的,常规性是用闭包来防止变量泄露; 我来列出下ES5 var声明的一些特点

  1. 函数内的变量若是带var声明,则会覆盖外部的全局变量优先使用;若是函数内部声明变量不带var,则直接覆盖同名的全局变量
  2. 函数内存在变量提升的情况,可以先使用后声明
  3. for循环中的var会污染全局【不局限于循环内】
代码语言:javascript
复制
// 1.
        var test1 = 5;
        function f(){
            var test1 = 3;
            console.log(test1);
        }
        f(); //打印出的结果是3


//2.
        var test1 = 5;
        function f2(){
            console.log(test1);
            var test1 = 3;

        }
        f2(); //打印结果是undefined, JS允许不存在的变量先使用,默认会初始化为一个undefined


//3. 

        for(var i = 0 ; i < 9 ; i++){
            console.log("循环内部"+i);
        }

        console.log(i); //打印值为 9 
        console.log(i * 5); // 打印值为 45

let

而ES6中出了一个新变量,不在于取代var,而在于解决ES5中var声明中的一些痛点;这货就是let了 我来说说这货的特点

  1. let是块级变量,不存在于window下[非全局属性],window.变量名是找不到这货的,它的生活空间就那么一小块
  2. let不允许重新声明同名变量,会抛出异常,具有唯一性;
  3. let不允许没声明就使用,会抛出异常,只有执行该声明的时候才能使用;
  4. let有自己特色的闭包特性,比如在for循环的应用中
代码语言:javascript
复制
//1.
   let tt = '哟哟切克闹!';
    console.log(tt); //打印出'哟哟切克闹!'
    console.log(window.tt); //打印出undefined



//2.
    function test2(){
        var abc = 99;
        let abc = 88;
        console.log(abc);
    }
    test2()//打印值:Uncaught SyntaxError: Identifier 'abc' has already been declared


//3.
    function test3(){
        console.log(test3);
        let test3 = '恭喜发财!!';
    }
    test3();//打印值:Uncaught ReferenceError: test3 is not defined

//4. 每一次for循环都重新绑定一次作用域且脱离失效,就是let自身的特色
    for(let i= 0 ; i < 9 ; i++){
        console.log("循环内的值是: "+i);
    }
    console.log(i); //打印值看下面

/*
循环内的值是: 0
test.html:10 循环内的值是: 1
test.html:10 循环内的值是: 2
test.html:10 循环内的值是: 3
test.html:10 循环内的值是: 4
test.html:10 循环内的值是: 5
test.html:10 循环内的值是: 6
test.html:10 循环内的值是: 7
test.html:10 循环内的值是: 8
test.html:12 Uncaught ReferenceError: i is not defined
*/

const

const的也有一些自身特点:

  1. let一样,具有唯一性,不可重复声明;
  2. 可以理解为只读变量,但是并非一成不变 — 值得一提哦
代码语言:javascript
复制
//1.
    var qwe = 22;
    const qwe = 11;// Uncaught SyntaxError: Identifier 'qwe' has already been declared(…)

//2.
    const N = 99; //现在状态我是只读变量么,答案是的。。更改抛出异常;

    const N1 = [1,'2'];
    const N2 = {a:'b'}; //数组和对象这状态是只读不可变的么。。。答案不是的,还能操作数组内的数据及对象数据的变动~~~~~记得么!!!!


/* 不信瞅瞅
声明:const N1 = [1,'2'];
数组操作:N1.push(6)
输出结果:[1, "2", 6]


声明:const N2 = {a:'b'};
对象操作:N2.add = [1,2,3]
输出结果:Object {a: "b", add: Array[3]}
*/

显式作用域

这货和let是好基友;为了让我们代码更加清晰,不至于越来越混乱,为了更美好的明天,我们有必要引入显式块级作用域;

  • 写法: {} — 对象!!!! , 不,这货就是显式块级作用域
代码语言:javascript
复制
var idea = "playGame";

if(idea){
    {
        let gameName = 'LOL';

        //我就是显式块级作用域
        //玩游戏肯定要专心啊,但是脱离游戏状态就要果断点额;
        //do somethins .... LOL ,Dota2..

    }
    console.log('I hope play'+gameName); //玩你妹,学习去
}

温馨提示let最好结合显式块级作用域一起用,或者在闭包中,在全局中使用【没把握好,容易一堆报错;】

总结

本来想扯扯作用域这块,,,但。。。。心有余而力不足。因为说到作用域,就不得不提闭包,说到闭包就不得不提this;那么说到this,又能扯到ES5的call,apply,bind,IIFE,try..catch这些,ES6的箭头函数。。。让我捋捋头绪再总结一下吧。知识面涉及比较广

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-02-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 块级变量let及常量const
    • var
      • let
        • const
          • 显式作用域
          • 总结
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档