ES6(1)
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>
4.模板字符串
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>
5.简化的对象写法
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>
Symbol
1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Symbol</title> </head> <body> <script> // boolean string number null undefined Object // usonb // you is so niubility //1. 创建 Symbol let s = Symbol(); //2. 传入字符串描述创建 let s2 = Symbol("UP"); let s3 = Symbol("UP"); //3. 调用对象的方法创建 let s4 = Symbol.for("Down"); let s5 = Symbol.for("Down"); console.log(s4 === s5); </script> </body> </html>
2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //创建一个对象 let obj = { a: 'xxx', run: function(){ console.log("abc"); } } //快速向对象中添加一个方法 run => 输出 测试 // obj.run = function(){ // }; //通过 Symbol 添加属性或者方法 // let run = Symbol('run');//121y212joi1hro1j2lke1 // obj[run] = function () { // console.log('测试'); // }; // console.log(obj); // console.log(obj.run()); // console.log(obj[run]()); let up = Symbol('up'); let game = { name: "飞机大战", [up]: function(){ console.log("向上") }, [Symbol('down')]: function(){ console.log("向下"); } }; console.log(game); </script> </body> </html>
3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Symbol属性遍历</title> </head> <body> <script> let game = { name: "飞机大战", [Symbol('up')]: function(){ console.log('向上') }, [Symbol('down')]: function(){ console.log('向下') }, [Symbol('left')]: function(){ console.log('向左') }, [Symbol('right')]: function(){ console.log('向右') }, } //1. for...in 不能遍历 Symbol 类型的属性 for(let i in game){ console.log(i); } //2. Reflect.ownKeys 反射得到对象所有的属性名, 返回一个数组 let attrs = Reflect.ownKeys(game); //遍历数组 for(let i=0;i<attrs.length;i++){ // attrs[0] = name // attrs[1] = Symbol('up') console.log(attrs[i]) console.log(game[attrs[i]]); } </script> </body> </html>
4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Symbol内置属性</title> </head> <body> <script> // Symbol 是一个函数还是一个对象 Symbol('abc') Symbol.for() 函数对象 // Symbol 内置属性都是固定的写法 $().attr html // Symbol 的内置属性是为了扩展对象的功能 let school = { name: "尚硅谷", //当对象用来判断类型的时候 [Symbol.hasInstance]: function(){ console.log('我被当做类型检测啦!!'); return true; }, // [Symbol.match]: function(){ console.log("我被当做正则放在了 match 中调用"); return 123456; } }; let obj = {}; //检测类型 console.log(obj instanceof school); //用作正则使用 let str = "iloveyou"; console.log(str.match(school)); </script> </body> </html>
