前端学习（ES6）let 关键字笔记

Zzzzuo1999

已于 2022-03-04 16:59:01 修改

阅读量463

点赞数

文章标签：前端 javascript 学习 es6

于 2022-03-04 15:34:20 首次发布

本文链接：https://blog.csdn.net/weixin_43991459/article/details/123278005

版权

ECMA（European Computer Manufacturers Association）

ECMAscript 标准为：ECMA-262 的脚本程序设计语言

ES6第六版（2015年）（版本变动的里程碑、新语法特性更简单高效、）：模块化、面向对象语法、Promise、箭头函数、let、const、数组结构赋值等

let 关键字

变量的声明：不能重复声明，但var可以
块儿级作用域（只能在代码块中有效{}、包括if else while for中的{}）：全局，函数，eval
不存在变量提升
不影响作用域链

  <script>
        //声明变量
        let a;
        let b,c,d;
        let e = 100;
        let f = 521,g = 'i love you',h = [];
        //1.变量不能重复声明 但var可以
        // let star = 'r';
        // let star = 'dd';
        // Uncaught SyntaxError: Identifier 'star' has already been declared


        // 2.块儿级作用域（只能在代码块中有效{}、包括if else while for中的{}）：全局，函数，eval
        {
            let girl = '人1111'; //用var 可以输出
        }
        // console.log(girl);  
        // Uncaught ReferenceError: girl is not defined at
        
        //3.不存在变量提升
        // console.log(song);
        // var代码执行前先会收集
        // var song = '恋爱达人';

        // let song2 = '恋爱达人';
        //Uncaught ReferenceError: Cannot access 'song2' before initialization

        // 4.不影响作用域链（正常打印）
        {
            let school = 'xx学校';
            function fn(){
                console.log(school);
            }
            fn();
        }


    </script>

面试题：说对于作用域和作用域链的理解

**ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域**。ES6的到来，为我们提供了‘块级作用域’,可通过新增命令**let**和**const**来体现。

let 块儿级作用域实践

点击与this 关键字作对比点击div块儿换颜色

<title>let-实践案例</title>
    <style>
        .container{
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        .page-header{
            padding-bottom: 9px;
            margin:40px 0 20px;
            border-bottom: 1px solid #eee;
        }

        .item{
            width:100px;
            height:50px;
            border:solid 1px rgb(42, 156, 156);
            float:left;
            margin-right: 10px;
        }
    </style>

css部分

<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //获取div元素对象
        let items = document.getElementsByClassName('item');
        //遍历并绑定事件
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function(){
                items[i].style.background = 'pink';
                //let i 只在自己的代码块有效
            }
        }
    </script>
</body>

ES6之前的语法

//修改背景颜色
 this.style.background = 'pink';
 
 //获取div元素对象（如果使用 var定义）点击div块将无法完成任务
        var items = document.getElementsByClassName('item');
          // var i是全局变量，循环完成后i就是3了，items这个索引最大2
          console.log(i); //3

Zzzzuo1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习（ES6）let 关键字笔记

ECMA（European Computer Manufacturers Association）ECMAscript 标准为：ECMA-262 的脚本程序设计语言ES6第六版（2015年）（版本变动的里程碑、新语法特性更简单高效、）：模块化、面向对象语法、Promise、箭头函数、let、const、数组结构赋值等let 关键字 <script> //声明变量 let a; let b,c,d; let e = 100;
复制链接

扫一扫