1. let关键字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_let关键字</title> </head> <body> <button>测试1</button> <br> <button>测试2</button> <br> <button>测试3</button> <br> <!-- ***let 1. 作用: * 与var类似, 用于声明一个变量 2. 特点: * 在块作用域内有效 * 不能重复声明 * 不会预处理, 不存在提升 3. 应用: * 循环遍历加监听 * 使用let取代var是趋势 --> <script type="text/javascript"> //console.log(age);// age is not defined let age = 12; //let age = 13;不能重复声明 console.log(age); let btns = document.getElementsByTagName(‘button‘); //var 声明 // 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) //i就是每个按钮的索引 } } </script> </body> </html>
2.const关键字
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_const关键字</title> 6 </head> 7 <body> 8 <!-- 9 1. 作用: 10 * 定义一个常量 11 2. 特点: 12 * 不能修改 13 * 其它特点同let 14 3. 应用: 15 * 保存不用改变的数据 16 --> 17 <script type="text/javascript"> 18 const sex = ‘男‘; 19 console.log(sex); 20 //sex = ‘女‘;//不能修改 21 console.log(sex); 22 </script> 23 </body> 24 </html>
3.变量的解构赋值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_变量的解构赋值</title> 6 </head> 7 <body> 8 <!-- 9 1. 理解: 10 * 从对象或数组中提取数据, 并赋值给变量(多个) 11 2. 对象的解构赋值 12 let {n, a} = {n:‘tom‘, a:12} 13 3. 数组的解构赋值 14 let [a,b] = [1, ‘atguigu‘]; 15 4. 用途 16 * 给多个形参赋值 17 --> 18 <script type="text/javascript"> 19 let obj = {name : ‘kobe‘, age : 39}; 20 // let name = obj.name; 21 // let age = obj.age; 22 // console.log(name, age); 23 //对象的解构赋值 24 let {age,name} = obj; 25 console.log(age,name); 26 // let {name, age} = {name : ‘kobe‘, age : 39}; 27 // console.log(name, age); 28 29 //3. 数组的解构赋值 不经常用 30 let arr = [‘abc‘, 23, true]; 31 let [a, b, c, d] = arr; 32 console.log(a, b, c, d); 33 //console.log(e); 34 function person(p) {//不用解构赋值 35 console.log(p.name, p.age); 36 } 37 person(obj); 38 39 function person1({name, age}) { //{name, age}=obj,结构赋值 40 console.log(name, age); 41 } 42 person1(obj); 43 44 45 </script> 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04_模板字符串</title> 6 </head> 7 <body> 8 <!-- 9 1. 模板字符串 : 简化字符串的拼接 10 * 模板字符串必须用 `` 包含 11 * 变化的部分使用${xxx}定义 12 --> 13 <script type="text/javascript"> 14 let obj = { 15 name : ‘anverson‘, 16 age : 41 17 }; 18 console.log(‘我叫:‘ + obj.name + ‘, 我的年龄是：‘ + obj.age); 19 20 console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`); 21 </script> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 // <!-- 11 // 简化的对象写法 12 // * 省略同名的属性值 13 // * 省略方法的function 14 15 let name= ‘cobo‘; 16 let age= 45; 17 // let obj={ 18 // name:name, 19 // age:age 20 // } 21 22 // console.log(obj.name) 23 24 25 let obj1={ 26 name, 27 age 28 } 29 30 console.log(obj1.name) 31 32 33 //普通额写法 34 // let obj = { 35 // x : x, 36 // y : y, 37 // getPoint : function () { 38 // return this.x + this.y 39 // } 40 // }; 41 //简化的写法 42 let obj = { 43 x, 44 y, 45 getPoint(){ 46 return this.x 47 } 48 }; 49 console.log(obj, obj.getPoint()); 50 </script> 51 52 </body> 53 </html>
原文：https://www.cnblogs.com/fsg6/p/13055959.html