es6(二)

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>

 

posted @ 2020-06-06 19:17  全情海洋  阅读(172)  评论(0编辑  收藏  举报