一.let和const

1.let

a.阻止变量提升

b.块级作用域

c.不能重复声明

2.const

二.模板字符串

ES5语言有很多地方存在不合理以及不足，比如变量的提升、内置对象的方法不灵活再或者模块化实现不完善，需要借助art-template等模板引擎来完善和简化等等

ES6则是对ES5版本的升级完善，ES6不是单单的一个版本，它是ES6、ES7、ES8等统称，我们之后学习VUE、React以及Node.js运行环境都需要ES6的支持

一.let和const

ES6推出了两种新的声明变量的方法来代替var

我们对比一下这三种声明变量的方法，我们首先来看一下老版本ES5怎么声明以及它的缺点：

console.log(num);
// 打印
var num = 100;
// 声明变量// 因为JS语法的预解析导致了变量的提升，我们的代码在执行前会被预解析为下面的代码：
var num;
console.log(num);
num = 100;// 这样的话就存在一种不合理性了，本应该是获取不到值的而报错没有定义变量
// 可是我们会得到一个undefined，声明未赋值

1.let

a.阻止变量提升

为了解决使用 var 关键字声明变量所导致的变量提升，我们需要 ES6 的帮助，JavaScript 是从上往下执行的，本应该找不到变量而报错，却预解析为声明未赋值，这并不符合逻辑，在开发项目中也可能出现错误，所以ES6语法新增了let和const声明方法

这可有大学问了，ECMAScript2015明确规定，如果区块中存在 let 和 const 命令，那么这个区块对这些命令声明的变量从一开始就形成了一个封闭作用域，凡是在声明之前就使用这些变量就会报错未定义，找不到该变量，在代码块内使用 let 声明变量之前该变量不可用，在语法上被称为‘暂时性死区（Temporal dead zone）’,简称TDZ

我们来看一下let是怎么执行的：

console.log(num);
let num = 100;
//直接报错，找不到该变量

b.块级作用域

与 var 的最大区别就在这里，它们的作用域是不同的，如果使用 var 来声明变量，那么只有函数作用域和全局作用域，也就是说在块中定义的 var 变量在块外部同样可以访问，

而let会声明一个块级作用域，在块中声明的变量在块外是不能够访问的，好处就是它不会污染全局变量

//如果使用var声明变量：
if(100 == '100'){var num = 100;
}
console.log(num);
//这时打印台会收到100值//如果使用let声明变量：
if(100 == '100'){let num = 100;
}
console.log(num);//这时打印台会报错num is not defined，是找不到num变量的，因为此时num并不是全局变量

这里需要注意，虽然说它是一个块级作用域，但是不会影响作用域链以及函数的调用，依然会向上层寻求到变量值：

{let num = 100;function fn(){console.log(num);
}
fn();

c.循环作用域

我们经常使用一些循环语句来达成业务需求，比如 for 循环 , for ... of 循环,for...in 循环,forEach循环,random循环累加，filter循环过滤，some循环等等等等，那么我们以 for 循环为例，let 在for循环中不仅 { } 会生成一个块级作用域，就连 ( ) 也会生成一个块级作用域，（）块级作用域是 { } 块级作用域的父级作用域，我们在 ECMAScript2015 之前使用 var 声明的变量是全局作用域下的，当然包括在循环体内以及循环体外，而 let 声明的变量作用域只在循环体内，循环体外部无法使用该变量

var i = 1;for (var i = 0; i < 10; i++) {}console.log(i);// 10

这明显不合理啊，我在全局声明的 i 变量为什么会被一个 for 循环改变了？

ES6——let-const的变量声明以及模板字符串相关推荐

ES6新特性_let变量声明以及声明特性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记003
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 首先看es6的第一个变量声明特性,以前咱们用 var 声明,现在可以用let来声明变量. 可以看到 ...
ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字变量的解构赋值模板字符串简化对象写法箭头函数 => 参数默认值 rest参数扩展运算 ...
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...
2021-02-24let和const，变量的解构赋值，函数扩展
文章目录 let 1.ES6简介 2.let关键字 2.1 不存在变量提升 2.2 暂时性死区 2.3 不允许重复声明 3.块级作用域 3.1 为什么需要块级作用域缺点1:内部变量可能会覆盖外层的变 ...
ES6 标签模板与模板字符串
模板字符串模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默认函数,该 ...
es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
ES6（ECMASript 相关介绍，ECMASript 6 新特性---let,const关键字，变量的解析赋值，模板字符串，箭头函数，rest参数，spread扩展运算符，Symbol）
文章目录 1 ECMASript 相关介绍 1.1 es介绍 1.2 为什么要学习 ES6 1.3 ES6 兼容性 2 ECMASript 6 新特性 2.1.let 关键字 2.2. const 关 ...
ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数
ES6简介 ES全称:ECMAScript ; 由ECMA国际化组织制定的标准脚本语言的标准化规范: 为什么使用ES6? 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也 ...
ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
系列文章目录第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...

ES6——let-const的变量声明以及模板字符串

一.let和const

1.let

a.阻止变量提升

b.块级作用域

c.循环作用域

ES6——let-const的变量声明以及模板字符串相关推荐

最新文章

热门文章