ECMAScript6-let和const

最新推荐文章于 2022-05-21 21:53:30 发布

菜鸟一枚在这

最新推荐文章于 2022-05-21 21:53:30 发布

阅读量175

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121238417

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

ECMAScript6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语⾔的下⼀代标准，已经在 2015 年 6 ⽉正式发布了。
其⽬标是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。

简介

ECMAScript 和 JavaScript 的关系

ECMAScript是JavaScript的规格
JavaScript是ECMAScript的⼀种实现

** ES6 与 ECMAScript 2015 的关系**

2011年，ECMAScript5.1版发布后，就开始制定 6.0 版了。因此，ES6这个词就是指 JavaScript
语⾔的下⼀个版本。
2015年6⽉发布了ES6的第⼀个版本，正式名称就是《ECMAScript 2015 标准》（简称ES2015）。
2016年6⽉⼩幅修订的ES6.1版本发布，简称ES2016标准，同样2017年6⽉发布 ES2017 标准。
因此ES6既是⼀个历史名词，也是⼀个泛指，含义是5.1版以后的JavaScript的下⼀代标准，涵盖了ES2015、ES2016、ES2017等等。

ECMAScript 的历史

1997年发布了ECMAScript 1.0版本
1998年6⽉发布了ECMAScript 2.0
1999年12⽉发布了ECMAScript 3.0，在业界得到⼴泛⽀持，成为通⾏标准，奠定了JavaScript语⾔的基本语法。
2000年ECMAScript 4.0开始酝酿，其⼤部分内容被ES6继承了。因此，ES6制定的起点其实是2000年。
2007年10⽉，ECMAScript4.0版草案发布。
2008年7⽉由于各⽅分歧太⼤，争论过于激烈，ECMA开会决定，中⽌ECMA Script
4.0的开发，并发布ECMAScript3.1（改名为 ECMAScript 5）。
2009 年 12 ⽉，ECMAScript 5.0 版正式发布。
2011 年 6 ⽉，ECMAScript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）
2013 年 3 ⽉，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript7。
2013 年 12 ⽉，ECMAScript 6 草案发布。然后是 12 个⽉的讨论期，听取各⽅反馈。
2015 年 6 ⽉，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15年。
2016年 ES2016(ES7) 新功能主要包括：
1Array.prototype.includes检查数组中是否存在值；（区别ES6字符串的includes⽅法）
2.Exponentiation Operator 求幂运算 (a ** b等价于Math.pow(a,b))
2017年 ES2017(ES8) 部分功能：
1.Object.values/entries/getOwnPropertyDescriptors 2.String.prototype.padStart/padEnd
3.函数参数列表和调⽤中的尾逗号（Trailing commas）
4.Async Functions 异步函数（async/await）

let和const命令

ES6新增了let和const来声明变量，主要是解决var声明变量所造成的困扰和问题：

var存在变量提升
var可以重复声明变量
var不⽀持块级作⽤域
var不能⽤于定义常量

let命令，⽤来声明变量。它的⽤法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

const声明⼀个只读的常量。⼀旦声明，常量的值就不能改变。
const声明的变量不得改变值，这意味着，const⼀旦声明变量，就必须⽴即初始化，不能留到以后赋值。

对于这些问题，我们使用代码来解释：

1、变量提升问题

由var声明的变量存在变量提升

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var name;
        console.log(name);//undefined
        name="name";
        console.log(name);//name
    </script>
</body>
</html>

变量提升会使变量默认初始值，不用赋值也会有初值

var声明的变量可以在声明之前使⽤，相当于默认为其声明其值为undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(name);//undefined
        var name;
        console.log(name);//undefined
        name="name";
        console.log(name);//name
    </script>
</body>
</html>

在未声明之前也能使用，会将var name这个声明变量的语句前置

let声明的变量⼀旦⽤let声明，那么在声明之前，此变量都是不可⽤的，术语称为 “暂时性死区” 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(name);//undefined
        let name;
        console.log(name);//undefined
        name="name";
        console.log(name);//name
    </script>
</body>
</html>

在这里插入图片描述

对暂时性死区的理解：

只要块级作⽤域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从⼀开始就形
成了封闭作⽤域。凡是在声明之前就使⽤这些变量，就会报错。
总之，在代码块内，使⽤let命令声明变量之前，该变量都是不可⽤的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

2、重复声明变量

var可以重复声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var name;
        var name;
    </script>
</body>
</html>

在这里插入图片描述

let不允许在相同作⽤域内，重复声明同⼀个变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        let name;
        let name;
    </script>
</body>
</html>

在这里插入图片描述

3、块级作用域

let命令所在的代码块内有效，并且所⽤域也仅限于当前代码有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        for(var i=1;i<11;i++){
            console.log(i)
        }
        console.log(i)
        for(let j=1;j<11;j++){
            console.log(j)
        }
        console.log(j)
    </script>
</body>
</html>

在这里插入图片描述

4、定义常量–const命令

const声明⼀个只读的常量。⼀旦声明，常量的值就不能改变。类似于java中的final关键字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        const pi=3.14;
        console.log(pi)
        pi=10;
    </script>
</body>
</html>

在这里插入图片描述

const声明的变量不得改变值，这意味着，const⼀旦声明变量，就必须⽴即初始化，不能留到以后赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        const pi;
    </script>
</body>
</html>

在这里插入图片描述

const的作⽤域与let命令相同：只在声明所在的块级作⽤域内有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function f() {
            const i=1;
        }
        console.log(i)
    </script>
</body>
</html>

在这里插入图片描述

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后⾯使⽤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(i)
        const i=1;
        console.log(i)
    </script>
</body>
</html>

在这里插入图片描述

const声明的常量，也与let⼀样不可重复声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        const i=1;
        const i=1;
    </script>
</body>
</html>

在这里插入图片描述

5、本质

const实际上保证的，并不是变量的值不得改动，⽽是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是⼀个指向实际
数据的指针，const只能保证这个指针是固定的（即总是指向另⼀个固定的地址），⾄于它指向的数据结构是不是可变的，就完全不能控制了。

对于对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        const person={name:"zhangsan",age:18};
        console.log(person.name+"  "+person.age)
        person.name="lisi";
        person.age=21;
        console.log(person.name+"  "+person.age)
    </script>
</body>
</html>

在这里插入图片描述

总结

本节主要讲了let和const关键字的详细用法和区别，下面我们将进一步讲解ECMAScript6的语法用点。

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript6-let和const

ECMAScript6ECMAScript 6.0（以下简称 ES6）是 JavaScript 语⾔的下⼀代标准，已经在 2015 年 6 ⽉正式发布了。其⽬标是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。ECMAScript6ECMAScript6简介let和const命令1、变量提升问题2、重复声明变量3、块级作用域4、定义常量--const命令5、本质总结简介ECMAScript 和 JavaScript 的关系ECMAScript是Ja
复制链接

扫一扫