前端Object的基础使用

Object.assign()

通过复制一个或多个对象来创建一个新的对象。旧对象+旧对象+…=新对象

console.log('学习让人进步', Object.assign({name:'zhangsan'},{age:18}))

Object.create()

使用指定的原型对象和属性创建一个新对象。旧对象+新属性=新对象

这个是把属性挂到原型上，不能枚举出来的。

console.log('学习让人进步', Object.create({ age: 18 }))

Object.defineProperty()

给对象添加一个属性并指定该属性的配置。多用于配置 get，set

    const obj1 = {}

    // 向对象obj1中添加一个属性a，并设置数据描述符的示例
    Object.defineProperty(obj1, "a", {
      value: '我是属性value',
      writable: true,
      enumerable: true,
      configurable: true
    })

    // 对象obj1有了属性a，其值为1
    console.log(obj1.a) // 输出: 1，表示属性a的【value: 1】默认值已生效

const obj1 = {};

    // 向对象中添加一个属性b，并设置存取描述符的示例
    var bValue;
    Object.defineProperty(obj1, "b", {
      get: function () {
        return bValue;
      },
      set: function (newValue) {
        bValue = newValue;
      },
      enumerable: true,
      configurable: true
    });

    obj1.b = 2;

    // 对象obj1有了属性b，其值为2
    console.log(obj1.b); // 输出: 2，表示属性b的getter和setter均生效

Object.freeze()

冻结对象：其他代码不能删除或更改任何属性

Object.seal() 

防止其他代码删除对象的属性。

Object.entries() 

返回给定对象自身可枚举属性的 [key, value] 数组

const sss = { name: 'zhangsan', age: 14 }
    let aaa = Object.entries(sss)
    console.log('学习让人进步', sss, aaa)

 Object.keys()

返回一个包含所有给定对象自身可枚举属性名称的数组。

const sss = { name: 'zhangsan', age: 14 }
    console.log('学习让人进步', Object.keys(sss))

这个方法使用还是非常频繁，经常对于后端返回的数据进行空值判断，进而进行页面的渲染

if (Object.keys(this.barData).length === 0) {
        option = {}
      } 

 Object.values()

返回给定对象自身可枚举值的数组。

const sss = { name: 'zhangsan', age: 14 }
    console.log('学习让人进步', Object.values(sss))

 练习题

写出来一个name：张三，age：14岁，职业：上学，身份证号：123（不可以枚举），当更改年龄时候自动加上岁字，名字不可以更改，打印这个对象的可枚举属性。

const obj = Object.assign({ job: '上学' })
    var bValue
    Object.defineProperty(obj, 'code', {
      // get: function() {
      //   return bValue
      // },
      // set: function(newValue) {
      //   bValue = newValue
      // },
      value: '123',
      enumerable: false,
      configurable: true,
      writable: false
    })
    Object.defineProperty(obj, 'name', {
      // get: function() {
      //   return bValue
      // },
      // set: function(newValue) {
      //   bValue = newValue
      // },
      value: '张三',
      enumerable: true,
      configurable: true,
      writable: false
    })
    Object.defineProperty(obj, 'age', {
      get: function() {
        return bValue
      },
      set: function(newValue) {
        bValue = newValue + '岁'
      },
      enumerable: true,
      configurable: true
    })
    obj.age = 18
    console.log('学习让人进步', obj, Object.keys(obj), Object.values(obj))

对象属性

writable	是否可写，当未false,you cant cange the value
enumerable	是否可被循环到，当false,你不能循环到这个属性
configurable	是否可被外部添加或者修改删除
get()	获取属性（跟vue2联系到一起）
set()	设置属性（跟vue2联系到一起）