ES6入门之let和const命令

前言

大家好，我是一只流浪的kk,当你看到这边博客的时候，说明你已经进入了ES6学习的领域了，从本篇博客开始，我将会将自己学习到ES6的相关知识进行整理，方便大家参考和学习，那么我将带你进入第一节的内容学习let和const命令，本篇博客从三个方面进行全方位解析。

let命令

首先我们需要学习的是let命令的使用，这个使用非常简单，它其实也是声明变量的一种方式，和var相比我把它的特点总结了如下四点，一起来看看吧！

(1)：基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>let命令的基本用法</title>
    </head>
    <body>
        <script type="text/javascript">
            let a=10;
            var b=20;
            console.log(a);//10
            console.log(b);//20
        </script>
    </body>
</html>

我们看到我们现在是使用let关键字定义变量的，好处的话我们一步一步进行讲解

(2)：不具备变量提升的能力

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>不具备变量提升的能力</title>
    </head>
    <body>
        <script type="text/javascript">
            console.log(a);//报错
            let a=10;
            console.log(b);//undefined
            var b=20;
        </script>
    </body>
</html>

在这个案例中，我们看到使用let关键字定义的变量会报错，而使用var关键字定义的变量不会报错，这一进一步说明let关键字定义的变量不具备变量提升的能力，从而也时刻提醒我们养成良好的编程习惯，任何变量都应该遵循先定义后使用的原则。

(3)：暂时性死区

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>let暂时性死区</title>
    </head>
    <body>
        <script type="text/javascript">
            if(true){
                tep=‘abc‘;
                console.log(tep);//ReferenceErro
                let tep;
                console.log(tep);//undefined
                tep=123;
                console.log(tep);//123
            }
        </script>
    </body>
</html>

(4)：不允许重复声明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>不允许重复声明</title>
    </head>
    <body>
        <script type="text/javascript">
            function bar(){
                var a=10
                let a=20;
                let b=10;
                let b=20;
            }
            bar();//报错
            function foo(args){
                {
                    let args;
                }
            }
            foo();//不报错
        </script>
    </body>
</html>

块级作用域

在ES5中，我们只有函数级作用域和全局作用域，这对我们的开发带来很大的不方便，例如同事之间的开发，变量的定义可能会相同，这就有可能会造成代码发生错误，我先用一个例子来解释一下吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级作用域</title>
    </head>
    <body>
        <script type="text/javascript">
            let arr=[];
            for(var i=0;i<10;i++){
                arr[i]=function(){
                    console.log(i);
                }
            }
            arr[6]();
        </script>
    </body>
</html>

在这里我们希望提到当前i,而最终结果是10，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i,每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。那么如何解决呢？

我们再来看另一个示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级作用域</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 20px;
                font: 30px/100px "microsoft yahei";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
        <div>e</div>
        <div>f</div>
        <div>g</div>
        <div>h</div>
        <div>i</div>
        <div>j</div>
        <script type="text/javascript">
            var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=function(){
                    alert(i);
                }
            }
        </script>
    </body>
</html>

假定页面中有10个div，我们每点击一个div，我们想要弹出当前div的下标，但是都是弹出10，这就是和我们前面提到的情况一样，

解决方案一：使用闭包

在没有ES6之前，我们解决这类问题通常使用闭包，那么什么是闭包呢？以后的章节我会拿出来单独讲，这里讲一下浅显的字面意思：当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级作用域</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 20px;
                font: 30px/100px "microsoft yahei";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
        <div>e</div>
        <div>f</div>
        <div>g</div>
        <div>h</div>
        <div>i</div>
        <div>j</div>
        <script type="text/javascript">
            var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=(function(n){
                    return function(){
                        alert(n);
                    }
                })(i);
            }
        </script>
    </body>
</html>

现在的话，我们每点击div一次都可以得到当前下标(索引)

解决方案二：使用块级作用域

使用块级作用可以快速解决这个问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级作用域</title>
    </head>
    <body>
        <script type="text/javascript">
            let arr=[];
            for(let i=0;i<10;i++){
                arr[i]=function(){
                    console.log(i);
                }
            }
            arr[6]();
        </script>
    </body>
</html>

在这里，let声明的变量仅在块级作用域内有效，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算

const命令

(1)：基本用法

const声明一个只读的常量，一旦声明，常量的值就不能改变，并且用const声明的常量必须全部大写，例如PI,MAX,MIN等等

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>const基本用法</title>
    </head>
    <body>
        <script type="text/javascript">
            const PI=3.14;
            console.log(PI);
            PI=2
        </script>
    </body>
</html>

同样，使用const声明的变量不得改变值，所以说const一旦声明变量，就必须立刻初始化，不得留到以后赋值

(2)：暂时性死区

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>const暂时性死区</title>
    </head>
    <body>
        <script type="text/javascript">
            if(true){
                const MIN=10
            }
            console.log(MIN);
            if(true){
                console.log(MAX);
                const MAX=10;
            }
        </script>
    </body>
</html>

同样，使用const声明的变量也不具备变量提升的能力

(3)：不允许重复声明

同样const命令也不允许重复声明，我们来看下面的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>const不可重复声明变量</title>
    </head>
    <body>
        <script type="text/javascript">
            var message=‘hello world‘;
            let age=18;
            const message=‘你好‘;//报错
            const age=20;//报错
        </script>
    </body>
</html>

在这里我们用const重复声明变量，控制台输出Uncaught SyntaxError: Identifier ‘message‘ has already been declared,所以const也不允许重复声明变量

ES6声明变量的六种方法

在ES5中我们只有var,function两种声明变量的方法，但是在ES6中新增了let,const,import,class等四种声明变量的方法，所以现在我们一共有六种声明变量的方法，在之后的博客中我们回对import，class进行讲解。

总结

本篇博客我们一共学习了三个知识点，let命令，块级作用域，const命令，以及总结了let命令和const命令的相似之处，这只是简单的ES6入门，下一篇博客是讲解变量的解构赋值。

原文地址：https://www.cnblogs.com/jjgw/p/11675028.html

时间： 2024-10-08 12:36:48

ES6入门之let和const命令的相关文章

ES6教程：let和const命令的用法

ES6中新增了let和const命令,分别用于声明变量和常量. 1. 使用let命令取代var命令 在ES6之前的版本中,使用var声明变量,在ES6中新增了let来声明变量.let完全可以取代var,因为二者的语义相同,而且let没有"副作用". 我们先来看一下let命令有哪些特点: 不存在变量提升:变量只有在声明之后才能使用: 不允许重复声明:在相同的作用域下,一个变量名只能使用一次,不能重复声明: 具有块级作用域:在代码块中声明的变量,只对当前代码块和其内部嵌套代码块有效,如果嵌

ES6中的let和const命令

1.let命令 1)基本用法 let命令是ES6新增的命令,用来声明变量,类似于var,但let声明的变量只在let命令所在的代码块范围内有效. 2)不存在"声明提前" let声明的变量不存在"声明提前",变量一定要在声明后使用,否则会造成报错,例如: console.log(a);//undefined console.log(b);//报错! var a=3; let b=3: 3)暂时性死区 只要块级作用域内存在let命令,它所声明的变量就绑定了当前块级作用域

ES6 第一章 let和const命令 具体参照http://es6.ruanyifeng.com

1.let类似于var用用来定义变量 1)let没有预解析,不存在变量提升 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2; 2)let定义的变量在其定义之前使用都会报错,称为暂时性死区(TDZ) var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError

ES6入门之变量的解构赋值(二)

前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进一步深入了解ES6中的相关语法,毕竟未来ES6是主流. 本章目标 学会数组的解构赋值 学会对象的解构赋值 学会字符串的解构赋值 学会数值和布尔值的解构赋值 学会函数参数的解构赋值 学会解构赋值的用途 本人对解构赋值的理解:模式匹配,匹配成功获取值,匹配不成功则为undefined,好比开心消消乐一样

1.《ES6标准入门》(阮一峰)--2.let 和 const 命令

1.let命令 基本用法 let只在命令所在的代码块内(花括号内)有效. for循环的计数器,就很合适使用let命令. //var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i)

let和const命令

基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数器,就很合适使用

走进EC6的let和const命令

详细学习链接: http://es6.ruanyifeng.com/#docs/let let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 'use strict'; { let a = 10; var b = 1; } a // 报错,ReferenceError: a is not defined. b // 1 不存在变量提升 let不像var那样会发生"变量提升"现象.所以,变量一定要在声明后使

1.let 和 const 命令

let 和 const 命令 let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明

let 和 const 命令

let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数