1.let
<script> //1.声明变量 let a; let b,c,d; let e =100; let f=521,g='iloveyou',h=[]; //2.let变量不能重复定义 例 // let peope = 'bill' // let peope = 'jom' //会报错：01.html:19 Uncaught SyntaxError: Identifier 'peope' has already been declared //var可以重复声明变量 var sum = 1; var sum = 2; console.log(sum) //3.块级作用域 （全局 块级 eval） //let声明的变量是块级作用域 // { // let girl ="邓紫棋" // } // console.log(girl) //再块外面访问不到，会报：01.html:33 Uncaught ReferenceError: girl is not defined //at 01.html:33 //var是全局作用域 { var girl ='邓紫棋' } console.log(girl) //会打印 邓紫棋 //4.let不会变量提升 // console.log(a); // let a = 4; //会报 01.html:45 Uncaught SyntaxError: Identifier 'a' has already been declared //var提升变量 console.log(sum1) //undefined var sum1 = 4; //let不影响作用域链 { let name = 'tom' function fun(){ console.log(name) } fun();//tom } fun();//tom </script>
2.let小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> <style> .item{ width: 100px; height: 50px; border: 1px skyblue solid; float: left; margin-left: 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> //获取元素 let items = document.getElementsByClassName("item") //遍历绑定事件 for(var i=0; i<items.length;i++){ items[i].onclick = function (){ // this.style.backgroundColor ='pink'//可以使用 items[i].style.backgroundColor = "pink"//不可以使用 //会报：02.html:36 Uncaught TypeError: Cannot read property 'style' of undefined //at HTMLDivElement.items.<computed>.onclick (02.html:36) /*因为var声明的是全局变量，等到i=3时，才执行程序，如果用let声明i就可以用items[i]*/ } } </script>
3.const
<script> //1.声明常量 const name = "bill" console.log(name) //bill //2.常量必须赋初始值 // const arr // console.log(arr)//02.html:49 Uncaught SyntaxError: Missing initializer in const declaration //3.常量值不能修改 name ="jom"//报错Uncaught TypeError: Assignment to constant variable. console.log(name) //4.块级作用域 //5.对于数组和对象的元素修改，不算做对常量的修改，不会报错 </script>
4.变量结构赋值
<script> /*ES6允许安装一定模式从数组和对象中提取值，对变量进行赋值 这被称为结构赋值*/ //数组赋值 const f4 =['bill','tom','jack','sam'] let arr = [a,b,c,d]=f4 console.log(a)//bill console.log(b)//tom console.log(c)//jack console.log(d)//sam //对象赋值 const per = { name :'bill', age :18, ddm : function(){ console.log("打代码") } } let {name,age,ddm}=per console.log(name) //bill console.log(age) //18 ddm() //打代码 </script>