ES6——let、const

简介: ES6——let、const

什么是ES6

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。

每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。

变量提升特性增加了程序运行时的不可预测性

语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

let:用于声明变量的关键字

let声明的变量只在所处于的块级有效

<script>
        if (true) {
            let a = 10;
            console.log(a);      //10
        }
        console.log(a);        //a is not defined
    </script>

20210922141444559.png

如果用var呢?

if (true) {
            var a = 10;
            console.log(a);        //10
        }
        console.log(a);            //10

2021092214152762.png

只要用let声明变量才具有块级作用域,var中不存在块级作用域

不存在变量提升

用var:

console.log(a);
        var a = 1;                //undefined

用let:

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

20210922142020887.png

上述代码中,变量a用var命令声明,会发生变量提升,变量a已经存在,但没有值。所以输出为undefined,变量a用let声明的话,不会发生变量提升的现象,声明它之前他是不存在的,如果直接用他的话就会报错。

暂时性死区

let声明的变量会绑定在这个块级作用域,不会被外面所影响

var tmp = 123;
        if (true) {
            tmp = 'abc';
            let tmp;
            console.log(tmp);
        }

20210922183713384.png

此代码中,存在全局变量tmp,而且块级作用域中又声明了一个局部变量tmp,导致后面这个tmp绑定这个块级作用域,所以let声明变量前,会报错。

ES6规定:如果区块中存在let和const,那么这个区块对这些声明的变量,会形成封闭作用域,只要在声明之前使用这种变量,那么它就会报错

说白了就是使用let声明变量之前,这个变量都是不可用的。这种语法称为“暂时性死区”简称 TDZ(temporal dead zone)

var arr = [];
        for (var i = 0; i < 3; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0]();        //3
        arr[1]();        //3
        arr[2]();        //3

202109221843014.png

变量i是全局的,函数执行的时候输出的都是全局作用域下的i值也就是3。

let arr = [];
        for (let i = 0; i < 3; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();
        arr[2]();

20210922184327546.png

每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的i值。

总结let:

1、let关键字用来声明变量

2、具有块级作用域

3、在使用一个大括号里面用let声明变量才具有块级作用域,在var中是不具备这一点的

4、防止循环的变量变成全局变量

5、使用let声明的变量没有变量提升

6、let声明的变量具有暂时性死区特点

const

用来声明常量,常量就是值(内存地址)不能变化的量

它具有块级作用域的特性

if(true){
            const a = 10;
        }
        console.log(a);        //a is not defined

2021092218530523.png

声明常量时必须赋值

用let声明常量:

let a;
console.log(a);//undefined

20210922185647168.png

用const声明常量:

const a;
console.log(a);//Missing initializer in const declaration

20210922185633509.png

常量赋值后,值不能修改

const a = 99;
a = 100; 
console.log(a);// Assignment to constant variable.

20210922185918763.png

const ary = [111, 222];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; 
console.log(ary);// Assignment to constant variable.

20210922190033373.png

总结const:

1、const声明的变量是个常量

2、声明const时必须给值

3、是常量的话不能重新进行赋值,是基本数据类型的话不能更改值,是复杂数据类型,不能更改地址值。

var、let、const的区别

1、使用var声明的变量,其作用域为该语句所在的函数内,并存在变量提升现象。

2、使用let声明的变量,其作用域为该语句所在的代码块中,并且不存在变量提升。

3、使用const声明的是常量,在后面出现的代码中不能在修改这个常量的值。


相关文章
|
6月前
ES6中的var,let,const
ES6中的var,let,const
|
6月前
|
安全 JavaScript 前端开发
ES6 中 let 与 const命令
ES6 中 let 与 const命令
|
2月前
|
JavaScript 前端开发
ES6学习(1)let,const
ES6学习(1)let,const
|
5月前
|
JavaScript 前端开发 编译器
在ts中const和readonly区别?
在ts中const和readonly区别?
64 1
|
6月前
|
JavaScript 编译器
TS中const和readonly的区别
TS中const和readonly的区别
129 0
|
6月前
|
JavaScript IDE 开发工具
es6学习笔记(一)let、const
es6学习笔记(一)let、const
|
JavaScript 前端开发 安全
ES6(let和const命令)
ES6(let和const命令)
80 0
|
自然语言处理 JavaScript 前端开发
每天3分钟,重学ES6-ES12(二)var let const的选择
每天3分钟,重学ES6-ES12(二)var let const的选择
91 0
|
JavaScript 前端开发
【ES6】 let与const详解
【ES6】 let与const详解