ES6 语法详解(let关键字)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button><span>测试1</span></button>
<button><span>测试2</span></button>
<button><span>测试3</span></button>
</body>
<script>
/**
* let
* 作用:
* 与var类似,用于声明一个变量
* 特点:
* 在块级作用域有效
* 不能重复声明
* 不会预处理,不存在提升
* 应用:
* 循环遍历加监听
* 使用let取代var是趋势
*/
// 不能重复声明 就是和Java一样不能声明重复的变量
let username = 'Mr.dance'
// let username = 'Mis.flower'
// 不存在提升的意思是指不能在定义之前使用,和Java一样,必须先定义,再使用
// console.log(age)
// let age = '18'
// 循环遍历加监听的意思是指,在循环中为按钮或者其他元素绑定事件,因为在ES6之前是使用var定义的循环变量,没有自己的作用域,会出现问题,在ES6后使用let解决了这个问题,ES5中采用闭包解决
let btns = document.getElementsByTagName('button')
// for (var i = 0; i < btns.length; i++) {
// btns[i].onclick = function() {
// alert(i)
// }
// }
// 采用闭包解决
// for (var i = 0; i < btns.length; i++) {
// (function(i) {
// btns[i].onclick = function() {
// alert(i)
// }
// })(i)
// }
// 采用let解决
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
alert(i)
}
}
/**
* 相比于使用闭包,还是使用let解决更优雅一些,只需要将var替换为let即可
*/
</script>
</html>为什么ES5 是只写了一篇呢,因为我觉得ES5的知识相对较少,并且也逐渐被ES5所代替,就只写了一篇,但是ES6的知识点比较多,并且对于ES发行来说具有划时代的意义,所以我就把ES6分为多个小结来写了,并且都是写成了代码块,这也是作者我的一个小细节吧,为什么不写成文档的形式呢,应为对于这种语法来说,虽然写成文档,会漂亮一下,但是对于读者的尝试我觉得不太好,还要分开去复制,像这样写成代码块,大家可以直接复制走,一边执行,一边看上面的注释,结合代码理解起来容易一些,并且其中的重点我已经在标题中写出来了,并且文章的内容不都不是很长,这也是我自己的一个阅读习惯吧,并不是很喜欢那种长篇大论,虽然很好,但是我确实不是很喜欢,我喜欢内容精髓,并且少的文章,这样我不用花多长时间,就可以每天进步一点点(仅仅是个人爱好,并不是说长的文章不好,我自己也写长篇大论)
(作者憨憨的日常:最近接手一个项目里面就没有写ES6以前的语法的,看的一脸懵,周六日恶补一下,ES6往后的技术点确实挺多的,要是不看的话别人写 你都看不懂的那种)
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-08-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读