IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Object.assign() -> 正文阅读

[JavaScript知识库]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 Clone
? obj1 = { 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' } }
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-24 09:20:29  更:2022-04-24 09:21:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:59:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码