Object.assign()解释整理
链接:https://blog.csdn.net/wang252949/article/details/79106160
语法
Object.assign(target, ...sources)
参数
target
- 目标对象。
sources
- 源对象。
返回值
目标对象。
描述
如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
Object.assign
方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]
和目标对象的[[Set]]
,所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()
和Object.defineProperty()
。
在出现错误的情况下,例如,如果属性不可写,会引发TypeError
,如果在引发错误之前添加了任何属性,则可以更改target
对象。
注意,Object.assign
会跳过那些值为 null
或 undefined
的源对象。
示例
复制一个对象
- var obj = { a: 1 };
- var copy = Object.assign({}, obj);
- console.log(copy); // { a: 1 }
深拷贝问题
针对深拷贝,需要使用其他方法,因为 Object.assign()
拷贝的是属性值。假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。
- functiontest(){
- 'use strict';
- let obj1 = { a: 0 , b: { c: 0}};
- let obj2 = Object.assign({}, obj1);
- console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
- obj1.a = 1;
- console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
- console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
- obj2.a = 2;
- console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
- console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
- obj2.b.c = 3;
- console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
- console.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;
- console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
- }
- test();
合并对象
- var o1 = { a: 1 };
- var o2 = { b: 2 };
- var o3 = { c: 3 };
- var obj = Object.assign(o1, o2, o3);
- console.log(obj); // { a: 1, b: 2, c: 3 }
- console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
合并具有相同属性的对象
- var o1 = { a: 1, b: 1, c: 1 };
- var o2 = { b: 2, c: 2 };
- var o3 = { c: 3 };
- var obj = Object.assign({}, o1, o2, o3);
- console.log(obj); // { a: 1, b: 2, c: 3 }
属性被后续参数中具有相同属性的其他对象覆盖。
拷贝 symbol 类型的属性
- var o1 = { a: 1 };
- var o2 = { [Symbol('foo')]: 2 };
- var obj = Object.assign({}, o1, o2);
- console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
- Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
继承属性和不可枚举属性是不能拷贝的
- var obj = Object.create({foo: 1}, { // foo 是个继承属性。
- bar: {
- value: 2 // bar 是个不可枚举属性。
- },
- baz: {
- value: 3,
- enumerable: true // baz 是个自身可枚举属性。
- }
- });
- var copy = Object.assign({}, obj);
- console.log(copy); // { baz: 3 }
原始类型会被包装为对象
- var v1 = "abc";
- var v2 = true;
- var v3 = 10;
- var v4 = Symbol("foo")
- var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
- // 原始类型会被包装,null 和 undefined 会被忽略。
- // 注意,只有字符串的包装对象才可能有自身可枚举属性。
- console.log(obj); // { "0": "a", "1": "b", "2": "c" }
异常会打断后续拷贝任务
- var 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,第三个源对象更是不会被拷贝到的。
拷贝访问器
- var obj = {
- foo: 1,
- get bar() {
- return 2;
- }
- };
- var copy = Object.assign({}, obj);
- // { foo: 1, bar: 2 }
- // copy.bar的值来自obj.bar的getter函数的返回值
- console.log(copy);
- // 下面这个函数会拷贝所有自有属性的属性描述符
- functioncompleteAssign(target,...sources){
- sources.forEach(source => {
- let descriptors = Object.keys(source).reduce((descriptors, key)=> {
- descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
- return descriptors;
- }, {});
- // Object.assign 默认也会拷贝可枚举的Symbols
- Object.getOwnPropertySymbols(source).forEach(sym => {
- let descriptor = Object.getOwnPropertyDescriptor(source, sym);
- if (descriptor.enumerable) {
- descriptors[sym] = descriptor;
- }
- });
- Object.defineProperties(target, descriptors);
- });
- return target;
- }
- var copy = completeAssign({}, obj);
- console.log(copy);
- // { foo:1, get bar() { return 2 } }
Polyfill
此polyfill不支持 symbol 属性,因为ES5 中根本没有 symbol :
- if (typeof Object.assign != 'function') {
- // Must be writable: true, enumerable: false, configurable: true
- Object.defineProperty(Object, "assign", {
- value: functionassign(target, varArgs){ // .length of function is 2
- 'use strict';
- if (target == null) { // TypeError if undefined or null
- throw new TypeError('Cannot convert undefined or null to object');
- }
- var to = Object(target);
- for (var index = 1; index < arguments.length; index++) {
- var nextSource = arguments[index];
- if (nextSource != null) { // Skip over if undefined or null
- for (var nextKey in nextSource) {
- // Avoid bugs when hasOwnProperty is shadowed
- if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
- to[nextKey] = nextSource[nextKey];
- }
- }
- }
- }
- return to;
- },
- writable: true,
- configurable: true
- });
- }
Object.assign()解释整理的更多相关文章
- ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象
1 Alerts 该组件用于给用户操作提供反馈信息或者提供一些警告信息 2 用法 2.1 下载ngx-bootstrap依赖 参考博文:点击前往 2.2 在模块级别导入AlertModule模块 技巧 ...
- javascript学习总结之Object.assign()方法详解
最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...
- js中的Object.assign接受两个函数为参数的时候会发生什么?
缘由 今天看到一段代码 return Object.assign(func1, func2); 心生疑惑,为什么 Object.assign 的参数可以是函数? 于是有了下面这一堆东西,其实都是老生常 ...
- 一个 Object.assign 的误解
mozilla中对 Object.assign 的解释如下地址: mozilla 其中有说到 注意, Object.assign 会跳过那些值为 null 或 undefined 的源对象. 一直以为 ...
- Object.assign方法复制或合并对象
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...
- Object.assign()方法
对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...
- 微信不支持Object.assign
微信不支持Object.assign,让我Vue怎么用QAQ... 解决方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...
- object.assign()方法的使用
地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
- [Javascript] Object.assign()
Best Pratices for Object.assign: http://www.cnblogs.com/Answer1215/p/5096746.html Object.assign() ca ...
随机推荐
- windows server 2012启动进入cmd解决方法
感谢网友http://sns.yhjy.cn/u/XperiaZ/Blog/t-4748 由于删除了framework 4.5引起的. windows server 2012默认安装framework ...
- 通用base.css —— 《编写高质量代码 web前端开发修炼之道》
@charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol, ...
- Linux搭建bugfree
1.xampp安装包地址: 链接:https://pan.baidu.com/s/1Th2QvF77jvIGzMROoF2rbg 密码:yoar 2.因为我用的是xshell5连接Linux服务器,直 ...
- idea的maven项目下spring与mybatis整合
两周前学习mybatis框架,参考了网上多位大神的博客,但因为各种原因(不解释)总是没法成功搭建环境并运行项目.周末花了点时间阅读了文档并整理之前琐碎的内容,解决掉之前遇到的问题.现将整合环境的关键步 ...
- 学习笔记TF046:TensoFlow开发环境,Mac、Ubuntu/Linux、Windows,CPU版本、GPU版本
下载TensorFlow https://github.com/tensorflow/tensorflow/tree/v1.1.0 .Tags选择版本,下载解压. pip安装.pip,Python包管 ...
- 备忘:EBS参考链接
帮助手册查阅网址http://docs.oracle.com/cd/V46499_01/current/html/docset.html 官方 http://www.oracleappshub.co ...
- DevExpress GridView 整理(转)
DevExpress GridView 那些事儿 1:去除 GridView 头上的 "Drag a column header here to group by that column&q ...
- Linux系统目录权限chmod误操作权限修复方法
Linux中,如果意外误操作将/目录权限批量设置,比如chmod -R 777 / ,系统中的大部分服务以及命令将无法使用,这时候可以通过系统自带的getfacl命令来拷贝和还原系统权限,若是其他系统 ...
- 前端-JavaScript1-3——JavaScript之字面量
字面量?????? 字面量:英语叫做literals,有些书上叫做直接量.看见什么,它就是什么. 我们先来学习数字的字面量,和字符串的字面量.剩余的字面量类型,我们日后遇见再介绍. 3.1 数字的字面 ...
- 常用JVM命令
查看当前所有jvm进程 ./jps -l -m ./jps -l -m -v 查看jvm进程内存堆使用情况 ./jstat -gc $pid 生成java虚拟机当前时刻的线程快照 jstack -l ...