Zephon Blog
0%

第九天

发表于 更新于 分类于
本文字数： 6.5k 阅读时长 ≈ 6 分钟

第九天

闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>closure 闭包</title>
</head>
<body>
    <script>
        //闭包是定义在函数内部的函数。通常，函数内定义的函数为返回值
        function a(){
            var n=0;
            console.log("执行了a");
            return function(){console.log(n);return ++n;}
        }
        var b = a();//执行了a()，但没有执行闭包函数，b是闭包函数的别名
        console.log("b()"+b());
        console.log(a()());//和b()不同，这种调用方式将执行a函数的内部的内容
    </script>
</body>
</html>

通过闭包实现点击ul中的li显示是第几个li

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>closure</title>
    <style>
        .clist>li {
            list-style: none;
            width: 160px;
            height: 34px;
            background-color: #c00;
            margin: 8px;
            text-align: center;
            line-height: 34px;
            color: #fff;
        }
    </style>
</head>

<body>
    <ul class="clist">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var li = document.querySelectorAll(".clist li");
        //1
        for (var i = 0; i < li.length; i++) {
            li[i].onclick = (function (i) {
                return function () {
                    // alert(i+1);
                    li[i].innerText = i + 1;
                }
            })(i);
        }
        //2
        for(var i=0;i<li.length;i++){
            var b = a(i);
            li[i].onclick=b;//b即闭包函数，点击第i个li时调用a(i)
            function a(i){
                return function(){
                    li[i].innerText = i+1;
                }
            }
        }
        //3
        for(let i=0;i<li.length;i++){
            li[i].onclick = function(){
                li[i].innerText = i+1;//在事件响应函数内部使用了i
            }
        }
    </script>
</body>

</html>

es6 新增let consot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6 新增</title>
</head>

<body>
    <script>
        {
            let a = 1; //块作用域
            const N = 100; //常量
            a = 2;
            // N=101;
            console.log(a);
            console.log(N);
        }
        // console.log(a);

        //异步操作：settimeout和ajax；
        for (var i = 0; i < 5; i++) {
            setTimeout(function (i) {
                console.log(i)
            }(i),10);
        }

        // let在做循环时，和var不同，let是为每次循环单独维持一个值
    </script>
</body>

</html>

es6解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6 解构赋值</title>
</head>
<body>
    <script>
        //解构赋值
        let [a,b,c]=["xiao","ming"];
        console.log(a,b,c);
        //a="xiao" b="ming" c=undefined
        let {id:d,height:e}={id:1123,height:180};
        console.log(d,e);
        //d=1123 e=180
        //d,e交换
        [d,e]=[e,d];
        function fun([x,y]){
            return [x+y,x*y];
        }
        console.log(fun([2,3])[0]);

        let {name:xingming}={name:"zephon",age:18};
        console.log(xingming);
        //name=undefined，xingming=zephon
        //xingming是name在代码中的变量名称，只能在代码中使用xingming，其值为name对应的值

    </script>
</body>
</html>

es6 箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6 箭头函数</title>
</head>

<body>
    <script>
        var f = () => 5; //相当于 var f=function(){return 5};
        console.log(f()); //5

        var f2 = v => v * v; //相当于 var f2 = function(v){return v*v}
        console.log(f2(5)); //25
        var f3 = (v1, v2) => {
            return v1 + v2 * v2
        };
        console.log(f3(3, 4)); //19
        
        class foo {
            f1() {
                setTimeout(function () {
                    // this表示window
                    console.log(this);
                }, 1000);
                setTimeout(() => {
                    // this表示对象的实例
                    console.log(this);
                }, 1000);
            }
        }
        var o = new foo();
        o.f1();
    </script>
</body>

</html>

es6深入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6</title>
</head>
<body>
    <script>
        //数组扩展
        var arr = Array.of(1,2,3,4,5);
        console.log(arr);
        let arr2 = [...arr];//复制一个数组
        // arr2=arr;//只是得到arr的一个别名
        console.log(arr2);

        //求n个数的和
        let f = (...rest)=>{//任意参数
            let sum=0;
            rest.forEach(v => {
                sum+=v;
            });
            return sum.toFixed(3);//取3位小数
        }
        console.log(f(0.001,0.022));

        let foo = "zephon";
        var s1=Symbol();//变量提升，变量的声明会自动的放到程序的开始，不包括赋值
        let o ={
            arr,//属性名叫arr，值是arr的值
            [foo]:"a good guy!",//动态属性名
            [s1]:"this is a symbor"
        }
        console.log(o.arr,o["arr"]);
        console.log(o.zephon,o[foo],o["zephon"]);

        console.log(o[s1]);

        // 第七种数据类型symbol，独一无二的值 
        var s2 = Symbol();//不知道具体值，由系统维护
        console.log(typeof s2);
        //生成相同的symbol
        var s3 = Symbol.for("a");
        var s4 = Symbol.for("a");
        console.log(s3==s4);
        // 动态字符串
        let str = `'${arr}变量${foo}======
        destroyed(){    
            ddd
            },`;
        console.log(str);

        // Set
        var arr = Array.of(1,3,4,6,2,3,6,1);
        var set = new Set(arr);
        console.log(set);
        set.add(10);
        set.add(6);
        console.log(set.size);
        console.log(set.has(10));
        console.log([...new Set(arr)].length);//数组去重
        //Map
        let map = new Map();
        let m1 = "zephon";
        let m2 = "zephon";
        let m3 = [1];
        let m4 = [1];
        map.set(m1,"blue");
        map.set(m2,"green");
        console.log(map.get(m1));//green

        map.set(m3,"red");
        map.set(m4,"pink");
        console.log(map.get(m3));//red
        console.log(map.has(m4));//true
        console.log(map.has([1]));//false
    </script>
</body>
</html>