JS-面向对象-操作对象的属性 / 检测对象的某个属性是否存在 / 遍历（枚举）对象的属性 / 属性的分类

操作对象的属性


<!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>Document</title>
</head>
<body>
    <script>
        
        var obj1 = {
            fullName: '谭文华'
        };

        // 为对象添加新属性
        obj1.age = 20;
        obj1['gender'] = '男';

        // 修改对象的已有属性的值
        obj1.fullName = '赵志刚';
        obj1['age'] = obj1.age + 1;

        // 删除对象的属性
        delete obj1.gender;
        delete obj1['age'];

        console.log(obj1)


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

检测对象的某个属性是否存在


<!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>Document</title>
</head>
<body>
    <script>
        
        var obj1 = {
            fullName: '谭文华'
        };

        // 为对象添加新属性
        obj1.age = 20;
        obj1['gender'] = '男';

        // 修改对象的已有属性的值
        obj1.fullName = '赵志刚';
        obj1['age'] = obj1.age + 1;

        // 删除对象的属性
        delete obj1.gender;
        delete obj1['age'];

        console.log(obj1)


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

遍历（枚举）对象的属性


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

<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>Document</title>
</head>

<body>
    <script>

        var obj1 = {
            firstName: '赵四',
            lastName: '尼古拉斯',
            get fullName() {
                return this.firstName + '.' + this.lastName;
            },
            set fullName(newFullName) {
                newFullName = newFullName.split('.');
                this.firstName = newFullName[0];
                this.lastName = newFullName[1];
            }
        };

        // 特性指的是对属性的描述符

        // 使用 Object.getOwnPropertyDescriptor() 方法获取单个属性的特性
        var descriptor1 = Object.getOwnPropertyDescriptor(obj1, 'firstName');

        // 数据属性 firstName 的特性：
        // configurable: true // 是否可以删除属性，以及使用可以改变属性的类型（例如，从数据属性变成访问器属性）
        // enumerable: true   // 是否可以枚举该属性
        // value: "赵四"      // 数据属性的值
        // writable: true     // 是否可以修改属性的值

        var descriptor2 = Object.getOwnPropertyDescriptor(obj1, 'fullName');

        // 访问器属性 fullName 的特性：
        // configurable: true            // 是否可以删除属性，以及使用可以改变属性的类型（例如，从数据属性变成访问器属性）
        // enumerable: true              // 是否可以枚举该属性
        // get: ƒ fullName()             // 具有 get 方法表示可以读取改属性的值
        // set: ƒ fullName(newFullName)  // 具有 set 方法表示可以修改该属性的值

        // 我们也可以使用 Object.getOwnPropertyDescriptors() 方法一次获取对象中所有属性的特性
        var descriptor3 = Object.getOwnPropertyDescriptors(obj1);

        console.log(descriptor3)
        // obj1 对象中所有属性的特性：
        // {
        //     firstName: {
        //         configurable: true
        //         enumerable: true
        //         value: "赵四"
        //         writable: true
        //     },
        //     lastName: {
        //         configurable: true
        //         enumerable: true
        //         value: "尼古拉斯"
        //         writable: true
        //     },
        //     fullName: {
        //         configurable: true
        //         enumerable: true
        //         get: ƒ fullName()
        //         set: ƒ fullName(newFullName)
        //     }
        // }

    </script>
</body>

</html>

属性的分类


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

<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>Document</title>
</head>

<body>
    <script>

        var obj1 = {
            firstName: '赵四',
            lastName: '尼古拉斯',
            get fullName() {
                return this.firstName + '.' + this.lastName;
            },
            set fullName(newFullName) {
                newFullName = newFullName.split('.');
                this.firstName = newFullName[0];
                this.lastName = newFullName[1];
            }
        };

        // 使用 Object.defineProperty() 修改已有属性的特性
        // Object.defineProperty(obj1, 'firstName', {
        //     configurable: false,
        //     enumerable: false,
        //     value: '刘能',
        //     writable: false
        // })

        // 使用 Object.defineProperty() 添加新属性，并指定新属性的特性
        Object.defineProperty(obj1, 'age', {
            configurable: false,
            enumerable: false,
            value: 20,
            writable: false
        })

        // 使用 Object.defineProperties() 一次添加或修改多个属性的特性
        Object.defineProperties(obj1, {
            firstName: {
                configurable: false,
                enumerable: false,
                value: "赵四",
                writable: false
            },
            lastName: {
                configurable: false,
                enumerable: false,
                value: "尼古拉斯",
                writable: false
            },
            fullName: {
                configurable: false,
                enumerable: false,
                get: function() {},
                set: function(newFullName) {}
            },
            gender: {
                configurable: false,
                enumerable: false,
                value: "男",
                writable: false
            }
        })


        // 不可删除
        // delete obj1.firstName

        // 不可枚举
        // for(var key in obj1) {
        //     console.log(key)
        // }

        // 不可修改
        // obj1.firstName = '宋小宝';
        
        console.log(obj1)
    </script>
</body>

</html>

来源：CSDN

作者：上头upup

链接：https://blog.csdn.net/qq_45802159/article/details/103246565

标签