ES6之let和const
进入前端领域工作将近两年,看过学习过很多大牛的文档和视频,2018年也打算对学过的知识点给出一个小结式的输出,从ES6开始吧。
ES6新增 let 命令,用途是用来声明变量。一个新的事物被提出,总是有原因的,它能带来什么?ES6之前是用 var 声明变量,它有什么不足呢?
不足一:用来计数的循环变量泄露为全局变量。看半天文字,不如敲两行代码来的快:
var aa = [];
for(var i=0;i<10;i++){aa[i] = function(){console.log(i);}
}
aa[8](); //10 不论是aa[5]()还是aa[6]()输出都是10
复制代码
上面代码中,变量 i 是 var 声明的,在全局范围内都有效,所以每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 值。
如果把 for 里面的 var 换为 let,则 i 是 let 声明的,当前的 i 只在本轮循环有效,所以每一次循环的 i 其实都是一个新的变量,则aa[8] ()输出的就是8,aa[5] ()输出的就是5。这就引出了块级作用域的概念。
块级作用域的简单理解:任何一对花括号({ })中的语句都属于一个块,在花括号里面用 let 定义的所有变量在花括号外都是不可见不可用的。为了更好理解,再来一个例子:
function f1(){let n=5;if(true){let n=10;}console.log(n);
}
f1(); //输出5 表示外层代码块不受内层代码块的影响
复制代码
function f2(){var n=5;if(true){var n=10;}console.log(n);
}
f2();//输出10 表示内层变量会覆盖外层变量
复制代码
不足二:用 var 声明的变量存在变量提升
什么是变量提升?
变量提升是指将函数及变量的声明将被提升到函数最顶部。
变量可以先使用再声明,也就是变量可以先使用再声明。举个例子:
var a=1;
(function(){console.log(a); var a=2;
})() //undefined
复制代码
原因:代码块(函数内)里面声明并定义了一个变量 a,导致变量提升了,实际代码的执行顺序如下:
var a=1;
(function(){var a;console.log(a); a=2;
})() //undefined 声明了a,但是还没有定义,所以是undefined
复制代码
如果用 let,会报错,提醒你使用之前先声明
let a=1;
(function(){console.log(a); let a=2;
})() //"error" "Use before declaration (line 25)"
复制代码
上述两点看懂后,对 var 和 let 会有一个比较清晰的认识,下面再简单介绍一下 const 命令:它是用来声明常量,一旦声明,其值就不能改变。
- 不可修改
const name = '小花';
name = '小草'; //error
复制代码
2.只在块级作用域内起作用,不存在变量提升,先声明后使用,和let关键字一样
3.不可重复声明同一个变量,声明后必须赋值
如果常量是一个对象,如何处理,这是一个重点
const Person = {"name": "小花"
};
Person.name = "小草";
Person.age = 18;
console.log(Person); //{ name: "小草”,, age: 18}
复制代码
是不是很奇怪,不是说常量的值是不能改变的吗?为什么 Person 的 name 被改了?
对于这种复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const 命令只是保证变量名指向的地址不变,并不保证该地址的数据不变。
参考资料:
1.《ES6标准入门》 阮一峰 著
2.微信公众号---web前端教程
转载于:https://juejin.im/post/5a5614886fb9a01caa206e0b
ES6之let和const相关推荐
- 【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
- ES6中使用let, const声明的变量, 在window对象下是获取不到的
ES6中使用let, const声明的变量, 在window对象下是获取不到的 今天在写demo的时候发现, 使用let或者const声明的变量, 在window对象下使用this来获取发现获取不到 ...
- [OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}=
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}= 解构赋值语法是一种 Javascript 表达式.通过解构赋值, 可以将属性/值从对象/数组中取出, ...
- es6(let与const命令)
es6(let与const命令) 理论区别 var let const 在函数作用域内或者全局有效,没有块级作用域 只在let命令所在的代码块内有效 只在声明所在的块级作用域内有效 能重复声明 不能重 ...
- 【ES6】let、const变量提升的验证,以及TDZ死区的理解
前段时间在网上自学ES6,了解到ES6新增的let和const是存在变量提升的,但是由于TDZ(暂时性死区)的存在,在定义前访问会出现错误. 今天在腾讯课堂听老师讲ES6,多次强调let和const没 ...
- 【面试题】【ES6】let和const命令 (面试必看)
给大家推荐一个实用面试题库 1.前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1.let命令 基本用法 用法类似于var,但是所声明的变量,只在let命令所在 ...
- 关于ES6中let 和 const 命令的用法以及注意事项:
let命令: 基本用法: let定义: 用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. <script> //let代码块内部定义的变量,与var ...
- ES6的let、const命令
1.let命令: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是 let 所声明的变量,只在let命令所在的代码块内有效. 代码如下: {let a = 1;var ...
- 【ES6 教程】第一章 新的ES6语法03—使用const 关键字定义常量
英文 | https://www.javascripttutorial.net 翻译 | 杨小爱 在本教程中,我们将学习如何使用 JavaScript const 关键字定义常量. JavaScrip ...
最新文章
- 无人驾驶——对frenet坐标的理解
- 自动驾驶软件工程课程之SLAM(1)
- Oracle RAC删除节点
- 【Web】Eclipse + Maven + Struts搭建服务器
- 软件测试第二次作业:JUNIT单元测试方法
- 【BZOJ3036】绿豆蛙的归宿 概率DP
- Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例
- 内外网同时使用解决办法
- pythonsearch方法_python正则表达式(4)--search方法
- android gms包找不到,错误:包com.google.android.gms.appstate不存在
- 不符合c语言表达式,C语言的基本语法有哪些?,已知各变量的类型说明如下,则以下不符合C语言语法的表达式是...
- C++经典程序代码大全
- 3个方法解决百度网盘限速问题
- k2p openwrt固件_自编译OpenWrt 属于自己的固件
- 尚学堂1811期python视频_尚学堂1811期Java+架构全套视频教程 下载
- Replace Autoprefixer browsers option to Browserslist config.
- iOS闪退日志的收集和解析
- 东航手机值机选座推荐
- Vue3+tsx开发语法详解
- Asp.net网站iis设置起始页
热门文章
- boost::endian::endian_arithmetic的测试程序
- Boost:内存限制的测试程序
- 保持边缘平滑的图像(曲率)
- ITK:从图像区域中随机选择像素而不进行替换
- VTK:Picking之HighlightSelection
- OpenCV GrabCut分割的实例(附完整代码)
- Qt Creator连接iOS设备
- Qt Creator使用材质和明暗器Using Materials and Shaders
- OpenGL pointsprites点精灵的实例
- C++实现array right rotation数组右旋转(附完整源码)