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
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发
