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. 用dotnet core搭建web服务器(三)ORM访问数据库

    访问传统sql数据库,大家以前都是用sql语句去查询.这些年流行orm方法 ORM是对象关系映射的简拼,就是用一个对象(class)去表示数据的一行,用对象的成员去表述数据的列 dotnet 官方很早 ...

  2. java之JavaBean

    JavaBean是一种java语言编写而成的可重用组件. 所谓JavaBean,是指符合以下标准的java类: 类是公共的: 有一个无参的公共构造器: 有属性,属性一般是私有的,且有对应的set.ge ...

  3. jQuery-文件上传问题解决

    后端要求文件上传需传参数为二进制流,用form-data方式传递,如下图所示: 为了满足该输入参数要求,上传代码如下: <input type="file" id=" ...

  4. FLV提取AAC音频单独播放并实现可视化的频谱

    如上图,要实现对FLV直播流中音频的识别,并展示成一个音频相关的动态频谱. 一. 首先了解下什么是声音? 能量波,有频率有振幅,频率高低就是音调,振幅大小就是音量:采样率是对频率采样,采样精度是对幅度 ...

  5. 面试：Stream#foreach方法摸底三问，你都了解吗

    JAVA8 新增了 Stream API,而在 Stream API 中又为程序员提供了一个遍历集合的 foreach 方法:java.util.stream.Stream#forEach. 那你对这 ...

  6. VS2010到VS2019各个版本的密钥

    VS2019专业版和企业版的密钥 Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Profe ...

  7. javascript模块化开发(二)

    模块化开发(一) ES6模块化 详解 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict". 顶层的this指向undefined,即不应该在顶层代码 ...

  8. [20191115]oracle实例占用内存计算.txt

    [20191115]oracle实例占用内存计算.txt --//以前学习oracle数据库时,总想了解实例占用内存多少,我曾经在一些会议底下问过一位高手,对方说计算这个相对很难,许多东西是共享的.- ...

  9. 远程访问阿里云服务器jupyter

    官网链接 一.pip安装jupyter安装Anaconda的话,会自动按照jupyter,就不需要再使用pip安装了 pip3 install jupyter 二.生成jupyter notebook ...

  10. MySql 表结构修改、约束条件、表关系

    表结构修改(alter) 查看表的结构:desc 表名; 修改表名:alter table 表名 rename to 新表名; 修改字段名:alter table 表名 change 旧字段名 新字段 ...