一、let

  1.定义

    ES6新增了let命令,用来声明变量,用法类似于var,但是和var有一定的区别

  2.let只在块级作用域内有效

    首先来看一个比较简单的例子,请告诉我,他们分别输出什么

//代码段1
for(var i = 0; i < 10 ;i++){
console.log('我是var声明的')
}
console.log(i)//10
//代码段2
for(let i = 0; i < 10 ;i++){
console.log(‘我是let声明的’)
}
console.log(i)// i is not defined

    两段代码的不同之处就在声明变量i时,一个采用的var,一个采用的let。代码段1在外部打印i时的结果是  10,而代码段2的结果却是  i is not defined。

    这是因为let声明的变量只在块级作用域内有效,所以在外部环境无法使用这个变量,而var声明的变量是一个全局变量。

    然后再看下面这个经典面试题,告诉我,他们分别输出什么

//代码段1 var声明
for (var i = 0; i < 10; i++) {
setTimeout(function(){
console.log(i)//10次10
},100)
} //代码段2 let声明
for (var i = 0; i < 10; i++) {
setTimeout(function(){
console.log(i)//0-9
},100)
}

    分析代码之前,你要知道setTimeout是一个异步函数,异步函数的执行顺序是当主线程执行完成之后才会执行异步队列里的函数。所以每一次for循环实际上是将与之对应的setTimeout放入异步队列里面。当for循环执行完成之后,再执行这些setTimeout。

    搞清楚了执行过程,那我们从结果来分析原因。用var声明的for循环的结果是10次10,这是因为当for循环执行完成之时,全局变量i的值已经变成了10,调用setTimeout函数,打印10次10。用let声明的变量并不是一个全局变量,是一个有块级作用域的变量,那么在每次循环的时候,这个i就绑定到了对应的setTimeout函数身上,实际上就是每一次循环的i都是一个新变量。所以他会输出0-9。

    园友:你说上面每一次循环的i都是一个新变量,那为什么i的值会依次增加呢?

    小炉:因为 javascript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

  3.不存在变量提升

    var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。我也在之前的博客里面多次分析变量提升的代码执行顺序,在这里不再赘述,后续会专门出一篇变量提升和函数提升的解析博客

    let命令则不会出现这个现象,它要求所声明的变量一定要在声明后使用,否则报错。

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

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

  4.暂时性死区

    只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;

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

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

   ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

  总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 tdz)。暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

  5.不允许重复声明

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

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

    因此,不能在函数内部重新声明参数。

function func(arg) {
let arg;
}
func() // 报错 function func(arg) {
{
let arg;
}
}
func() // 不报错

    值得一提的是,一定要明确不允许重复声明的概念,请看下面的代码:

for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc

    实际上这段代码并不是重复声明(let不允许在相同作用域内,重复声明同一个变量),for循环有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。

二、const

  1.定义

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

  2.const特点

    (1)const一旦声明变量,就必须立即初始化,不能留到以后赋值。只声明不赋值,就会报错。

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

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

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

    (5)const声明的变量不得改变值,改变常量的值就会报错

  3.const声明真的不能改值吗?

    const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。

    但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

    接下来我们分别用基本数据类型和引用数据类型举例

//const声明基本数据类型
const i = 10
function show(){
i = 20
}
show()//Uncaught TypeError: Assignment to constant variable. //const声明 数组 改变数组内某个元素
const arr = [1,3,5,67,8,90]
arr[0] = 5
arr.push(4)
console.log(arr)//[5, 3, 5, 67, 8, 90, 4] //const声明 对象 改变对象某个键值
const obj = {
name:'杰西卡',
age:15,
time:true
}
obj[name] = '詹姆斯'
obj.aa = 'hold on'
console.log(obj)//{name: "杰西卡", age: 15, time: true, "": "詹姆斯", aa: "hold on"}

    从上面代码的结果可以看到,const声明基本数据类型的时候,该变量的值是不可以改变的。当声明引用数据类型的时候,对数组/对象内部的元素进行删改,是可以改变的。那这是为什么呢?我们再看一段代码,再来解释

//const声明的对象 重新赋值
const obj = {
name:'杰西卡',
age:15,
time:true
}
let a = {
name:'haha',
age:12,
time:false
}
obj = a
console.log(obj)//Uncaught TypeError: Assignment to constant variable. //const声明的数组 重新赋值
const arr = [1,3,5,67,8,90]
let cc = [0]
arr = cc
console.log(arr)Uncaught TypeError: Assignment to constant variable.

    上面两段代码的结果都是报错,且提示const声明的是无法修改的。

    原因:首先你应该知道引用数据类型的存储方式,在栈中存储了指针,该指针指向堆中具体的对象(也就是对象的值)。const所说的声明变量不能改变值,这个值对于引用数据类型来说是栈中的指针,const只能保证这个指针是固定的。所以当你对对象内部的值进行修改时是被允许的。但是当你去修改这个指针时,就会报错。

三、总结

  let、const声明的变量只能在块级作用域中使用,没有变量提升,不能重复声明,必须先声明再使用。const声明变量必须伴随初始化,且const声明的变量值不可以修改。

  var声明的变量作用域是整个封闭函数,是全局的(浏览器环境下会挂到window上,作为window的属性,let、const不会),var声明的变量存在变量提升,声明会提升到作用域的最顶部。var可以重复声明。

  

  

    

    

    

ES6语法——let和const的更多相关文章

  1. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  2. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  3. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  4. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

  5. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  6. 在Node中使用ES6语法

    Node本身已经支持部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用.为了能使用这些新特性,我们就需要使用babel把E ...

  7. es6语法快速上手(转载)

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  8. webpack中使用babel处理es6语法

    index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...

  9. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

随机推荐

  1. cb07a_c++_迭代器和迭代器的范围

    cb07a_c++_迭代器和迭代器的范围c++primer第4版https://www.cnblogs.com/txwtech/p/12309989.html--每一种容器都有自己的迭代器--所有的迭 ...

  2. Day10-微信小程序实战-交友小程序-添加好友功能之创建并更新message信息

    1.首先要在 添加好友 这个按钮上添加一个事件,也就是在detail.wxml的添加好友这个按钮的哪里,添加一个点击事件 handleAddFriend 并且添加好友还要考虑,现在是已登陆状态还是未登 ...

  3. android java层通过jni加载使用第三方的so库

    1.例如我们自己编译一个so库,我们的其他模块要加载如何操作了 首先在c盘新建立一个文件夹sb,在sb下面新建立一个文件夹jni,如果你要使用ndk编译so库,必须需要有jni目录 2.在jni目录下 ...

  4. MAC安装VMware fusion

    1.下载VMware fusion 11 https://www.vmware.com/cn/products/fusion/fusion-evaluation.html 2.安装后启用输入注册码 V ...

  5. MyEclipse 选中属性或方法后 相同的不变色

    myeclipse-->windows-->java-->Editor-->content Assist-->Mark Occurrencmyeclipse-->w ...

  6. PAT A1003 Emergency 题解

    PAT A1003 Emergency PAT A1003 Emergency 题目简述: 原题为英文题目,所以在这里简述一下题意: 给定n个点和m条无向路以及起点.终点 下面一行n个数,第i个数表示 ...

  7. CentOS7开机报错piix4_smbus ****host smbus controller not enabled

    vi /etc/modprobe.d/blacklist.conf 输入:blacklist i2c_piix4 保存退出::wq 重启:reboot (完)

  8. 安卓移动端line-height垂直居中出现偏移的原因,及解决方法

    目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的.出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的. 左图中的字号是12px,右图中的 ...

  9. 「树形DP」洛谷P2607 [ZJOI2008]骑士

    P2607 [ZJOI2008]骑士 题面: 题目描述 Z 国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的 ...

  10. The Shortest Statement CodeForces - 1051F 最小生成树+并查集+LCA

    题目描述 You are given a weighed undirected connected graph, consisting of n vertices and mm edges. You ...