ES6新增加了两个重要的JavaScript关键字：let和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的更多相关文章

  1. ES6语法——let和const

    一.let 1.定义 ES6新增了let命令,用来声明变量,用法类似于var,但是和var有一定的区别 2.let只在块级作用域内有效 首先来看一个比较简单的例子,请告诉我,他们分别输出什么 //代码 ...

  2. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  3. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  4. 如何让浏览器支持ES6语法，步骤详细到小学生都能看懂！

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  5. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

  6. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  7. 在Node中使用ES6语法

    Node本身已经支持部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用.为了能使用这些新特性,我们就需要使用babel把E ...

  8. es6语法快速上手（转载）

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  9. webpack中使用babel处理es6语法

    index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...

  10. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

随机推荐

  1. [考试反思]1111csp-s模拟测试110：三思

    题目名是为了照应3天的倒计时(我才不会说是因为我考场又摸鱼了) 在OJ上得到了295的好成绩,但是本地评测没有O2掉了10分. 总体来说还可以.T1全场切,T2半场切,T3纯暴力不卡常都有95... ...

  2. Win10 中 Git clone github上内容保存到指定文件夹

    在要存储的右键→Git Bash Here 弹出命令窗口 输入 git clone 链接 很快就下载完成

  3. B站弹幕爬取 / jieba分词 - 全站第一的视频弹幕都在说什么？

    前言 本次爬取的视频av号为75993929(11月21的b站榜首),讲的是关于动漫革命机,这是一部超魔幻现实主义动漫(滑稽),有兴趣的可以亲身去感受一下这部魔幻大作. 准备工作 B站弹幕的爬取的接口 ...

  4. go语言之range

    Go 语言范围(Range) Go 语言中 range 关键字用于 for 循环中迭代数组(array).切片(slice).通道(channel)或集合(map)的元素.在数组和切片中它返回元素的索 ...

  5. jenkins构建，拉取不到最新版本代码，报clock of the subversion server appears to be out of sync

    一.问题描述 今天遇到个问题,我这边提交了代码后,一般会马上去jenkins上点一下,构建到开发环境上. 但是发现修改没生效,后来发现,提交的版本假设是3250,但是jenkins构建使用的版本为32 ...

  6. Python抓取妹子图，内含福利

    目标抓取全站妹子封面图片全部爬下来以图片标题命名 分析网页数据结构   妹子图首页 接下来找张图片右击点击检查   想要数据 拿到图片链接直接用浏览器可以访问,但是程序下载有反爬虫,图片直接下载不了需 ...

  7. 在 Linux 下学习 C 语言有什么好处？

    作者:宅学部落链接:https://www.zhihu.com/question/23893390/answer/832610610来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  8. 创建多进程之multiprocess包中的process模块

    创建多进程之multiprocess包中的process模块 1.process模块是一个创建进程的模块 Process([group [, target [, name [, args [, kwa ...

  9. 聊聊 Java8 以后各个版本的新特性

    作者:ZY5A59 juejin.im/post/5d5950806fb9a06b0a277412 某天在网上闲逛,突然看到有篇介绍 Java 11 新特性的文章,顿时心里一惊,毕竟我对于 Java ...

  10. 并发容器之ConcurrentLinkedQueue

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...