ES6 丨ES6中的块级变量let、块级常量const以及块级作用域

最新推荐文章于 2023-11-04 12:38:31 发布

小何何何

最新推荐文章于 2023-11-04 12:38:31 发布

阅读量319

点赞数

分类专栏： JavaScript 文章标签： javascript es6

本文链接：https://blog.csdn.net/Hec990/article/details/109301536

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

变量let

变量let 主要内容：
1.变量不能重复声明；
2.let是块级作用域，只在{}里才有效；
3.不存在变量提升；
4.不影响作用域链。

代码演示：

// 声明变量
let a;
let a,b,c;
let l =100; g ='iloveyou', h = [];

// 1.let变量不能重复声明  star属于变量
let star = 'hec';
let star = 'heshunchang';  // 报错

// 2.块儿级作用域 全局，函数，eval（这个是ES5严格模式下）
// let是块级作用域，只在{}里有效
{
let name = '何顺昌'；
console.log(name);  // 这个是在块级作用域内 正常输出 何顺昌
}
console.log(name);  // 这个是块级作用域外 会报错

// 3.let不存在变量提升
console.log(song);
let song = 'hello'；  // 报错

// 假如换做var是可以正常运行的(undefined)，var存在变量提升
console.log(song);
var song = '渣渣辉'；

// 上面相当于做了这样一个操作
var song；
console.log(song); // undefined

// 4.不影响作用域链
{
 let school = '霸王'；
 function fn(){
 console.log(school);  //输出 霸王
 }
fn();
}

let实践案例

需求：点击任意一个div显示颜色；

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<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++){
            // 点击item任意一个，显示颜色
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                // this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
    </script>
</body>
</html>

常量const

常量const 主要内容：
1.什么叫定义常量，答：值不能修改的叫常量；
2.一定要赋初始值;
3.一般常量使用大写（潜规则）;
4.常量的值不能修改;
5.const 也是块级作用域，在外引用会报错;
6.对于数组和对象的元素修改，不算做对常量的修改，不会报错。
代码演示：

// 什么叫定义常量？ 答：值不能修改的叫常量；

// 声明常量
// const SCHOOL = '学校';

// 1.一定要赋初始值
const A; //报错  常量一定要赋初始值  
const A =100; //正确

// 2.一般常量使用大写（潜规则）
const a =100;  // 不规范 

// 3.常量的值不能修改
// SCHOOL = 'ATGUIGU' // 报错

// 4.const 也是块级作用域 ，在外引用会报错
// {
//    const PLAYER = 'UZI';
// }
// console.log(PLAYER);

// 5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
const TEAM = ['UZI','MXLG','LINING','ANTA'];
// push是添加字符串到数组后面
TEAM.push('Meiko');