Object.assign()方法

124 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

今天说一对象的一个方法Object.assign()

语法: Object.assign(target, source1, source2)

Object.assign方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象,它将返回目标对象。在JavaScript中枚举属性简单来说就是指对象中的属性是否可以被遍历出来,是属性的enumerable值决定的。 第一个参数是目标(多个对象中的属性都保存到第一个里面)对象,后面的参数都是源对象

基础用法:

let a = { a: 1 };
let b = { b: 3 };
let c = { c: 4 };
 
let d = Object.assign(a, b, c);
console.log(d);  {a: 1, b: 3, c: 4}

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
例如下面的代码:

let a = { a: 1,b: 2 };
let b = { b: 3 };
let c = { c: 4 };
 
let d = Object.assign(a, b, c);
console.log(d);  {a: 1, b: 3, c: 4}

如果只有一个参数,Object.assign会直接返回该参数 

var obj = {a: 1}
console.log(Object.assign(obj) === obj);
//如果该参数不是对象,则会先转成对象,然后返回
console.log(typeof Object.assign(2)); //Object

该参数不是对象会先转为对象,然后return;(undefined || unll 出现在target(源对象)位置无法转换为对象会报错)

let a = Object.assign(10);  
console.log(a);   //Number {10}

注意,Object.assign 不会在那些定义对象值为 null 或 undefined 的时候抛出错误。其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

let a = "aaa";
let b = false;
let c = 666;
 
let d = Object.assign({}, a, b, c);
console.log(d); //{0: "a", 1: "a", 2: "a"}
 

Symbol 类型的属性也会被拷贝。
let e = { a: "111" };
let f = { [Symbol("6")]: 666 };
let g = Object.assign(e, f);
console.log(g); //{a: "111", Symbol(6): 666}

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

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

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

使用的注意点:
1.浅拷贝
Object.assign方法实行的是浅拷贝,而不是深拷贝,也就是说,如果源对象某一个属性值是对象,那么,目标对象拷贝得到的就是这个对象的引用
2. 同名属性替换
对于这种嵌套的对象,一旦遇到同名的属性,Object.assign的处理方法是替换的,而不是添加,“后面的会替换前面的值”
3.数组的处理
Object.assign可以用来处理数组,但是会把数组视为对象

总结

分享一下学到的这个实用方法、感觉常用在合并对象这一方面