年轻人,你搞定对象了吗? -cyy

时间:2020-11-19 22:33:00 来源:互联网 热度: 作者: 佚名 字体:

函数编程与面向对象实例对比:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // 函数编程
        let name = 'cyy';
        let scores = [
            { name: 'html', score: 90 },
            { name: 'css', score: 77 },
            { name: 'js', score: 57 },
        ];
        function average(scores, name) {
            let total = scores.reduce((t, i) => t + i.score, 0);
            let res = Math.round(total / scores.length);
            return `${name}的平均成绩是${res}`;
        }
        console.log(average(scores, name));

        // 面向对象编程
        let user = {
            name: 'cyy',
            scores: [
                { name: 'html', score: 90 },
                { name: 'css', score: 77 },
                { name: 'js', score: 57 },
            ],
            average() {
                let total = this.scores.reduce((t, i) => t + i.score, 0);
                let res = Math.round(total / this.scores.length);
                return `${this.name}的平均成绩是${res}`;
            }

        }
        console.log(user.average());
    </script>
</body>

</html>

 

属性的基本操作方法:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        let user = {
            name: 'cyy',
            'pass word': 111
        }
        console.log(user.name);
        console.log(user['name']);
        // console.log(user.pass word);
        console.log(user['pass word']); // 不规则的命名要用方括号

        for (const k in user) {
            console.log(user.k);
            console.log(user[k]); // 变量要用方括号
        }

        // 动态添加属性和方法
        user.age = 19;
        user.show = function () {
            return `${this.age}`;
        }
        console.log(user.show())
    </script>
</body>

</html>

 

对象的引用传址:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // 传址
        // let user = {}
        // let user2 = user;
        // user2.name = 'cyy';
        // console.log(user, user2);

        // 传值
        function show(a) {
            a += 100;
            console.log(a);
        }
        let a = 1;
        show(a); // 函数的环境会在函数执行结束后被销毁
        console.log(a);

        // 传址
        function show2(obj) {
            obj.name = 'cyy';
            console.log(obj);
        }
        let obj = {};
        show2(obj); // 函数的环境会在函数执行结束后被销毁
        console.log(obj);
    </script>
</body>

</html>

 

使用展开语法完成参数合并:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // let arr = [1, 2, 3];
        // let arr2 = [...arr, 4, 5];
        // console.log(arr2);


        // let user = {
        //     name: 'cyy',
        //     age: 18
        // };
        // let user2 = { ...user, lang: 'ch' };
        // console.log(user2);



        function upload(params) {
            let config = {
                type: '*.jpeg,*.png',
                size: 10000
            };
            config = { ...config, ...params }; // 对象中存在同名属性,后面的会覆盖前面的
            return config;
        }
        console.log(upload({ type: '*.gif' }));



    </script>
</body>

</html>

 

解构赋值新增特性:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // let user = { name: 'cyy', age: 18 };
        // let { name: a, age: b } = user;
        // console.log(a, b);


        // let user = { name: 'cyy', age: 18 };
        // let { name: name, age: age } = user;
        // console.log(name, age);


        // let user = { name: 'cyy', age: 18 };
        // let { name, age } = user;
        // console.log(name, age);


        // 函数的返回值也可以进行解构赋值
        // function func() {
        //     return { name: 'cyy', age: 18 };
        // }
        // let { name, age } = func();
        // console.log(name, age);


        // function user({ name, age }) {
        //     console.log(name, age);
        // }
        // user({ name: 'cyy', age: 18 });


        // let { random } = Math;
        // console.log(random());


        let user = { name: 'cyy', age: 18 };
        let { name } = user;
        console.log(name); // 不一定要获取全部,获取一个也是可以的

    </script>
</body>

</html>

 

严格模式中解构的差异:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // let user = { name: 'cyy', age: 18 };
        // let { name, age } = user;
        // console.log(name, age);


        // let user = { name: 'cyy', age: 18 };
        // ({ name, age } = user);
        // console.log(name, age);


        'use strict';
        let user = { name: 'cyy', age: 18 };
        ({ name, age } = user);
        console.log(name, age);
    </script>
</body>

</html>

 

解构操作的简写形式与变量解构:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // let user = { name: 'cyy', age: 18 };
        // let { name, age } = user;
        // console.log(name, age);


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


        // let arr = [1, 2, 3];
        // let [, , c] = arr;
        // console.log(c);


        // let user = { name: 'cyy', age: 18 };
        // let { age } = user;
        // console.log(age);


        // let name = 'cyy', age = 18;
        // let obj = { name: name, age: age };
        // console.log(obj);


// 属性和值同名时,可以省略
        let name = 'cyy', age = 18;
        let obj = { name, age };
        console.log(obj);


    </script>
</body>

</html>

 

多层对象的解构操作:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        let user = {
            name: 'cyy',
            grade: {
                title: 'title1',
                score: 199
            }
        };
        let { name, grade: { title, score } } = user;
        console.log(name, title, score);


    </script>
</body>

</html>

 

解构默认值实现配置项合并:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // let arr = [1, 2, 3];
        // let [a, b, c, d = 'aaa'] = arr;
        // console.log(a, b, c, d);


        // let user = {
        //     name: 'cyy',
        //     age: 18
        // };
        // let { name, title = 'html' } = user;
        // console.log(name, title);


        // 参数的合并
        function createEle(options) {
            let { width = 100, height = 100, backgroundColor = 'lightblue' } = options;
            let div = document.createElement('div');
            div.style.width = width + 'px';
            div.style.height = height + 'px';
            div.style.backgroundColor = backgroundColor;
            document.body.append(div);
        }
        createEle({ width: 200, bgcolor: 'pink' });
    </script>
</body>

</html>

 

 

函数参数的解构特性及使用技巧:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        button {
            position: absolute;
        }
    </style>
</head>

<body>
    <script>

        // function func([a, b]) {
        //     console.log(a, b);
        // }
        // func([111, 222]);


        // function func({ name, age }) {
        //     console.log(name, age);
        // }
        // func({ name: 'cyy', age: 18 });


        // 部分解构
        function func(name, { sex, age }) {
            console.log(name, age, sex);
        }
        func('cyy', { sex: 'girl', age: 18 });
    </script>
</body>

</html>

 

对象属性的添加删除操作:

        // 属性的添加
        let obj = {};
        obj.name = 'cyy';
        obj['age'] = 18;
        console.log(obj);
        // 属性的删除
        delete obj.name;
        console.log(obj);
        // 检测对象是否含有属性
        console.log(obj.hasOwnProperty('name'));
        console.log(obj.hasOwnProperty('age'));

 

对象与原型链属性检测实例:

 

    <script>
        // hasOwnProperty只查找自身的属性,不会去查找原型上的属性
        // let arr = [1, 2, 3];
        // console.log(arr.hasOwnProperty('length'));
        // console.log(arr.hasOwnProperty('concat'));


        // let arr = [1, 2, 3];
        // console.log('length' in arr);
        // console.log('concat' in arr);


        // 把obj1的原型指向obj2
        // let obj1 = {
        //     name: 'cyy'
        // };
        // let obj2 = {
        //     age: 18
        // }
        // Object.setPrototypeOf(obj1, obj2);
        // console.log(obj1);
        // console.log(obj1.hasOwnProperty('age'));
        // console.log('age' in obj1);


        function oss(options) {
            if (!options.hasOwnProperty('host')) {
                throw new Error('必须设置主机地址');
            }
        }
        oss({ name: 'admin' });
    </script>

 

计算属性与assign使用: