Object构造函数的方法学习笔记

156 阅读3分钟

今天也有很努力的在赚猫粮钱

如若文章存在错误或不足,望理解并帮我指出,感激不尽


Object.assign()通过复制一个或多个对象来创建一个新的对象。如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。

Object.assign(target, ...sources)

target 目标对象;sources 源对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

在接口返回数据完全需要的时候可以通过复制将返回值复制到对象里。是比较好到简写代码的方法。

getConfigInfo () {
  getConfigInfo().then(res => {
    this.formSessionFile = Object.assign({}, res)
  })
},

可用于合并对象, 注意目标对象自身也会改变

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变

合并具有相同属性的对象,属性被后续参数中具有相同属性的其他对象覆盖

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

继承属性和不可枚举属性不能被拷贝

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是(可枚举)属性值。假如源值是一个对象的引用,它仅仅会复制其引用值。

在不使用第三方库的情况下,我们想要深拷贝一个对象,用的最多的就是下面这个方法。

JSON.parse(JSON.stringify());

Object.create() 使用指定的原型对象和属性创建一个新对象。

Object.defineProperty() 给对象添加一个属性并指定该属性的配置。

Object.defineProperties() 给对象添加多个属性并分别指定它们的配置。

Object.entries() 返回给定对象自身可枚举属性的 [key, value] 数组。

Object.freeze() 冻结对象:其他代码不能删除或更改任何属性。

Object.getOwnPropertyDescriptor() 返回对象指定的属性配置。

Object.getOwnPropertyNames() 返回一个数组,它包含了指定对象所有的可枚举或不可枚举的属性名。

Object.getOwnPropertySymbols() 返回一个数组,它包含了指定对象自身所有的符号属性。

Object.getPrototypeOf() 返回指定对象的原型对象。

Object.is() 比较两个值是否相同。所有 NaN 值都相等(这与==和===不同)。

Object.isExtensible() 判断对象是否可扩展。

Object.isFrozen() 判断对象是否已经冻结。

Object.isSealed() 判断对象是否已经密封。


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

Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

具体使用实例:

    let saveData = {} // 保存请求过的数据,请求过一次后,不在请求
    // 鼠标进入商品卡片
    const showGood = () => {
      // 如果在数据请求过一次的前提下,不在请求
      data.allowShow = true
      if (Object.keys(saveData).length === 0) {
        data.loading = ElLoading.service({
          target: `div[id="${props.goodData.spuId}"]`,
          text: '正在加载,请稍后...',
        })
        apiSpecMessage({
          spuId: props.goodData.spuId,
        }).then((res) => {
          data.loading.close()
          // 控制添加购物车控件的显示,必须是在鼠标在商品卡品内,且数据获取成功的情况下
          if (data.allowShow) {
            data.show = true
          }
          if (data.show) {
            saveData = res
            data.skus = res.skuList
            data.specArr = res.specArr
            data.units = res.unitItemPoJoList
            data.unit = res.unit
            data.specArr.forEach((item) => {
              if (item.name) {
                chose[item.name] = item.value[0]
              }
            })
            if (res.unitItemPoJoList[0].value) {
              chose.size = res.unitItemPoJoList[0].value
            }
            fillter()
          }
        })
      } else {
        fillter()
        data.show = true
      }
    }

Object.preventExtensions() 防止对象的任何扩展。

Object.seal() 防止其他代码删除对象的属性。

Object.setPrototypeOf() 设置对象的原型(即内部 [[Prototype]] 属性)。

Object.values() 返回给定对象自身可枚举值的数组。