ES6新增关键字let和const介绍

2024-04-02 19:04:59 558人浏览八月长安

摘要

目录一、let关键字1、基本语法2、let和var的区别2.1、同一作用域内let不能重复定义同一个名称，var可以重复定义2.2、两者作用域不同2.3、不存在变量提升二、const

一、let关键字

let声明的变量只在let命令所在的代码块内有效。

1、基本语法

let a='123'

2、let和var的区别

var也是用来声明变量，let和var有什么区别呢？区别主要是以下三点：

2.1、同一作用域内let不能重复定义同一个名称，var可以重复定义

看下面的例子：

// 同一个作用域内let不能重复定义同一个名称
let a='123';let a='456'; // 错误
// var可以重复定义
var a=10;
var a=20;

2.2、两者作用域不同

let属于块级作用域，只在当前块内有效。

var属于全局作用域。

看下面的示例：

<!DOCTYPE html>
<html>
<head>
        <meta Http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                var a=10;
                var a=20;
                // 有着严格的作用域，变量隶属于当前作用域
                // let块级作用域{}，var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                testLet(); // 报错
            }
        </script>
</head>
</html>

效果：

打印str1的时候会报错，因为超出了str1的作用域。

2.3、不存在变量提升

var声明的变量存在变量提升，即可以在变量声明之前就使用该变量，值为undefined;而let不存在变量提升，必须先声明变量才能使用。看下面的例子：

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域，变量隶属于当前作用域
                // let块级作用域{}，var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
                // let不存在变量提升
                console.log(a); // undefined
                var a=12;
                console.log(b); // 报错:b is not defined
                let b='123';
            }
        </script>
</head>
</html>

效果：

二、const

const与let的相同点：都是块级作用域。

不同点：const声明的是一个只读的常量，声明之后就不允许改变。意味着，声明的同时必须初始化。看下面的例子：

const pi='3.1415926';
pi='3.1415927'

查看控制台结果：

声明的同时必须初始化，看示例：

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域，变量隶属于当前作用域
                // let块级作用域{}，var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
                // let不存在变量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 报错:b is not defined
                // let b='123';

                // const 只读常量
                // 相同：与let都是块级作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允许修改
                const b; // 错误：声明的时候必须初始化
            }
        </script>
</head>
</html>

控制台结果：

注意：

const 如何做到变量在声明初始化之后不允许改变的？其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域，变量隶属于当前作用域
                // let块级作用域{}，var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
                // let不存在变量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 报错:b is not defined
                // let b='123';

                // const 只读常量
                // 相同：与let都是块级作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允许修改
                // const b; // 错误：声明的时候必须初始化
                // 数组
                const arr=[];
                arr.push('123');
                console.log(arr);
                // 对象
                const obj={};
                obj.name='abc';
                console.log(obj);
            }
        </script>
</head>
</html>

控制台结果：

到此这篇关于ES6新增关键字let和const的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ES6新增关键字let和const介绍

本文链接: https://www.lsjlt.com/news/143274.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

ES6新增关键字let和const介绍

目录一、let关键字1、基本语法2、let和var的区别2.1、同一作用域内let不能重复定义同一个名称，var可以重复定义2.2、两者作用域不同2.3、不存在变量提升二、const...

99+

2022-11-13
ES6新增关键字let和const怎么用

这篇文章主要介绍了ES6新增关键字let和const怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。ES6新增加了两个重要的JavaScript关键字：let和const...

99+

2023-06-29
基于JavaScriptES新特性let与const关键字

目录1.let关键字 1.1基本用法 1.2不存在变量提升 1.3暂时性死区 1.4不允许重复声明 1.5与函数的关系 2.const关键字 2.1基础用法 1.let关键字 1....

99+

2022-11-12
C++中引用和const关键字介绍

目录引用常引用const关键字用法1）定义常量2）定义常量指针3）定义常引用总结引用下面的写法定义了一个引用，并将其初始化为引用某个变量。类型名 & 引用名 = 某变量名;...

99+

2022-11-13
C#中const,readonly和static关键字的用法介绍

如果有一个值不太会变化，我们经常使用const和readonly，这2者有何不同呢？有时候，我们也会在readonly之前加上关键字static，这又意味着什么呢？ const co...

99+

2022-11-13
ES6 关键字 let 和 ES5 及关键字 var 的区别解析

目录var 关键字let 关键字补充var 关键字在 ES5 及以前，通过var在块级作用域中声明的变量，外边也可以访问。块级作用域就是一对{}的作用域；块级作用域可以是控制语句的...

99+

2022-11-13
Java中static关键字的介绍和用法

本篇内容主要讲解“Java中static关键字的介绍和用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Java中static关键字的介绍和用法”吧!用类名去调用static有两层含义：可以理...

99+

2023-06-02