Day01-ES6 - 技术栈

一.ES6新增语法-let

html 复制代码

<!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>

        // 声明变量
        console.log(num);       // undefined
        var num = 10;

        // let 声明的变量不存在变量提升
        // console.log(num2);      // Cannot access 'num2' before initialization
        // let num2 = 20;

        // 块级作用域
        if (true) {
            // var num3 = 30;
            let num4 = 40;
        }
        // console.log(num3);
        // console.log(num4);         // num4 is not defined


        // 暂时性死区
        if (true) {
            // console.log(num5);      // Cannot access 'num2' before initialization
            let num5 = 50;
        }
        // num5 = 100;

        // 案例
        // function fun(num) {
        //     console.log(num);
        // }
        for (let i = 0; i < 5; i++) {
            // console.log(i);     // 0 1 2 3 4
            setTimeout(function () {
                console.log(i);     // 0 1 2 3 4
            }, 0)
        }

    // - let关键字就是用来声明变量的
    // - 使用let关键字声明的变量具有块级作用域
    // - 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
    // - 防止循环变量变成全局变量
    // - 使用let关键字声明的变量没有变量提升
    // - 使用let关键字声明的变量具有暂时性死区特性

    </script>

</body>

</html>

二.ES6新增语法-const

html 复制代码

<!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>

        // const 声明常量 不能变化的量
        const num = 10;
        // num = 20;       // Assignment to constant variable.
        console.log(num);

        // 声明常量的同时进行赋值
        // const num2;
        // num2 = 20;

        // - const声明的是一个常量
        // - 既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
        // - 声明 const时候必须要给定值

        const obj = {
            name: "zhangsan",
            age: 18
        }

        // 如果是复杂数据类型，不能更改地址值
        // obj = {}        // Assignment to constant variable.

        obj.name = "lisi";
        console.log(obj);

        // - 使用 var 声明的变量，其作用域为全局作用域或者为所在的函数内局部作用域，且存在变量提升现象
        // - 使用 let 声明的变量，其作用域为该语句所在的代码块内{}，不存在变量提升
        // - 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

    </script>

</body>

</html>

三.经典案例

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab {
            width: 1000px;
            height: 30px;
            display: flex;
            position: relative;
            margin: 0 auto;
        }

        .nav {
            box-sizing: border-box;
            border: 1px solid #ccc;
            flex: 1;
            text-align: center;
            line-height: 30px;
        }

        .content {
            width: 1000px;
            height: 300px;
            position: absolute;
            top: 30px;
            left: 0;
            border: 1px solid #ccc;
            box-sizing: border-box;
            display: none;
        }

        .active {
            display: block;
        }

        .navact {
            background-color: pink;
        }
    </style>
</head>

<body>

    <div class="tab">
        <div class="nav navact">1</div>
        <div class="nav">2</div>
        <div class="nav">3</div>
        <div class="nav">4</div>
        <div class="nav">5</div>
        <div class="content active">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
    </div>

    <script>

        var nav = document.querySelectorAll(".nav");
        var content = document.querySelectorAll(".content");

        function sibling(ele, clazz) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = clazz;
            }
        }

        for (let i = 0; i < nav.length; i++) {
            // nav[i].index = i;
            nav[i].onclick = function () {
                sibling(nav, "nav");
                this.className = "nav navact"
                sibling(content, "content");
                content[i].className = "content active";
            }
        }

    </script>

</body>

</html>

四.解构赋值

html 复制代码

<!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>

        // [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]

        // var a = 1, b = 2, c = 3;

        // {
        //     // 解构的目标   解构的源
        //     let [a, , c] = [1, , 3];
        //     console.log(a);
        //     // console.log(b);
        //     console.log(c);
        // }

        // {
        //     let [a, [[b], c]] = [1, [[2], 3]];
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }

        // // 剩余运算符
        // {
        //     let [a, ...b] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        //     console.log(a);
        //     console.log(b);
        // }

        // // 字符串型
        // {
        //     let [a,b,c,d,e] = "hello";
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        //     console.log(d);
        //     console.log(e);
        // }


        // 对象的解构
        {
            let { a, b } = { a: "aaa", b: "bbb" }
            console.log(a);
            console.log(b);
        }

        {
            let { a, ...b } = { a: "aaa", b: "bbb", c: "ccc", d: "ddd" }
            console.log(a);
            console.log(b);
        }

        // - 解构赋值就是把数据结构分解，然后给变量进行赋值
        // - 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
        // - 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
        // - 利用解构赋值能够让我们方便的去取对象中的属性跟方法

    </script>

</body>

</html>

五.symbol

html 复制代码

<!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>

        // Symbol

        let str = Symbol("唯一");
        console.log(str);
        console.log(typeof str);

        let str2 = Symbol("唯一");
        console.log(str2);

        console.log(str === str2);      // false

    </script>

</body>

</html>

六.Map

html 复制代码

<!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>

        // - 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
        // - Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
        // - Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
        // - Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

        let map = new Map();
        // 键是字符串
        map.set("name","zhangsan");
        console.log(map.get("name"));

        // 键是对象
        let obj = {};
        map.set(obj,"键是对象");
        console.log(map.get(obj));
        
        // 键是函数
        let fun = function(){};
        map.set(fun,"键是函数");
        console.log(map.get(fun));
        console.log(map);
        
        console.log(map.size);

    </script>

</body>
</html>

七.遍历对象

html 复制代码

<!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>

        var obj = {
            name: "张三",
            age: 18
        }

        for (var key in obj) {
            console.log(key);
        }

        let map = new Map();
        map.set("name", "xiaohao");
        map.set("age", 20);
        map.set("gender", "男");

        // forEach遍历 Map 对象
        map.forEach(function (v, i) {
            console.log(v);
            console.log(i);
        })

        // for...of... 遍历对象
        for (var key of map) {
            console.log(key);
        }

        for(let [key,value] of map){
            console.log(key,value);
        }

        // obj.forEach(function(v,i){
        //     console.log(v);
        //     console.log(i);
        // })
        // obj.forEach is not a function

        // obj is not iterable
        // for (var key of obj) {
        //     console.log(key);
        // }

        console.log(Object.keys(obj));
        for(let key of Object.keys(obj)){
            console.log(key);
        }

        let res = Object.entries(obj);
        console.log(res);

    </script>

</body>

</html>

八.Set

html 复制代码

<!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 arr = new Set([1, 2, 3, 4, 5, 6, 6, 2, 3, 4, 5, 6, 7]);
        console.log(arr);

        // 数组去重
        let arr2 = [10, 11, 11, 15, 13, 15, 25, 22, 22, 69, 10];

        let newArr = new Set(arr2);
        console.log([...newArr]);

    </script>

</body>

</html>