let:声明的是变量
1、不存在变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2; // let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中,变量foo用var声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量用let声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到他,就会抛出一个错误。

2、暂时性死区,先声明在使用

var tmp = 123;

if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值报错,先声明再使用。

3、不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

// 报错
function func() {
let a = 10;
var a = 1;
} // 报错
function func() {
let a = 10;
let a = 1;
}

4、块级作用域

ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

第一种场景,内层变量可能会覆盖外层变量

var tmp = new Date();

function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
} f(); // undefined

上面代码,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f指向后,结果输出undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景,用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
console.log(s[i]);
} console.log(i); // 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄漏成了全部变量。

ES6的块级作用域,let实际上为javascript新增的块级作用域。

function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}

上边代码,有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。

ES6 允许块级作用域的任意嵌套。

{{{{{let insane = 'Hello World'}}}}};

const:常量

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const的作用域与let命令相同:只在声明所在的块级作用域内有效

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

const声明的常量,也与let一样不可重复声明。

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123 // 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性

ES6 声明变量的六种方法
ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。

let和const的相同点:
① 只在声明所在的块级作用域内有效。

② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。

③ 不可重复声明。

let和const的不同点:
① let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值

const i ; // 报错,一旦声明,就必须立即初始化
const j = 5;
j = 10; // 报错,常量不可以改变

② 数组和对象等复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const只保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个复合类型的变量声明为常量必须非常小心。

const arr = [];
// 报错,[1,2,3]与[]不是同一个地址
arr = [1,2,3];
const arr = [];
// 不报错,变量名arr指向的地址不变,只是数据改变
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
console.log(arr.length); // 输出:3

若想让定义的对象或数组的数据也不能改变,可以使用object.freeze(arr)进行冻结。冻结指的是不能向这个对象或数组添加新的属性,不能修改已有属性的值,不能删除已有属性。

const arr = [];
Object.freeze(arr);
// 不报错,但数据改变无效
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
console.log(arr.length); // 输出:0

Let和Const区别,详细版本的更多相关文章

  1. C++中引用与指针的区别(详细介绍)

    C++中引用与指针的区别(详细介绍) C++中的引用与指针的区别   指向不同类型的指针的区别在于指针类型可以知道编译器解释某个特定地址(指针指向的地址)中的内存内容及大小,而void*指针则只表示一 ...

  2. bower 和 npm 的区别详细介绍

    摘要: 本文讲的是bower 和 npm 的区别详细介绍, 简单的说,npm是进行后端开发中,使用的模块安装工具,而bower,是前端的模块安装工具. 比如,在安装express,socket.io时 ...

  3. 2018/03/08 每日一学PHP 之 常量defind 和 const区别

    常量defind 和 const区别 什么是常量? 如字面理解的,在脚本执行期间不可改变的的量. 定义一个常量应该注意的事项? 1:常量默认大小写敏感,错误的大小写不会被识别为常量. 2:常量只能是标 ...

  4. let、var、const区别(表格比较)

    let.var.const区别(表格比较): 区别项 let var const 作用域 块级作用域 全局作用域或函数作用域 块级作用域 是否有变量提升 无 有 无 是否可重复声明 不可 可以 不可 ...

  5. (转)全局变量、extern/static/const区别与联系

    全局变量.extern/static/const区别与联系 编译单元(模块):     在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LIN ...

  6. MySQL与Oracle的语法区别详细对比

    MySQL与Oracle的语法区别详细对比 Oracle和mysql的一些简单命令对比在本文中将会涉及到很多的实例,感兴趣的你不妨学习一下,就当巩固自己的知识了   Oracle和mysql的一些简单 ...

  7. var、let和const区别

    var.let和const区别 变量提升问题 var声明的变量存在变量提升,而let与const声明的变量不存在变量提升,但存在暂时性死区 即在预编译阶段,js引擎扫描代码时,遇到变量声明,会把var ...

  8. RabbitMQ安装说明文档(超详细版本)

    RabbitMQ安装说明文档(超详细版本) 1. 安装依赖环境 在线安装依赖环境: yum install build-essential openssl openssl-devel unixODBC ...

  9. PHP中的Define和Const区别

    我们经常把不经常变的值定义成常量,常量一般用全部大写来表示,前面不加美元符号,那么define和const有什么区别呢? 常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其 ...

  10. C/C++的const区别

    1.const基础知识(用法.含义.好处) int main() { const int a; //a为const,常数型数 int const b; //b为const,常数型数 const int ...

随机推荐

  1. c# 串口 转发到 TCP 客户端

    前言 对于数据流Stream的转发.在.net 3.5之后的版本只需要 stream.CopyTo(stream). 目前只是为了方便调用测试,花了一点点时间做了一个简单的调用demo 完整代码 us ...

  2. SQLite 帮助类

    public static class SqliteHelper { /// <summary> /// 获得连接对象 /// </summary> /// <retur ...

  3. Debug --> 攻击方式

    1.CSRF攻击概述: CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一. CSRF攻击原 ...

  4. Python+Django(3)——创建主页

    打开项目主文件夹learning_log中的文件urls.py: from django.contrib import admin from django.urls import path,re_pa ...

  5. POE供电及PD的功率分级

    POE供电标准有IEEE802.3af和IEEE802.3at 802.3af,PSE最高提供15.5W的功率而PD端则为12.95W: 802.3at,PSE最高提供30W的功率而PD端则为25W: ...

  6. APIView使用

    1 CBV源码分析 # 基于类的视图--->讲过了 -必须要继承它:from django.views import View  # drf的东西,都是写cbv,必须要继承View​​##### ...

  7. vue.js拓展无法启用

    vue.js拓展无法启用 这里我以自己的谷歌浏览器演示 C:\Users\维磊\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhd ...

  8. java学习笔记(五)运算符

    ++ --   自增自减 a++ 执行完这行代码后,先给b赋值,再自增 ++a 执行完这行代码前,先自增,再给b赋值 Math类

  9. CSS3之伸缩布局

    一 主轴方向 在伸缩布局中, 默认伸缩项是从左至右的排版的 主轴的排版的方向默认就是row, 默认就是从左至右 1.默认情况下主轴是水平方向的, 但是也可以修改为垂直方向.只要看到flex-direc ...

  10. manjaro日常使用之deepinTIM问题解决

    今天很高兴,因为我在我的manjaro+kde桌面上成功运行了deepinTIM.这样我离摆脱Windows使用的事业又更近了一步.众所周知,如果安装了kde桌面,deepinQQ的方案就无法运行,安 ...