<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>let</title> </head> <body> <script> //声明变量 let a; let b,c,d; let e = 100; let f = 521, g = 'iloveyou', h = []; //1. 变量不能重复声明 let star = '罗志祥'; let star = '小猪'; //2. 块儿级作用域 全局, 函数, eval // if else while for { let girl = '周扬青'; } console.log(girl); // 结果是girl is not defined ；let定义的只能在同一块级作用域内，这和var不同， //3. 不存在变量提升 就是说不允许在变量定义之前使用。 console.log(song); let song = '恋爱达人'; // 结果： song is not defined ；因为let不允许在变量定义之前使用。 // 如果是var的话，输出的结果就会是defined， //因为在执行 console.log(song)的时候他会默认自己创建一个var long；然后再执行 console.log(song); //4. 不影响作用域链 { let school = '尚硅谷'; function fn(){ console.log(school); } fn(); // 结果：尚硅谷 } </script> </body> </html>
let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1) 不允许重复声明
2) 块儿级作用域
3) 不存在变量提升
4) 不影响作用域链
应用场景：以后声明变量使用 let 就对了
示例用法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击 DIV 换色</title> <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .item { width: 100px; height: 50px; border: solid 1px rgb(42, 156, 156); float: left; margin-right: 10px; } </style> </head> <body> <div class="container"> <h2 class="page-header">点击切换颜色</h2> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script> //获取div元素对象 let items = document.getElementsByClassName('item'); //遍历并绑定事件 for(var i = 0;i<items.length;i++){ items[i].onclick = function(){ //修改当前元素的背景颜色 // this.style.background = 'pink'; items[i].style.background = 'pink'; } } </script> </body> </html>
上面代码是有问题的，因为for(var i=0,...)
class="item" 元素有3个，所以for循环完成之后i变成3，当点击click事件触发函数的时候，i还是3，但是class="item" 元素只有3个，显然下标超出范围了，所以可以改为
this.style.background = 'pink';
或者使用let做变量声明，因为他是块级作用域的
//获取div元素对象 let items = document.getElementsByClassName('item'); //遍历并绑定事件 for(let i = 0;i<items.length;i++){ items[i].onclick = function(){ //修改当前元素的背景颜色 // this.style.background = 'pink'; items[i].style.background = 'pink'; } }