1.箭头函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>箭头函数 - this 指向</title> 8 </head> 9 10 <body> 11 <script> 12 // ES6 允许使用「箭头」（=>）定义函数。 13 function fn(a, b){ 14 return a + b; 15 } 16 let add = (a,b) => { 17 return a + b; 18 }; 19 20 //调用箭头函数 21 // console.log(add(100, 421)); 22 23 // 注意点 24 // 1. this 的值是静态的. this 始终指向箭头函数定义时的所在作用域下的 this 的值 25 // function getName(){ 26 // return this.name; 27 // } 28 // let gName = () => { 29 // return this.name; 30 // }; 31 32 // //修改 window 的name属性 33 // window.name = "尚硅谷"; 34 // const school = { 35 // name: "ATGUIGU" 36 // }; 37 38 // //函数调用 39 // console.log(getName.call(school)); //this为school 40 // console.log(gName.call(school)); //this为window 41 42 // 2. 不能作为构造函数使用 43 // const Person = (name, age) => { 44 // this.name = name; 45 // this.age = age; 46 // }; 47 // const me = new Person("xiaohigh", 33); //Person is not a constructor 48 49 // 3. 不能使用 arguments 50 51 //常规函数 52 function foo3(a,b,c){ 53 console.log(arguments) 54 } 55 56 foo3(1,2,3) 57 // let targv = () => { 58 // console.log(arguments); //arguments is not defined 59 // }; 60 // targv(1,2,3,4); 61 62 // 4. 箭头函数简写 63 // 1) 省略小括号 当形参有且只有一个的时候 64 // 2) 省略花括号 当代码体只有一条语句的时候, 语句的执行结果就是函数的返回值 65 // let ten = item => { 66 // return item*10; 67 // } 68 // let sub = (a,b) => { 69 // return a - b; 70 // }; 71 // let sub = (a,b) => (a - b); 72 73 console.log(sub(10,5)); 74 75 76 </script> 77 </body> 78 79 </html>
2.箭头函数实践
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>箭头函数实践</title> 8 <style> 9 div { 10 width: 200px; 11 height: 200px; 12 background: #58a; 13 } 14 </style> 15 </head> 16 17 <body> 18 <div></div> 19 <script> 20 //需求-1 点击 div 2s 后颜色变成 粉色 21 22 let div= document.querySelector('div') 23 24 //常规函数 25 div.addEventListener('click',function(){ 26 27 var _this=this 28 setTimeout(function(){ 29 _this.style.background='pink'; 30 },2000) 31 }) 32 33 34 35 //箭头函数 36 div.addEventListener("click", function () { 37 // this.style.background = "pink"; 38 //保存this的值 39 // var that = this; 40 setTimeout(() => { 41 // that.style.background = "pink"; 42 this.style.background = "pink"; //this自己作用域找不到，往外找 43 }, 2000); 44 }); 45 46 //需求-2 从数组中返回偶数的元素 47 const arr = [1, 10, 90, 89, 189, 78, 65]; 48 49 const oushu = arr.filter(function (item) { 50 // if else代码体只有一条语句的话 花括号可以省略 51 if (item % 2 === 0) return true; 52 // return item; 53 }); 54 const ou = arr.filter(item => item % 2 === 0); 55 56 console.log(oushu); 57 console.log(ou); 58 59 // 箭头函数适合与 this 无关的回调函数 定时器, 数组方法的回调 60 // 箭头函数不适合与 this 有关的回调函数. DOM的事件绑定, 对象的方法定义 61 62 //对象的方法 63 let fn = () => { 64 return this.name; 65 }; 66 window.name = "nia"; 67 const school = { 68 name: "coko", 69 getName: fn 70 }; 71 72 console.log(school.getName()); 73 </script> 74 </body> 75 76 </html>
3.rest参数，...arg
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>rest参数</title> 7 </head> 8 <body> 9 <script> 10 //乘法 11 // function mul(...arg){ //...arg rest参数 12 // console.log(arguments);// 伪数组 13 // console.log(arg);// 真正的数组 [2,9,10,15] 14 // } 15 // mul(2,9,10,15); 16 17 //rest 参数一定要放到参数的最后位置 18 function div(a,b,...arg){ 19 console.log(a) 20 console.log(b) 21 console.log(arg) //[10,5] 22 } 23 24 console.log(div(1000,2,10,5)); 25 26 27 </script> 28 </body> 29 </html>
4.函数参数默认值
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>函数参数默认值</title> 7 </head> 8 <body> 9 <script> 10 //1. 参数直接设置默认值 11 function add(a, b=10){ 12 return a + b; 13 } 14 console.log(add(1)); 15 16 //2. 与解构赋值结合使用 17 function send({url, data, method="POST"}){ 18 console.log(method) 19 console.log(url) 20 console.log(data) 21 } 22 send({url: "http://www.baidu.com", data: {a:100,b:200}}); 23 24 /** 25 * 参数的默认值 具有默认值的参数要一般靠后声明 26 */ 27 </script> 28 </body> 29 </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>扩展运算符</title> 7 </head> 8 <body> 9 <script> 10 // 11 // function fn(...args){ 12 // // args = [1,2,3,4,5] 13 // } 14 // fn(1,2,3,4,5) 15 16 // ... 扩展运算符是将 数组转换为 参数序列 解包 17 //1. 展开数组 18 let arr = [1,2,3,4]; 19 //声明一个函数 20 function foo(a,b,c,d){ 21 console.log(a) 22 console.log(b) 23 console.log(c) 24 console.log(d) 25 console.log(arguments) 26 27 } 28 //调用这个函数 29 // foo(...arr);// fn(1,2,3,4) ,解包 30 31 32 //2. 对对象进行展开 spread 33 let skillOne = { 34 q: "天音波" 35 }; 36 37 let skillTwo = { 38 w: "金钟罩" 39 }; 40 41 let skillThree = { 42 e: "天雷破" 43 }; 44 45 let skillFour = { 46 r: "猛龙摆尾" 47 }; 48 49 const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour}; 50 //相当于 const mangseng = {q: "天音波", w: "金钟罩",e: "天雷破" , r: "猛龙摆尾"}; 51 52 console.log(mangseng); 53 54 55 //2. reset参数位置不一样，类型也不一样 56 function fn2(...arg){ //转换成数组 57 conso.log(arg) //[1,2,3,4] 58 } 59 fn2(1,2,3,4); 60 61 62 let arr = [1,2,3,4]; 63 function fn(){ 64 65 } 66 fn(...arr);// fn(1,2,3,4) //转换成序列 67 </script> 68 </body> 69 </html>
6.数组转换为 参数序列 的应用
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>扩展运算符应用</title> 7 </head> 8 <body> 9 <script> 10 //1. 数组的合并 11 // const kuaizi = ['肖央','王太利']; //情圣 12 // const fenghuang = ['曾毅','玲花']; 13 // const zuiXuanXiaoPingGuo = [...kuaizi, ...fenghuang]; 14 // console.log(zuiXuanXiaoPingGuo) 15 16 //2. 新数组克隆 17 // let arr = ['易烊千玺','王俊凯','王源']; 18 // let newArr = [...arr]; 19 // newArr[0] = '康辉'; 20 // newArr[1] = '朱广权'; 21 // newArr[2] = '尼格买提'; 22 // console.log(arr); 23 // console.log(newArr); 24 25 //3. 将伪数组转为真正的数组 26 // function max(){ 27 // // document.querySelectorAll 伪数组 28 // const args = [...arguments]; 29 // console.log(args); 30 // } 31 // max(1,2,3,4,5,6); 32 </script> 33 </body> 34 </html>