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. Spring Cloud Alibaba 实战(十三) - Sleuth调用链监控

    本文概要:大白话剖析调用链监控原理,然后学习Sleuth,Zipkin,然后将Sleuth整合Zipkin,最后学习Zipkin数据持久化(Elasticsearch)以及Zipkin依赖关系图 实战 ...

  2. SpringBoot整合MyBatis-Plus3.1详细教程

    作者:Sans_ juejin.im/post/5cfa6e465188254ee433bc69 一.说明 Mybatis-Plus是一个Mybatis框架的增强插件,根据官方描述,MP只做增强不做改 ...

  3. Linux-shell学习笔记1

    1.检查 /etc/shells 这个文件可以得到有多少可用的shell,一般有一下几个: /bin/sh (已经被 /bin/bash 所取代) /bin/bash (就是 Linux 默认的 sh ...

  4. Cesium专栏-视频投影(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  5. Thymeleaf常用语法：使用星号表达式

    在处理模板时,一般情况都是使用变量表达式 ${...} 来显示变量,还可以使用选定对象表达式 *{...},它也称为星号表达式.如果在模板中先选定了对象,则需要使用星号表达式.Thymeleaf的内置 ...

  6. 23种设计模式之Builder设计模式

    概述 建造者模式(Builder Pattern),是创造性模式之一,Builder 模式的目的则是为了将对象的构建与展示分离.Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在 ...

  7. oracle数据库修改密码有效期，解决ORA-28001: 口令已经失效

    工作中oracle数据库安装完成后,需要修改默认的密码有效期,默认为180天,如果不修改,到期忘记更改密码可能会造成不必要的影响. 两种修改方式pl/sql或者cmd窗口 1.pl/sql修改默认密码 ...

  8. TensorFlow从1到2（十二）生成对抗网络GAN和图片自动生成

    生成对抗网络的概念 上一篇中介绍的VAE自动编码器具备了一定程度的创造特征,能够"无中生有"的由一组随机数向量生成手写字符的图片. 这个"创造能力"我们在模型中 ...

  9. ffmpeg-python 任意提取视频帧

    ▶ 环境准备 1.安装 FFmpeg 音/视频工具 FFmpeg 简易安装文档 2.安装 ffmpeg-python pip3 install ffmpeg-python 3.[可选]安装 openc ...

  10. deepin安装nginx失败记录

    问题描述 在deepin系统中,apt install nginx 返回信息报错: nginx 依赖于 nginx-full (<< 1.10.3-1+deb9u2.1~) | nginx ...