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. Redis分布式缓存实现

    基于redis分布式缓存实现 第一:Redis是什么? Redis是基于内存.可持久化的日志型.Key-Value数据库高性能存储系统,并提供多种语言的API. 第二:出现背景 数据结构(Data S ...

  2. Gluserfs 架构详解【译】官网

    Gluserfs详解 排版看着不舒服的,可以查看[我的简书](https://www.jianshu.com/p/0340e429431b) doc home:https://docs.gluster ...

  3. idea搜索不到任何插件

    今天在idea安装插件的时候,突然发现,什么都搜索不到了?? 解决方案: 完活.

  4. python高级编程——进程和进程池

    python提供了一个跨平台的多进程支持——multiprocessing模块,其包含Process类来代表一个进程对象 1.Process语法结构:(注: 传参的时候一定使用关键字传参) 2.自定义 ...

  5. 在做nav-bar部分点击路由跳转相同地址时，控制台报错问题。

    报错信息: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: &qu ...

  6. mssql sqlserver 将逗号分隔的一列数据转换为多列数据的方法分享

    转自:http://www.maomao365.com/?p=10278  摘要: 下文讲述sqlserver中将使用逗号组合的单列数据,分隔为多列数据的方法 实验环境:sql server 2012 ...

  7. 关于sql sp_send_dbmail 发送邮件的怪异问题

    存储过程,其实就是将sp_send_dbmail采用参数的方式发送邮件,存储过程如下: ALTER PROCEDURE [dbo].[SP_Email_Send] @EmailTo varchar(m ...

  8. Python对Redis增删改查

    pip install redis import redis # 连接redis # 几个常用默认参数: # host='localhost', port=6379, db=0, decode_res ...

  9. Python对MySql增删改查

    pip install pymysql import pymysql db_config = { 'host': '127.0.0.1(ip)', 'port': 3306, 'user': '账号' ...

  10. FreeRTOS临界保护

    下面的是个人笔记,所有的话都适用于我本人理解,可能存在不对的地方. 进入临界保护(支持嵌套):taskENTER_CRITICAL(); 退出临界保护(支持嵌套):taskEXIT_CRITICAL( ...