Object.assign()

1、Object.assign()是什么？
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

tips：在JavaScript中枚举属性简单来说就是指对象中的属性是否可以被遍历出来，是属性的enumerable值决定的

2、基本用法

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };const currentTarget = Object.assign(target, source, source2);
console.log(currentTarget);
// currentTarget:  {a: 1, b: 3, c: 5, d: 6}

Object.assign方法的第一个参数是目标对象，后边的其他参数都是源对象；

tips：

1、如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

2、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

3、注意目标自身也会改变

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

const target = { a: 1, b: 2 };
const currentTarget = Object.assign(target);
console.log(currentTarget);//{a: 1, b: 2}

该参数不是对象会先转为对象，然后return;(undefined || unll 出现在target（源对象）位置无法转换为对象会报错)
const currentTarget = Object.assign(10);
console.log(currentTarget);

//Number {10}

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

const source1 = "aaa";
const source2 = false;
const source3 = 666;const currentTarget = Object.assign({}, source1, source2, source3);
console.log(currentTarget);
//{0: "a", 1: "a", 2: "a"}Symbol 类型的属性也会被拷贝。
const target = { a: "111" };
const source1 = { [Symbol("6")]: 666 };
const currentTarget = Object.assign(target, source1);
console.log(currentTarget);//{a: "111", Symbol(6): 666}

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

const obj = Object.create({foo: 1}, { // foo 是个继承属性。bar: {value: 2  // bar 是个不可枚举属性。},baz: {value: 3,enumerable: true  // baz 是个自身可枚举属性。}
});const currentTarget= Object.assign({}, obj);
console.log(currentTarget); // { baz: 3 }

出现异常会打断后续的copy任务

const target = Object.defineProperty({}, "foo", {value: 1,writable: false
}); // target 的 foo 属性是个只读属性。Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only

// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar);  // 2，说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo);  // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
console.log(target.baz);  // undefined，第三个源对象更是不会被拷贝到的。

深拷贝问题
针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是（可枚举）属性值。

假如源值是一个对象的引用，它仅仅会复制其引用值。

const log = console.log;function test() {let obj1 = { a: 0 , b: { c: 0}};let obj2 = Object.assign({}, obj1);log(JSON.stringify(obj2));// { a: 0, b: { c: 0}}obj1.a = 1;log(JSON.stringify(obj1));// { a: 1, b: { c: 0}}log(JSON.stringify(obj2));// { a: 0, b: { c: 0}}obj2.a = 2;log(JSON.stringify(obj1));// { a: 1, b: { c: 0}}log(JSON.stringify(obj2));// { a: 2, b: { c: 0}}obj2.b.c = 3;log(JSON.stringify(obj1));// { a: 1, b: { c: 3}}log(JSON.stringify(obj2));// { a: 2, b: { c: 3}}// Deep Cloneobj1 = { a: 0 , b: { c: 0}};let obj3 = JSON.parse(JSON.stringify(obj1));obj1.a = 4;obj1.b.c = 4;log(JSON.stringify(obj3));// { a: 0, b: { c: 0}}
}test();

同名属性的替换
对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

Object.assign()相关推荐

【一语点醒梦中人】如何优雅地合并两个JSON对象 → Object.assign(a, b)和Object.assign({}, a, b)的区别
var a = {a: 1}; var b = {b: 2}; var c = Object.assign(a, b);/* a对象也会改变,b不变,返回被被修改对象 */ var d = Objec ...
JavaScript 复制对象与Object.assign方法无法实现深复制
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
Object.assign()
定义: 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象. 语法: object.assign(target,. . .sources); target: 目标对象. sou ...
assign深拷贝_经典前端面试题: Object.assign 是浅拷贝还是深拷贝？实现深拷贝的方法有哪些？...
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖.后面的源对象的属性将类 ...
原生js实现Object.assign和Object.create
Object.assign(target,-sources) Object.assign(target,-source)方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象 ...
ecma 2018, javascript spread syntax behaves like Object.assign
as the subject. It is only supported in Chrome version 60+, so, first check the version, or just use ...
扩展运算符，Object.assign
2019独角兽企业重金招聘Python工程师标准>>> assign或者...扩展符都是浅拷贝对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 ...
JavaScript深入理解对象方法——Object.assign()
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ... ...
Object.create()和Object.assign()
一.Object.create() 该方法用于创建一个新对象,并为其指定原型对象和属性. 语法:Object.create(prototype,description); proto:(必须),表示新 ...
瞎说系列之Object.assign入门
瞎说系列之Object.assign入门前言过去的一个多月新接手了一个公司的老项目,在实现新需求的同时还需要对有些地方进行重构,故而导致了没时间更新文章.最近趁着周末更新一篇关于Object.as ...

Object.assign()

Object.assign()相关推荐

最新文章

热门文章