JavaScript Object操作

JavaScript Object操作

在我们进行属性的操作的话，我们是可以进行的是我们的添加属性操作符的

即是说可以对我们的属性添加一些限制，就是来决定我们的属性是否可写，可删除，可配置的一些限制性的操作

JavaScript 给单一属性添加精准的描述

这个时候，我们是可以直接通过添加一些内置的操作来实现的

使用方法 Object.definePerperty 来实现我们的对属性进行一些操作的实现，这个就是属性描述符

一般的话，我们实现的对单一属性进行的描述的话就是通过的是我们的：

• 一个属性是否可删除的描述
• 一个属性是否可写入的描述，或者说是只能进行读取的
• 一个属性进行读取的时候，是只能获取某个值还是？？？
• 一个属性在进行遍历的时候是否可出现

进行对单一属性的描述的话就是使用的是我们的一个方法**Object.defineProperty(obj, prop, descriptor)**

• obj 就是我们需要进行对哪一个对象进行的属性操作
• prop 就是实现的是我们的对那一个对象的属性进行这些配置
• descriptor 就是需要对这个属性进行的一些属性的描述设置
• 返回值是我们的配置的描述信息

通过这个函数是具有一个返回值的

• 就是我们进行传递给函数的对象中的属性

属性描述符的分类

• 数据属性（Data Properties）描述符（Descriptor）
• 存取属性（Accessor Properties）描述符（Descriptor）

	configurable	enumrable	value	writable	get	set
数据属性描述符	可以	可以	可以	可以	不可以	不可以
存储属性描述符	可以	可以	不可以	不可以	不可以	不可以

数据属性描述符

数据属性描述符

• configurable 表示的是属性是否可删除，是否可以进行修改他的特性，或者说是否可以将他进行存储为属性描述符

  • 当我们进行直接在一个对象中设置一个属性的时候，那么这个时候默认的为 true
  • 当我们通过属性描述符在一个对象中进行定义一个属性的时候，默认的为 false

• enumerable 表示的是我们的属性是否可以通过 for in 进行遍历 或者说 Object.keys() 实现获取得到其键的值

  • 当在一个对象上面定义的属性的时候，这个配置信息为 true
  • 当通过属性描述符进行定义的时候，默认值为 false

• writable 配置的是进行我们的属性是否是可写的

  • 在对象中直接进行定义的话那就是为 true 可写的
  • 通过属性描述符的配置进行定义的话，默认的值就是 false ，说明的是这个属性只是只读的，不可写

• value 就是实现的是设置我们的通过 . 操作符实现获取我们的一个对象的属性值的时候，默认获取得到的是 value 指定的内容

var obj = {
    name: "76433",
    age: 18
}
​
​
// 默认的是我们的是可以对一个属性进行删除操作的
console.log(Object.keys(obj))  // [ 'name', 'age' ]
delete obj.name
console.log(obj)  // { age: 18 }
console.log(Object.keys(obj))  // [ 'age' ]
​
​
obj.name = "76433"
// 但是通过属性描述符就可以实现设置我们的属性不被删除
Object.defineProperty(obj, "name", {
    configurable: false,  // 告诉 JS 引擎，我们的 name 属性不可删除
    enumerable: false,
    writable: true,
    value: "juwenzhang"
})
// 只有上面的设置 enumerable 为 true 的时候，才可以进行获取得到，不行
console.log(Object.keys(obj))  // [ 'age' ]
delete obj.name
console.log(obj.name)  // juwenzhang
console.log(obj)  // { age: 18 }
console.log(Object.keys(obj))  // [ 'age' ]
// 通过上面的属性操作，就不会实现我们的属性不被删除了

存取属性描述符

存取属性描述符

• 用于我们 vue2 的响应式的源码的实现的基础，就是通过的是我们的这两个属性来实现的 vue2 的响应式源码了

  • set 方法 就是实现的是我们的监听对元素的属性值进行重新设置的存取属性描述符
  • get 方法 就是实现的是对我们的获取数据的时候的属性描述符的设置，内部应该含有一个返回值的

const obj = {
    name: "juwenzhang",
    age: 18
};
​
let _name = "";
Object.defineProperty(obj, "name", {
    // 数据属性描述符的配置
    configurable: true,
    enumerable: true,
​
    // 存储属性描述符的配置
​
    // 实现的是监听我们的设置的过程
    set: function(value) {
        console.log(value)
        _name = value
    },
​
    // 实现的设置我们的获取内容数据的过程
    get: function() {
        console.log(_name)
        return _name
    }
})
​
obj.name = "76433"
console.log(obj.name)

拓展： 我们是可以实现的是对我们的多个属性进行添加属性描述符的设置

Object.defineProperties(obj, propObjs, descriptor)

const obj = {
    name: "juwenzhang",
    age: 18
}
​
Object.defineProperties(obj,{
    name: {
        get: function () {},
        set: function (value) {},
        configurable: true
    },
​
    age: {
        get: function () {}，
        set: function (value) {},
        configurable: true
    }
})

Object.getOwnPropertyDescriptor(obj, prop) 实现的是我们的对象中某一个属性的默认的属性描述符的信息

console.log(Object.getOwnPropertyDescriptor(obj, "name"))
​
console.log(Object.getOwnPropertyDescriptors(obj))

Object.preventExtensions(obj) 阻止一个对象在定义后的添加其他元素

const obj = {
    name: "76433",
    age: 18
}
​
obj.height = "165"
console.log(obj)  // {name: '76433', age: 18, height: '165'}
​
​
Object.preventExtensions(obj);  // 实现的阻止对象扩展其他的属性的设置
obj.weight = "55kg"
console.log(obj);  // {name: '76433', age: 18, height: '165'}

Objerct.seal(obj) 密封对象，不允许配置和删除对象： preventExtensions + configurable: false

Object.freeze(obj) 冻结对象，不允许修改现有属性： seal + writable: false