javascript 之 扩展对象 Object.assing
语法: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的更多相关文章
- JavaScript内置对象-Object
▓▓▓▓▓▓ 大致介绍 JavaScript的简单数据类型包括:Undefined.Null.Boolean.Number.String.JavaScript中这五种基本数据类型不是对象,其他所有值都 ...
- javascript 之 扩展对象 jQuery.extend
在JQuery的API手册中,extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上,但在JQuery内部代码实现的是相同的,只是功能各不相同. 官方解释: jQuery.exte ...
- javascript 之 扩展对象
注意点:在js中常见的几种方进行扩展 第一种:ES6提供的 Object.assign(); 第二种:ES5提供的 extend()方法 第三种:Object对象提供的 defineProperty( ...
- 对Javascript中的对象Object改变内存及其变量改变的图解
Object 存储变量时,变量属性的内存改变图解 左边: 对象的内存 中间:变量属性的内存 右边:属性值的内存 [图一]创建一个对象,存obj1 变量--里面存age 属性和属性值--12. ...
- javascript 内置对象及常见API
javascript 内置对象及常见API 2012-09-02 15:17 571人阅读 评论(0) 收藏 举报 javascript正则表达式文档浏览器urlstring Javascript内置 ...
- JS对象-不可扩展对象、密封对象、冻结对象
不可扩展对象 Object.preventExtensions() 仅阻止添加自身的属性.但属性仍然可以添加到对象原型. 可以用 Object.isExtensible(obj) 来判断对象是否可扩展 ...
- 深入JavaScript对象(Object)与类(class),详细了解类、原型
JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象 ...
- 设计模式之美:Extension Object(扩展对象)
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用示例结构实现 Extension Object. 实现方式(二):使用泛型实现 IExtensibleObject<T ...
- javascript EcmaScript5 新增对象之Object.freeze
我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...
随机推荐
- zookeeper/kafka的部署
Ubuntu中安装zookeeper及kafka并配置环境变量 首先安装zookeeper zookeeper需要jdk环境,请在jdk安装完成的情况下安装zookeeper1.从官网下载zook ...
- expandablelistView 可展开的列表
这个东西用法基本固定,不知道能不能做三级的展开. 界面代码 <?xml version="1.0" encoding="utf-8"?> <L ...
- VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!
VsCode写Python代码!这代码简直和大神一样规范!太漂亮了! 转 https://www.jianshu.com/p/636306763d89 VsCode虽然没有Pycharm的功能齐 ...
- [原][landcover]全球地表植被样例图片
图由南水之源提供,感谢 流socket 制作总结 原截图如下:按字母顺序排序 asphalt asphalt_bright asphalt_white brightRockOnly broad ...
- Spring cloud微服务安全实战-4-10Zuul网关安全开发(三)
首先把地址给它 发送post请求,请求的数据就是这个entity对象. 最后返回的值要封装到TokenInfo里面 如果一切正常的话就会拿到一个响应的实体,实体里面就包含了TokenInfo 打印实体 ...
- C++类成员存储大小
1.对象分布图 2.解析 每个类的大小只有其成员变量大小,其中包括:类成员属性,虚函数指针: 而其他没有如:静态变量[静态区],普通函数.静态函数[代码区] 3.总结 类对象的sizeof只包含成员变 ...
- 使用origin画SCI论文图
使用origin画SCI论文图 觉得有用的话,欢迎一起讨论相互学习~Follow Me start 使用的是OriginPro这款软件,这款软件的特点是 一个字 好 . 新建工作簿并导入数据 可以使用 ...
- Flink 异步IO访问外部数据(mysql篇)
接上篇:[翻译]Flink 异步I / O访问外部数据 最近看了大佬的博客,突然想起Async I/O方式是Blink 推给社区的一大重要功能,可以使用异步的方式获取外部数据,想着自己实现以下,项目上 ...
- 【Leetcode_easy】914. X of a Kind in a Deck of Cards
problem 914. X of a Kind in a Deck of Cards 题意:每个数字对应的数目可以均分为多组含有K个相同数目该数字的数组. 思路:使用 map 结构记录数组中每个元素 ...
- react 生命周期图解
参考地址:https://www.cnblogs.com/gdsblog/p/7348375.html