Day02-ES6

最新推荐文章于 2024-11-16 01:29:21 发布

前端拓海

最新推荐文章于 2024-11-16 01:29:21 发布

阅读量220

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/Spirs/article/details/135228673

版权

一.proxy代理

<!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 = {
            name: "xiaohao",
            age: 18
        }

        let handler = {
            get: function (target, key) {
                console.log(key);

                // console.log("无权访问" + key);

                return target[key];
            },

            set: function (target, key, value) {
                console.log("设置" + key + "成功");
                target[key] = value;
            }
        }

        // 实例化代理
        var proxy = new Proxy(obj, handler);
        console.log(obj);

        console.log(proxy);
        console.log(proxy.name);        // proxy.get

        proxy.gender = "男";            // proxy.set
        console.log(proxy);

    </script>

</body>

</html>

二.reflect反射

<!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 = {
            name: "xiaohao",
            age: 18,
            get fun() {
                return this.name;
            }
        }

        // Reflect 反射
        // get 
        console.log(Reflect.get(obj, "name"));

        var newObj = {
            name: "xiaogu",
            age: 20
        }

        console.log(Reflect.get(obj, "fun", newObj));

        Reflect.set(obj, "gender", "男");
        console.log(obj);

    </script>

</body>

</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 obj = {
            name: "xiaohao",
            age: 18
        }

        let handler = {
            get: function (target, key) {
                // ...操作

                return Reflect.get(target, key);
            },
            set: function (target, key, value) {
                return Reflect.set(target, key, value);
            }
        }

        // 实例化代理对象
        let proxy = new Proxy(obj, handler);
        console.log(proxy.name);

        proxy.gender = "男";
        console.log(proxy);

    </script>

</body>

</html>

四.ES6字符串

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

    <div></div>

    <script>

        let str = "hello";

        // 重复
        console.log(str.repeat(3));

        // 补全
        console.log(str.padStart(10, "o"));

        // 模板字符串
        document.querySelector("div").innerHTML = `<h1>hello</h1>`;

    </script>

</body>

</html>

五.ES6数值

<!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 num = 10;

        // 二进制
        let num1 = 0b1001;
        console.log(num1);

        // 八进制
        let num2 = 0o1001;
        console.log(num2);

        // 十六进制
        let num3 = 0x1001;
        console.log(num3);

        // 幂运算
        console.log(num ** 3);

        // parseInt()方法补充
        console.log(parseInt("10"));
        console.log(parseInt("10", 8));

        let arr = ["1", "2", "3"];
        console.log(arr.map(parseInt));
        parseInt("1", 0);       // 1
        parseInt("2", 1);       // NaN
        parseInt("3", 2);       // NaN

    </script>

</body>

</html>

六.ES6对象

<!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 name = "zhangsan";
        let age = 18;
        function sayHi() {
            console.log("hello");
        }

        // 对象的简写形式
        var obj = {
            name,
            age,
            sayHi
        }

        let obj2 = {
            gender: "男"
        }

        console.log(obj);
        obj.sayHi();

        // 扩展运算符
        // 扩展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
        let newObj = { ...obj, ...obj2 };        // 浅拷贝
        console.log(newObj);

    </script>

</body>

</html>

七.ES6数组

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

        // Array.of() 创建数组

        console.log(Array.of(1, 2, 3, 4, 5, 6, 7));

        var map = new Map();
        map.set("name", "xiaohao");
        map.set("age", "18");

        console.log(Array.from(map));

        // arr.flat()  抚平数组
        let arr = [1, 2, 3, [4, [5, 6, [7, 8, 9]]]];
        console.log(arr);
        console.log(arr.flat(1));
        console.log(arr.flat(2));
        console.log(arr.flat(3));

        // 扩展运算符
        let arr2 = [1, 2, 3, 4, 5];
        let arr3 = [...arr2];
        console.log(arr3);

    </script>

</body>

</html>