js对象的基本操作与解构

对象的基本操作

            let hs = {
                name: "张三",
            };
            console.log(hs.name);
            // 给对象添加元素
            hs.sex = "男";
            console.log(hs);
            // 删除对象的元素
            delete hs.sex;
            console.log(hs);

对象的引用传址

            let hd = {
                name: "张三",
            };
            let user = hd;
            user.name = "lili";
            console.log(hd.name); // lili

引用类型的赋值, 传递的值地址, 而不是值.

点语法

            let user = {
                name: "li",
                age: 16,
            };
            // 使用点语法展开
            let hd = { ...user, sex: "男" };
            console.log(user);
            console.log(hd);

            // 展开语法
            function upload(params) {
                let config = {
                    type: "*.jpeg, *.png",
                    size: 9999,
                };
                // 使用展开语法

                config = { ...config, ...params };
                // 点语法的展开结构
                // config = {
                //     // 默认config的参数
                //     type: "*.jpeg, *.png",
                //     size: 9999,
                //     // 传递参数params的参数
                //     type: ".jpg",
                //     size: 99,
                // };
                console.log(config);
            }

            upload({ size: 99, type: ".jpg" });

解构赋值

            let hd = {
                name: "lili",
                age: 14,
            };
            
            // 解构赋值
            let { name, age } = hd;
		   // let { name, age } = { name: "lili", age: 14 };
            console.log(name, age);

多层的对象解构赋值

            // 多层次的对象解构赋值
            let hdr = {
                name: "join",
                lessons: {
                    title: "javascript",
                },
            };
            // 进行解构赋值
            let {
                name,
                lessons: { title },
            } = hdr;
            // lessons:{title} 等同如下语句:
            // let { title } = { title: "javascript" };
            console.log(name, title);

解构默认值

            // 解构默认值
            function createElement(options = {}) {
                // 设置默认值
                let {
                    width = 200,
                    height = 200,
                    backgroundColor = "pink",
                } = options;

                const div = document.createElement("div");
                div.style.width = width + "px";
                div.style.height = height + "px";
                div.style.backgroundColor = backgroundColor;

                document.body.appendChild(div);
            }
            createElement();

        // Object.assign()将两个对象内的数据合并
        let newObj = Object.assign({ a: 1 }, { b: 2 });
        console.log(newObj);

        function hd(params) {
            let options = {
                size: 199,
            };
            // 使用方法设置默认值
            options = Object.assign(options, params);
            console.log(options);
        }
        hd({ type: "png", size: 100 });

函数传参的解构特性

            // 函数参数的解构特性
            // 传递参数可以解构传入, 也可以正常传入参数
            function hd(name, { sex, age }) {
                console.log(name, sex, age);
            }

            hd("lili", { sex: 1, age: 39 });

            // 全部以解构传参
            function fn({ name, sex, age }) {
                console.log(name, sex, age);
            }

            fn({ name: "join", sex: 0, age: 18 });

hasOwnProperty() 方法

        let hd = {
            name: "lili",
            sex: 1,
            age: 1,
        };

        console.log(hd);
        // hasOwnProperty方法用来查看自己本身是否拥有某些属性
        console.log(hd.hasOwnProperty("name")); // true
        delete hd.age;
        console.log(hd.hasOwnProperty("age")); // false

        // 自己本身并没有valueOf这个方法, 原型链上有此方法
        console.log(hd.hasOwnProperty("valueOf")); // false

        // 查看原型链上是否有此方法
        console.log("valueOf" in hd); // true