【通俗易懂 系列1】JavaScript 对象 Object.keys() Object.defineProperty() 用法

目录

1. 简单一句话先解释：

1.1 Object.keys() 有什么作用？

1.2 Object.defineProperty() 有什么作用？

2. 详细介绍

2.1 Object.keys()

2.2 Object.defineProperty()

value 修改旧的属性值

value 增加新属性 设置值

writable 修改新增加的属性

enumerable 遍历对象属性

configurable 是否允许删除属性

3. 注意点

---

1. 简单一句话先解释：

1.1 Object.keys() 有什么作用？

遍历对象里面的属性，输出为数组。

1.2 Object.defineProperty() 有什么作用？

给对象，增加新属性、修改属性值，设置是否允许修改属性值，设置是否允许遍历属性，设置是否允许删除属性。

2. 详细介绍

2.1 Object.keys()

参数：一个对象。

返回值：数组。数组的值是对象的属性。

如下代码，arr输出是 ['id','pname','price','num'];

	    var obj = {
            id: 1,
            pname: '小米',
            price: 1999,
            num: 2000,
        };
        var arr = Object.keys(obj);
        console.log(arr);
        arr.forEach(function (value) {
            console.log(value);
        })

2.2 Object.defineProperty()

共有四个属性：

属性	作用	默认值
value	设置对象的属性值	undefined【如果value属性没写的话】
writable	是否可以修改	false
enumerable	属性 是否可以被遍历【枚举】	false
configurable	是否可以删除某个属性	false

以如下对象为例分解参数

        var obj = {
            num: 1,
            price: 1000
        };

value 修改旧的属性值

num,注意num属性是声明的时候添加的，直接修改没问题

        Object.defineProperty(obj, 'num', {
            value: 2,
        })
        console.log(obj); // 改：num:2

 value 增加新属性 设置值

        Object.defineProperty(obj, 'age', {
            value: 19,
        })
        console.log(obj); // 新增：age: 19

writable 修改新增加的属性

age---利用defineProperty添加的属性，默认的一个属性值 writable是false，所以不能修改。并且会报错

        Object.defineProperty(obj, 'age', {
            value: 20
        })

如下增加属性值writable为true就能够修改

        Object.defineProperty(obj, 'age', {
            value: 19,
            writable: true
        })
        Object.defineProperty(obj, 'age', {
            value: 20,
        });

enumerable 遍历对象属性

sex没有被遍历出来  上面的age也没有被遍历出来，因为enumerbale是false，就算不写，默认也是false 

        Object.defineProperty(obj, 'sex', {
            value: '男',
            enumerable: false
        });
        var arr = Object.keys(obj); // [num,price]

configurable 是否允许删除属性

        Object.defineProperty(obj, 'class', {
            value: '201',
            configurable: false
        });
        delete obj.class;
        console.log(obj); 
        // {num: 2, price: 1000, age: 20, sex: '男', class: '201'}
        // 删除失败 class属性仍旧存在 而且configurable默认值也是false

如果把上面的代码 configurable改为true，就能够成功删除

如果删除obj的num属性能够成功，因为num是一开始声明变量就定义好的。没有规定他是否可以删除或者修改

    delete obj.num;

3. 注意点

        Object.defineProperty(obj, 'class', {
            value: '201',
        });
        Object.defineProperty(obj, 'class', {
            value: '202'
        });
        console.log(obj);

针对class属性，定义过第一回，想要再定义第二回第三回，就会报错。===>意思是最好第一次defineProperty就把该设置的属性设置好，后面再写，不管写什么都会报错，不能reDefine

不仅仅是value属性，enumerable/writable/configurable都是这样。

听说这两个方法vue阶段会经常用，还没学到那个时候怎么实践，到时候继续补充更新。 

结尾：

学习id： 201903090124-46

现在是大三学生，学习到了vue阶段【vue框架真的好难好难呜呜】，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处