ES6特性：变量(let、const)

持久的棒棒君

已于 2022-08-13 12:01:55 修改

阅读量208

点赞数

分类专栏：大杂烩文章标签：前端 es6 javascript

于 2022-05-07 14:20:36 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/124629832

版权

大杂烩专栏收录该内容

261 篇文章 3 订阅

订阅专栏

变量声明

在ES5中，我们通常使用var声明一个变量，但是var有很多奇葩的特性，这些特性与常规的编程语言都不太相同，在ES6中，又提供了与常规语言类似的声明变量的方法。

let关键字

使用let来声明一个变量，let对比var有如下特点：

变量声明不会被提升，即在变量声明之前无法使用该变量

  // 报错，不能在变量声明前使用该变量
  console.log(a);
  let a = 1;

具有块级作用域，即let声明的变量只能在对应代码块中使用

  {
  	let a = 1;
  }
  // 报错
  console.log(a);

不允许重复声明

  let a = 1;
  // 下方代码报错，不能重复声明a变量
  let a = 2;

不影响作用域链

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let变量经典案例</title>
</head>

<body>
    <!-- 点击切换颜色 -->
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        let items = document.getElementsByClassName("item");

        // 第一种方式：可行
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                //修改当前元素背景颜色
                this.style.background = "pink";
            }
        }

        // 第二种方式：不可行
        for(var i = 0; i<items.length; i++){
            items[i].onclick = function(){
                items[i].style.background = "pink";
            }
        }

        /* 为什么不可行呢？
        使用var每次定义i时，并没有局部定义域，i是在全局作用域中存在的。
        这里的i是一个全局变量，在经过自增之后，最终i变为了3，
        在点击div时会调用回调函数，并且会一层一层往上找变量i，
        而此时的i是全局变量，且i=3，找不到对应要调用的回调函数，
        所以没有效果。
        */

        // 第三种方式：将var用let代替，可行
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                items[i].style.background = "pink";
            }
        }
        /* 原理是：
            let自身具有局部作用域，每次用let声明一个变量时，都会创建局部作用域，如下
            {
                let i = 0;
                items[i].onclick = function () {
                    items[i].style.background = "pink";
                }
            }
            当触发回调函数时，会一直往上层作用域找，直到找到i，此时i=0，所以就有结果显示。
        */
    </script>
    <style>
        .item {
            height: 50px;
            width: 70px;
            margin: 5px;
            border: 5px solid aqua;
        }
    </style>
</body>
</html>

const关键字

const用于声明常量，const具有与let相同的特性，此外还有一些其他特性。

// 常量
const PI = 3.14;
console.log(PI);

常量声明不会被提升，即在变量声明之前无法使用该常量。

  // 报错，不能在常量声明前使用该变量
  console.log(b);
  const b = 2;

具有块级作用域，即const声明的常量只能在对应作用域范围内中使用.

  {
  	const b = 2;
  }
  // 报错
  console.log(b);

不允许重复声明。

  const b = 2;
  // 下方代码报错，不能重复声明b常量
  const b = 3;

在声明的时候就需要赋值，并且只能赋值一次，不能修改。

  // 报错，没有赋值
  const b;
  const c = 2;
  // 报错，重复赋值
  c = 3;

对数组或者对象中的元素的修改（添加、删除）不算做修改

const TEAM = ["hello","world"];
TEAM.push("java");
console.log(TEAM); //[ 'hello', 'world', 'java' ]

原理是：这里变量存的是地址，改变地址中存的元素不会改变地址。但如果保存的值整体发生改变就会报错。例如重新赋值TEAM=100;报错：TypeError: Assignment to constant variable.

持久的棒棒君

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录