在写一些插件的时候,我们会经常遇到所传参数需要合并默认参数,并覆盖相同参数的情况,在jQuery中我们可以使用$.extend(),在原生中要想使用得自己封装,

但自从es6出现了Object.assign,我们就方便多了

var obj = {
name:"a",
age: 28,
gender: "male"
}; var defaultObj = {
name: "佚名",
age: 18
}
var res = Object.assign(defaultObj , obj);
     console.log(res);  //{name: "a", age: 28, gender: "male"}

可以看到上面的代码已经实现了我们的需求,但注意这里有一些坑,我们来看下面的代码

var obj = {
name:"a",
age: 28,
gender: "male"
}; var defaultObj = {
name: "佚名",
age: 18
}
var res = Object.assign(defaultObj , obj);
     console.log(res);  //{name: "a", age: 28, gender: "male"}
console.log(obj); //{name: "a", age: 28, gender: "male"}
console.log(defaultObj); //{name: "a", age: 28, gender: "male"}

可以看到我们同时也污染了defaultObj的值,那么怎么解决这样尴尬的局面呢,解决方案其实也很简单,代码如下

var obj = {
name:"a",
age: 28,
gender: "male"
}; var defaultObj = {
name: "佚名",
age: 18
}
var res = Object.assign({},defaultObj , obj);
     console.log(res);  //{name: "a", age: 28, gender: "male"}
console.log(obj); //{name: "a", age: 28, gender: "male"}
console.log(defaultObj); //{name: "佚名", age: 18}

es6中的Object.assign的更多相关文章

  1. js中的Object.assign接受两个函数为参数的时候会发生什么?

    缘由 今天看到一段代码 return Object.assign(func1, func2); 心生疑惑,为什么 Object.assign 的参数可以是函数? 于是有了下面这一堆东西,其实都是老生常 ...

  2. 在ES5实现ES6中的Object.is方法

    ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...

  3. es6新语法Object.assign()

    1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一 ...

  4. ES6之Object.assign()详解

    译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Funde ...

  5. ES6学习--Object.assign()

    ES6提供了Object.assign(),用于合并/复制对象的属性. Object.assign(target, source_1, ..., source_n) 1. 初始化对象属性 构造器正是为 ...

  6. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  7. ES6深入浅出-11 ES6新增的API(上)-1.Object.assign

    这些都是es6才有的 Object.assign 在a加上三个属性 分别是p1\p2\p3 以前是这么去加 b的三个属性p1.p2.p3就全部复制到a这个对象上了. 把后面的东西放到前面的东西上 两个 ...

  8. 【ES6学习笔记之】Object.assign()

    基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...

  9. ES6的Object.assign()基本用法

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 例如: const target = {a:1}, const source1 ...

随机推荐

  1. linux系统实现多个进程监听同一个端口

    通过 fork 创建子进程的方式可以实现父子进程监听相同的端口. 方法:在绑定端口号(bind函数)之后,监听端口号之前(listen函数),用fork()函数生成子进程,这样子进程就可以克隆父进程, ...

  2. Extjs locked无效,使用enableLocking即可

    一.前言 在使用 extjs 做表格时,由于表格的列太多,我们需要设置一些固定列来查看数据,所以我们需要用到 locked 属性.普通加载 columns 的列是有效的,如果是动态加载的话,使用 lo ...

  3. 好消息!iconfont+开始支持彩色图标

    想必关注iconfont的同学都知道,iconfont最近做出了一次重大升级,升级成为iconfont+了,而这次更新,iconfont+居然开始支持彩色图标,这意味着我们能够使用更具有特色更形象的全 ...

  4. Maven工具-简介

    Maven工具-简介 定义 ①maven是一款服务于java平台的自动化构建工具 make→Ant→maven→Gradle ②构建 [1]概念:以"java源文件"." ...

  5. [转帖]谷歌宣称首次实现量子优越性,IBM“不服”,中国同行咋看?

    谷歌宣称首次实现量子优越性,IBM“不服”,中国同行咋看? 投递人 itwriter 发布于 2019-10-24 15:46 评论(7) 有306人阅读 原文链接 [收藏] « » https:// ...

  6. nohup 后台运行脚本,且可以实时查看日志

    -u加在python上 python命令加上-u(unbuffered)参数后会强制其标准输出也同标准错误一样不通过缓存直接打印到屏幕. 这是因为python的缓存机制所决定的 如果是使用 nohup ...

  7. yzoj 2377 颂芬梭哈 题解

    题意 Alice 和 Mukyu 最近偶然得到了一本写有一种叫做梭哈的扑克游戏的规则的说明书(名为<C████████nd>,中间部分被涂掉了),据其所述,梭哈是一种使用黑桃.红心.梅花. ...

  8. c++ (1) c++ 与c 的区别

    可以说c++ 语言在c基础上扩展了许多  在学习玩c语言之后  学习c++ 会发现容易一些  但是c++也有优越于c 的地方 c++ 与c 语言都属于本地编译型语言 ,直接编译成本地编译码,运行特别快 ...

  9. WEB学习路线2019完整版(附视频教程+网盘下载地址)

    WEB学习路线2019完整版(附视频教程+网盘下载地址).适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利.高薪水的职业了.所以现在学习web前端开发的技术人员也是 ...

  10. vue elementui如何修改el-table头部样式

    找到el-table加入红色代码 <el-table :row-style="tableRowStyle" :header-cell-style="tableHea ...