如题，为什么要用 let 和 const 呢？

在开始这个话题之前，我们先来通过以下的小例子了解一下 JavaScript 中 var 声明及变量提升机制。

按照一般逻辑，变量应该在声明语句之后才可以使用，但在上面的代码中，是声明之前输出foo的值，且这个值为undefined，这就说明变量在声明之前就已经存在了。为什么用var会出现这种问题呢？下次我们在讨论。这里就是人们经常说的变量提升，即变量可以在声明之前使用，值为undefined。我们console用let声明的变量bar，报错了，这就表示声明之前，变量bar是不存在的，这里就没有变量提升的现象出现。为了纠正这种现象，让大家更好的理解代码，let命令改变了语法行为，它所使用的变量一定要在声明之后使用，否则就会报错。

1. let 命令

特性：

块级声明
不存在变量提升
不允许重复声明

1.1 块级声明和不存在变量提升

块级声明是指某个变量只在相应的作用域内生效，外部是不可以访问的。let 声明的用法与 var相同，不同的是不存在变量提升，在指定作用域生效。常见的块级作用域:

函数内部

  function fn1 () {let a = 5 if (true) {let a = 10}console.log(a)}// fn1()function fn2 () {var b = 2if (true) {var b = 4}console.log(b)}// fn2()

块中 {}

{let a = 10var b = 1
}
console.log(a) // ReferenceError: a is not defined
console.log(b) // 1

1.2 不允许重复声明

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

  // 报错：Identifier 'a' has already been declared at Objectfunction fn() {let a = 10var a = 1}// fn()// 报错：Identifier 'a' has already been declared at Objectfunction fn1 () {let a = 10let a = 1}// fn1()// 报错：Identifier 'a' has already been declared at Objectfunction fn2 (arg) {let arg}// fn2()

2. const 命令

const 通常声明的是一个只读的常量，一旦声明了，其中的值是不能改变，这就意味着声明的这个常量必须是要赋值的。

// 值不能变
const S = 60S = 120
// TypeError: Assignment to constant variable.// 必须赋值
const M
// Missing initializer in const declaration

const 除了值不能变和只读，其他的特性跟 let 是一样的，同样是块级声明、不存在变量提升和不允许重复声明。在这里需要注意一点的是，声明常量的时候要必须确保这个值是固定不变的。

总结

回到问题：为什么要用 let 和 const ？
新语法的出现，不仅使得我们更容易的理解JS，而且减少很多奇奇怪怪的问题出现。块级声明，可以很有效的避免了变量污染这个问题。

想继续学习更多有关前端知识，可以关注我的公众号。大家一起来学习如何快速掉头发。

ES6基础-为什么要用let和const相关推荐

ES6基础（var let const 箭头函数）-学习笔记
文章目录 ES6基础(var let const 箭头函数)- 学习笔记定义:var let const 箭头函数数据结构 set map ES6基础(var let const 箭头函数)- 学 ...
ES6基础：let和const
ES6基础之let和const 变量声明是我们在学习一门语言时,最先了解的部分之一.不要忽略它,我们一起来看看ES6中新增的两种变量声明命令吧- 在开始ES6系列之初,我们就应该遵循尽量或者完全将它们 ...
ES6基础5（Promise）-学习笔记
文章目录 ES6基础5(Promise)-学习笔记 Promise 三个状态状态转换手写Promise源码同步异步概念 jquery中串行并行 async-await 微任务宏任务 ES6基 ...
ES6基础2（块级作用域、数组对象解构）-学习笔记
文章目录 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域数组解构对象解构字符串解构函数的参数解构 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域 //let c ...
【ES6基础】Object的新方法
Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6.ES7.ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法. 本篇文 ...
android log 如何获取double类型后小数点的值_【ES6基础】Symbol介绍：独一无二的值...
开篇 ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是 ...
【ES6基础】Map与WeakMap
开篇 ES6里除了增加了Set(集合)类型外(笔者在这篇文章<Set与WeakSet>有过介绍),今天的这篇文章笔者将继续介绍ES6引入的新类型--Map(映射类型)和其对应的弱类型Wea ...
Part2：面向对象、原型链、函数、ES6基础语法
一.面向对象标记语言:HTML5/CSS3 编程语言:编程思想面向过程 C 面向对象 JAVA.PHP.C#(ASP.NET).JavaScript- 1.单例设计模式 let name='和冉' ...
银行前端面试高频基础问题——var、let和const到底有哪些区别？讲不清楚当场发感谢信！？
银行前端面试高频基础问题--var.let和const到底有哪些区别?讲不清楚当场发感谢信!? 面试官:知道const.let和var吧,说说他们的区别吧我:- - 前言可以说这是银行我们面试遇到 ...

ES6基础-为什么要用let和const

1. let 命令

1.1 块级声明和不存在变量提升

1.2 不允许重复声明

2. const 命令

总结

ES6基础-为什么要用let和const相关推荐

最新文章

热门文章