ES6中let和const那些事

最新推荐文章于 2024-04-02 20:57:09 发布
最新推荐文章于 2024-04-02 20:57:09 发布
阅读量288 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52207728/article/details/115913968
版权

一、let和const简单用法介绍：
1、let和const是什么
let和const是用来声明变量和常量的，之前用的var声明变量，现在let也是用来声明变量的，而const是用来声明常量的，const就是constant的缩写
2、let 和 const 的用法：
let就跟var差不多，例如：

      var username = 'Alex';
      let age = 18;
      const sex = 'male';
      console.log(username, age, sex); // Alex 18 male

什么是变量，什么是常量：

      username = 'ZS';
      age = 28;
      console.log(username, age); // ZS 28
      // 同上，这里的age和username就是变量
	  sex = 'female';  // 在这里会报错，因为sex是常量，一旦被赋值就不能再被改变了

总结：
var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值
const 声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错
二、let和const为何出现：

      // 1.为什么需要 const
      // let
       let sex = 'male';
       // ...
       sex = 'female';
       console.log(sex); // 不会报错

      // const
       const sex = 'male';
       // ...
       sex = 'female';
       console.log(sex); // 这里会报错，因为const定义常量
	   // const 就是为了那些一旦初始化就不希望重新赋值的情况设计的

// 2.const 的注意事项
      // 2.1.使用 const 声明常量，一旦声明，就必须立即初始化，不能留到以后赋值
      const sex;
      sex='male'; // 这样会报错 Missing initializer in const declaration
	  const sex = 'male'; // 这样写才为正确写法！

      // 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值
      // 基本数据类型
      const sex = 'male';
      sex = 'female'; // 报错！

      // 引用数据类型
      const person = { username: 'Alex' };
      // person = {}; // 一旦再重新赋值即会报错！
      person.username = 'ZhangSan';
      console.log(person); // 不会报错 输出 {username: "ZhangSan"}  // 可以修改值但不能重新赋值
      person = {}; // 报错 原因是进行了重新赋值

      // 3.什么时候用 const，什么时候用 let
// 推荐：
      // 在不知道用let还是const时，推荐先用const

总结：
1、const可以在引用类型的情况下修改里面的值，但一旦const声明的是基本类型则无法修改值。2、在不知道到底用let和const的情况下尽量用const，一是实际开发中基本这样来，二是用const一旦改变值时会报错（这是对人的一个提醒），这样可以根据需求去将const改为let，但如果用的let则不会报错，可能后面对值的改变会影响前面（最重要的是程序没有提醒，人可能不知道）。
三、let和const的区别：
1、重复声明：

      // 已经存在的变量或常量，又声明了一遍
      // var 允许重复声明，let、const 不允许
      let a = 1;
      // ...
      let a = 2;
      console.log(a); // 会报错
      
      function func(a) {
          let a = 1;
       }
      func();
// 会报错，a在函数里面有，故不能再在函数内声明！

2、变量提升：

      // var 会提升变量的声明到当前作用域的顶部
      console.log(a);
      var a = 1;  // 不会报错，可以打印出a
      // 相当于
      // var a;
      // console.log(a);
      // a = 1;
      // console.log(a);

      // let、const 不存在变量提升
      console.log(a); // 会报错，找不到a
      let a = 1;

这里的没有变量提升，实际上是为了开发者养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用！
3、暂时性死区：

      // 只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
      // let、const 存在暂时性死区
      let a = 2;
      let b = 1;
      function func() {
         console.log(b); // 1
      }
      func();
      // 在这个例子中不会报错，因为函数中没有b，所以会向上找，找到b = 1

      // let、const 存在暂时性死区
      let a = 2;
      let b = 1;
      function func() {
      	console.log(a);
      	let a = 1;
      }
      func();
      // 在这里会报错，原因是a用的let声明的，因此就将a绑定到了函数的作用域内，在该作用域中是先打印a后声明a的，所以会报错！

4、window 对象的属性和方法：

      // var/function
      var age = 18;
      function add() {}
      console.log(window.age); // 18
      console.log(window.add === add); // true
 
      // let/const
      let age = 18;
      const add = function () {}; 
      console.log(window.age); // undefined
      console.log(window.add === add); // false

5、块级作用域：
(1)什么是块级作用域：

      for (var i = 0; i < 3; i++) {
      }
      console.log(i); // 3

      // let/const 有块级作用域
      for (let i = 0; i < 3; i++) {
      }
      console.log(i); // 报错 --- i不能被找到 ， 这是因外i在{}之外，故不能找到

说到作用域时就不得不提一下作用域链这个事，这个在JS基本方法中有，记住：只能由内往外找不能由外往内找就对了！
(3).有哪些块级作用域：
一般有{}的都有块级作用域：

// 块级作用域：
      {}
      for(){}
      while(){}
      do{}while()
      if(){}
      switch(){}

// 但函数和对象可不是块级作用域
      // function(){}
      // const person = {
      //   getAge: function () {}
      // };

注意：块级作用域是相对let和const而言的，var可没有块级作用域！

简单举例循环中块级作用域中的区别：
目标：当点击相应按钮时会在控制台打印出相应按钮的下标！

<!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>Document</title>
    <style>
        div{
            margin: 0 auto;
            width: 300px;
            display: flex;
            justify-content: space-between;

        }
        .btn{
            width: 50px;
            height: 50px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">0</button>
        <button class="btn">1</button>
        <button class="btn">2</button>
    </div>
    <script>
        var btns = document.querySelectorAll('.btn');
        for(var i=0; i < btns.length; i++){
            btns[i].onclick = function() {
                console.log(i); // 由于不在块级作用域导致每次打印的均为3，而不是相应的下标 0 1 2

// 不打印相应的下标原因很简单，当打印i时，会往外找i，i在全局作用域中且循环完为3，所以打印出来全是3，与作用域有关！
            }
        }
    </script>
</body>
</html>

在上面的案例中，因为函数里面没有i，所以程序就会往外找，因为出了点击事件绑定的函数就是for循环，因为for循环没有作用域，所以相当于在全局里面找i，在全局中i是3，因此打印出来是3
ES6之前的解决方法：
采用闭包的思想，具体代码如下：

<!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>Document</title>
    <style>
        div{
            margin: 0 auto;
            width: 300px;
            display: flex;
            justify-content: space-between;

        }
        .btn{
            width: 50px;
            height: 50px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">0</button>
        <button class="btn">1</button>
        <button class="btn">2</button>
    </div>
    <script>
        var btns = document.querySelectorAll('.btn');
        for(var i=0; i < btns.length; i++){
            (function(index) {
                btns[index].onclick = function() {
                console.log(index);
            }
            })(i);
// 将其放到一个立即执行的匿名函数里面，这种是采用了闭包的思想！
        }
    </script>
</body>
</html>

在这里可以这样理解：打印index就要找到index，在点击事件绑定的函数中没有index，所以就会往外找，于是就到了立即执行函数的作用域，在立即执行函数的作用域里面可以找到index，index就是立即执行函数传进去的参数嘛，因此能找到，所以可以打印出来。
ES6之后的解决方案：
直接将var 改为 let 即可实现：

<!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>Document</title>
    <style>
        div{
            margin: 0 auto;
            width: 300px;
            display: flex;
            justify-content: space-between;

        }
        .btn{
            width: 50px;
            height: 50px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">0</button>
        <button class="btn">1</button>
        <button class="btn">2</button>
    </div>
    <script>
        let btns = document.querySelectorAll('.btn');
        for(let i=0; i < btns.length; i++){
            btns[i].onclick = function() {
                console.log(i); // let有块级作用域，相当于创建三个空间，分别是 0 1 2 这三个事件
            }
        }
    </script>
</body>
</html>

let图解

凉风有信、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
let与const
m0_46472218的博客
07-21 223
let与const
ES6中let 和 const 的新特性
10-18
主要介绍了ES6中let 和 const 的新特性，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
【es6学习】let与const的那些事儿（二）
weixin_41884808的博客
08-14 132
3 canst 命令 3.1 基本用法 const 声明 一个只读的常量。一 旦声明，常量的值就不能改变。 const PI = 3.1415 ; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable. 上面的代码表明改变常量的值会报错。 const 声明的常量不得改变值。这意味着， const 一旦声明常量，就必须立即初始化，不能留到以后赋值。 const foo; // SyntaxError : Missing
let和const的使用场景
最新发布
weixin_46689373的博客
04-02 202
一般来说，我们使用ref响应式的变量就用const来定义；普通变量用let定义。2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。1.const定义的变量不可以修改，而且必须初始化。
ES6 系列之 let 和 const
weixin_33919941的博客
05-21 106
块级作用域的出现 通过 var 声明的变量存在变量提升的特性： if (condition) { var value = 1; } console.log(value); 复制代码初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于： var value; if (...
es6 let与constant命令
韩吉鑫的博客
09-07 532
一、let命令  1.let声明的变量只在变量声明时所在的代码块内有效  对比：  {  var url = "www.baidu.com";  }  alert(url);  //--------------------------------  {  let url = "www.baidu.com";  }  alert(url);  2.let不允许在同一作用域重复
JS中的var、let、constant
weixin_41743686的博客
02-12 1950
JS中的var、let、constant
es6中let和const的使用方法详解
11-21
本文实例讲述了es6中let和const的使用方法。分享给大家供大家参考，具体如下： ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b =...
深入浅出ES6之let和const命令
09-01
主要介绍了ES6中let和const命令的相关资料，非常不错，具有参考借鉴价值，对es6 let const相关知识感兴趣的朋友一起看下吧
JavaScript中ES6规范中let和const的用法和区别
10-14
主要介绍了JavaScript中ES6规范中let和const的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
var、let和const应该怎么用？
cpongo5
03-05 719
在这篇文章中，我们将介绍两种新的在JavaScript（ES6）中创建变量的方式，即使用let和const。同时，我们将探讨var、let和const之间的区别，以及函数与块作用域、变量提升和不变性等内容。如果你想观看视频，这是链接：https://youtu.be/6vBYfLCE9-QES2015（或ES6）引入了两种创建变量的新方法：let和const。但在我们深入了解var、let和con...
[译] 在JavaScript中何时使用var、let及const
weixin_33701294的博客
01-12 840
原文链接：var vs let vs const in javascript 原文作者：Tyler McGinnis 译者：Alisa 在这篇文章中，你将学习两种在JavaScript（ES6）中创建变量的新方法，let和const。 在此过程中，我们将研究var，let和const之间的差异，以及函数与块级作用域，变量提升和不变性等主题。 如果你更喜欢观看视频的方式，可以看这个： var...
ES6基础-为什么要用let和const
qq_40411946的博客
01-03 4740
如题，为什么要用 let 和 const 呢？ 在开始这个话题之前，我们先来通过以下的小例子了解一下 JavaScript 中 var 声明及变量提升机制。 按照一般逻辑，变量应该在声明语句之后才可以使用，但在上面的代码中，是声明之前输出foo的值，且这个值为undefined，这就说明变量在声明之前就已经存在了。为什么用var会出现这种问题呢？下次我们在讨论。这里就是人们经常说的变量提升，即变...
let和const
热门推荐
qq_34771938的博客
09-20 1万+
let和const是什么 var声明变量。 let代替var，声明变量。 const声明常量。 let和const的用法 什么是变量，什么是常量 var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值。 const声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错。 为什么需要const const就是为了那些一旦初始化就不希望重新赋值的情况设计的。 const的注意事项 使用const声明常量...
什么是ES6?ES6新增声明关键字let、const的用法和区别
归兮的博客
09-02 585
ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。
let与const的使用
kun的博客
12-26 3108
作者：前端大蜜桃  来源：CSDN  原文：https://blog.csdn.net/tanhao_282700/article/details/68928579      1、es5中的变量声明： es5中是没有块级作用域的；只要这个变量的作用域范围内都能被访问到；声明一个变量，js引擎会把变量的声明提升 到当前作用域的最前面； var v = "hello"; (function(...
let和const的用法
枸杞泡茶的博客
01-29 448
在前端ES6的语法当中,新增了很多的不同于ES4的新语法. 在以往使用var来定义变量时,变量经常会莫名其妙的变成了一个全局的变量,如下: <script> for (var i = 0; i < 5; i++) { console.log(i); } console.log("语法外的i:"+i...
let 与 const的用法以及他们的区别
XCXLOVE_的博客
10-17 413
一.let的使用1.let 声明的变量只在 let 命令所在的代码块内有效。2.let 只能声明一次 var 可以声明多次:3.不存在变量提升4.不影响作用域** js代码示例**
es6中let和const
06-09
let和const是ES6引入的两个新的声明变量的方式。它们都是块级作用域的变量，不会像var一样存在变量提升的问题。 let声明的变量可以被重新赋值，而const声明的变量是常量，不可被重新赋值。在使用时应当注意let和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值