语法:Object.assign(target,...source)

说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象

一、以对象为参数的合并

1、第一个参数都是对象,后面的参数都是源对象

const target={a:1};
const source1={b:2};
const source2={c:2};
Object.assign(target,source1,source2);
输出:console.log(target);//{a:1,b:2,c:3}

2、 若只有一参数,会直接返回该参数

const obj={a:1};
consolt.log(Object.is(Object.asign(obj),obj));
输出:ture;

3、如果该参数不是对象会先转成对象

console.log(Object.assign(2));
输出:Number对象,其值为 2
console.log(typeof Object.assign(2));
输出:object

4、undefined和null无法转成对象,会报错

console.log(Object.assign(undefined));//报错
console.log(Object.assign(null));//报错  

二、如果非对象参数出现在源对象的位置上

1、如果undefined和null不在首参数,就不会报错

let obj1={a:1};
console.log(Object.is(Object.assign(obj1,undefined),obj1));
输出:true
console.log(Object.is(Object.assign(obj1,null),obj1));
输出:true

2、其他类型的值不在首参数也不会报错。但是目标对象一般都是对象,所以源对象也应该是对象。

const v1='abc';
const v2=true;
const v3={'Symbol':0};
const v4=10;
const v5=5;
const v6=7;
const obj2=Object.assign({},v1,v2,v3,v4);
console.log(obj2);
输出:{0:'a',1:'b',2:'c','Symbol':0};
const obj3=Object.assign({},v4,v5,v6);
输出:{}
const obj3=Object.assgin(v4,v5,v6);
输出:Number对象,没有值

3、Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性,也不拷贝不可枚举的属性)

Object.assign({b:'c'},Object.defineProperty({},'invisible',{enumerable:false,value:'hello'}));
最后的结果没有验证://{b:'c'}

4、同名属性的替换(不管该属性的值是否为对象) 

const v1={a:{b:1}};
const v2=Object.assign({a:3,b:4},v1);
console.log(v2.a.b);
输出结果:1

5、数组的处理,把数组视为对象(就像上面有一个案例 v1=‘abc’,变为 0:'a',1:'b',2:'c')

var v5=Object.assign([1,2,3],[4,5]);
console.log(v5);
输出:[4,5,3]

6、取值函数的处理,若复制的值是取值函数,那么求值后再复制

const v4={get foo(){return 1}};
const target={};
console.log(Object.assign(target,v4));
输出:{foo:1}
console.log(target.foo);
输出:1

三、常见的用途

1、为对象添加属性 

class Point{
constructor(x,y){
Object.assign(this,{x,y});
}
} 扩展内容:class声明创建一个基于原型继承的具有给定名称的新类

class Polygon {
        constructor(height, width) {
            this.area = height * width;
        }
     }

console.log(new Polygon(4,3).area);

     // expected output: 12

2、为对象添加方法

Object.assign(SomeClass.prototype,{someMethod(arg1,arg2){},anotherMethod(){}});

3、克隆对象

function clone(obj){
return Object.assign({},obj);
}

4、合并多个对象

 const merge=(target,...sources)=>Object.assign(target,...sources);

5、为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
}; function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

  

  

  

  

  

  

 

  

  

  

  

  

javascript 之 扩展对象 Object.assing的更多相关文章

  1. JavaScript内置对象-Object

    ▓▓▓▓▓▓ 大致介绍 JavaScript的简单数据类型包括:Undefined.Null.Boolean.Number.String.JavaScript中这五种基本数据类型不是对象,其他所有值都 ...

  2. javascript 之 扩展对象 jQuery.extend

    在JQuery的API手册中,extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上,但在JQuery内部代码实现的是相同的,只是功能各不相同. 官方解释: jQuery.exte ...

  3. javascript 之 扩展对象

    注意点:在js中常见的几种方进行扩展 第一种:ES6提供的 Object.assign(); 第二种:ES5提供的 extend()方法 第三种:Object对象提供的 defineProperty( ...

  4. 对Javascript中的对象Object改变内存及其变量改变的图解

    Object 存储变量时,变量属性的内存改变图解 左边: 对象的内存   中间:变量属性的内存   右边:属性值的内存 [图一]创建一个对象,存obj1 变量--里面存age 属性和属性值--12. ...

  5. javascript 内置对象及常见API

    javascript 内置对象及常见API 2012-09-02 15:17 571人阅读 评论(0) 收藏 举报 javascript正则表达式文档浏览器urlstring Javascript内置 ...

  6. JS对象-不可扩展对象、密封对象、冻结对象

    不可扩展对象 Object.preventExtensions() 仅阻止添加自身的属性.但属性仍然可以添加到对象原型. 可以用 Object.isExtensible(obj) 来判断对象是否可扩展 ...

  7. 深入JavaScript对象(Object)与类(class),详细了解类、原型

    JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象 ...

  8. 设计模式之美:Extension Object(扩展对象)

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用示例结构实现 Extension Object. 实现方式(二):使用泛型实现 IExtensibleObject<T ...

  9. javascript EcmaScript5 新增对象之Object.freeze

    我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...

随机推荐

  1. gcov—a Test Coverage Program

    gcov—a Test Coverage Program https://coverage.readthedocs.io/en/v4.5.x/cmd.html 覆盖率测试

  2. shell - 拉取代码部署执行

    #!/bin/bash nodejs_path=/data/myserver/yihao01-node-js cd /data/myserver if [ -d "$nodejs_path& ...

  3. python 设计模式之单例模式 Singleton Pattern

    #引入 一个类被设计出来,就意味着它具有某种行为(方法),属性(成员变量).一般情况下,当我们想使用这个类时,会使用new 关键字,这时候jvm会帮我们构造一个该类的实例.这么做会比较耗费资源. 如果 ...

  4. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  5. 009-Spring Boot全局配置跨域请求支持

    1.Spring Boot 2.0以前全局配置跨域主要是继承WebMvcConfigurerAdapter @Configuration public class CorsConfig extends ...

  6. spring boot集成Websocket

    websocket实现后台像前端主动推送消息的模式,可以减去前端的请求获取数据的模式.而后台主动推送消息一般都是要求消息回馈比较及时,同时减少前端ajax轮询请求,减少资源开销. spring boo ...

  7. Python 初级 5 判断再判断(四)

    一 .复习 分支:完成测试并根据结果做出判断称为分支. 代码块:一行或放在一起的多行代码 缩进:一个代码行稍稍靠右一点 关系操作符(比较操作符):==, >, >=, <, < ...

  8. ecshop怎么以幻灯版调用首页主广告显示

    今天在做一个商品网站我使用的是一套现成的ecshop模板了,这套模板下载下来多半是可以使用的,但是我发现第一屏的首页广告一直是不显示我想了很多办法都不显示了,后来一站长告诉我如何解决,下面我就来介绍e ...

  9. js判断图片加载完成

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  10. Python3 IO编程之文件读写

    读写文件是最常见的IO操作.python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一个,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序终结操作磁盘, ...