JS 可枚举性以及 ES6 新增 Object.assign() 方法的使用：

33_ws
848 阅读6分钟

每个对象都可以定义一个新的属性并设置属性描述符（descriptor）。

属性描述符一共有 6 个 ：

  • value：设置属性值，默认值为 undefined。
  • writable：设置属性值是否可写，默认值为 true。
  • enumerable：设置属性是否可枚举，即是否允许使用 for/in 语句或 Object.keys() 函数遍历访问，默认为 true。
  • configurable：设置是否可设置属性特性，默认为 true。如果为 false，将无法删除该属性，不能够修改属性值，也不能修改属性的属性描述符。
  • get：取值函数，默认为 undefined。
  • set：存值函数，默认为 undefined。

其中，enumerable即为可枚举性属性描述符。

设置可枚举性 ：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

参数：

  • obj

    要定义属性的对象。

  • prop

    要定义或修改的属性的名称或 Symbol 。

  • descriptor

    要定义或修改的属性描述符。

返回值：被传递给函数的对象。

通过该方法的属性描述符 enumerable，就可以设置该属性是否可以枚举，当设置为false时，不可枚举；否则，可枚举。如下 ：

 Object.defineProperty(object1, 'property1', {
     enumerable: false,
     value: 'not enumerable'
});

属性结构如下 ：

image-20211021102204802.png

检索可枚举性：

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

参数:

  • obj

    需要查找的目标对象

  • prop

    目标对象内属性名称

返回值：如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。

该方法允许对一个属性的描述进行检索，如下 ：

Object.getOwnPropertyDescriptor(object1, 'property1')

属性结构如下 ：

image-20211021102646726.png

描述对象的enumerable属性，称为“可枚举性”，如果该属性为false，就表示某些操作会忽略当前属性。

目前，有四个操作会忽略enumerable为false的属性。

  • for...in循环：只遍历对象自身的和继承的可枚举的属性。
  • Object.keys()：返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify()：只串行化对象自身的可枚举的属性。
  • Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

这四个操作之中，前三个是 ES5 就有的，最后一个Object.assign()是 ES6 新增的。其中，只有for...in会返回继承的属性，其他三个方法都会忽略继承的属性，只处理对象自身的属性。

实际上，引入“可枚举”（enumerable）这个概念的最初目的，就是让某些属性可以规避掉for...in操作，不然所有内部属性和方法都会被遍历到。比如，对象原型的toString方法，以及数组的length属性，就通过“可枚举性”，从而避免被for...in遍历到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
​
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面代码中，toString和length属性的enumerable都是false，因此for...in不会遍历到这两个继承自原型的属性。

另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的。

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

总的来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用for...in循环，而用Object.keys()代替。

Object.assign :

言归正传，上面介绍了可枚举性只是为了引出今天的重头戏——Object.assign()

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

参数：

  • target

    目标对象。

  • sources

    源对象。

返回值：目标对象。

Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。

注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

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 }

Object.assign()是深拷贝还是浅拷贝？

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。

  • 如果只有一个参数，Object.assign()会直接返回该参数。
const obj = {a: 1};
Object.assign(obj) === obj // true
  • 如果该参数不是对象，则会先转成对象，然后返回。
typeof Object.assign(2) // "object"
  • 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
Object.assign(undefined) // 报错
Object.assign(null) // 报错
  • 如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。

这意味着，如果undefined和null不在首参数，就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
  • 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。
const v1 = 'abc';
const v2 = true;
const v3 = 10;
​
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

上面代码中，v1、v2、v3分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中，布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面，这个属性是不会被Object.assign()拷贝的。只有字符串的包装对象，会产生可枚举的实义属性，那些属性则会被拷贝。

Object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

上面代码中，Object.assign()要拷贝的对象只有一个不可枚举属性invisible，这个属性并没有被拷贝进去。

属性名为 Symbol 值的属性，也会被Object.assign()拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

实际应用 : 处理列表数据——复制内层对象的值

获取到的对象结构如下：

image-20211021111828439.png

利用 Object.assign() 将对象 params 属性内层数据复制到外层 :

 getProcessList(params).then(response => {
     this.processingList = response.rows.map(item => {
         let itemObj = Object.assign(item, {
             ...item.customerInfo
         });
         return itemObj || {};
     });
});

操作后对象结构如下 :

image-20211021112302688.png

发现此时 inputDate 为 null ，这是由于 customerInfo 对象中包含 inputDate 字段, 使用 Object.assign 会覆盖掉原值。

修改代码如下 ：

getProcessList(params).then(response => {
    this.processingList = response.rows.map(item => {
        let inputDate = item.inputDate;
        let itemObj = Object.assign(item, {
            ...item.customerInfo,
            ...item.responseParams
        });
        itemObj.inputDate = inputDate;
        return itemObj || {};
    });
});

修改后对象结构如下 :

image-20211021112642917.png

avatar
文章
阅读
粉丝