在写一些插件的时候,我们会经常遇到所传参数需要合并默认参数,并覆盖相同参数的情况,在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. html5 横向滑动导航栏

    前提 需要引入: <script src="../assets/js/iscroll.js"></script> v4.2版本 ####html <! ...

  2. jQuery 控制網頁捲軸移動 & Ignore link '#' method jump action

    $('a.gotoheader').click(function(){ // 讓捲軸移動到 0 的位置 $(); // ignore link "#" method return ...

  3. 提示不是内部或外部命令-Java的jdk、JRE包

    因为要测试后台程序的功能,所以要先安装Java的jdk包,配置环境变量. 首先要安装jdk和jre,才是完整的,只安装其中一个的话,在cmd命令行输入“JAVAC”会提示“不是内部或外部命令” 目前最 ...

  4. linux 大量time_wait的解决方法

    通过调整内核参数解决vi /etc/sysctl.conf 编辑文件,加入以下内容:net.ipv4.tcp_syncookies = 1net.ipv4.tcp_tw_reuse = 1net.ip ...

  5. Docker 安装运行MySQL

    1.镜像主页 https://hub.docker.com/_/mysql 2.拉取5.7版本 docker pull mysql:5.7 3.或者拉取最新8.x版本 docker pull mysq ...

  6. gitstats 统计gitlab仓库中的代码

    使用Git版本库,有一些可视化的工具,如gitk,giggle等,来查看项目的开发历史.但对于大型的项目,这些简单的可视化工具远远不足以了解项目完整的开发历史,一些定量的统计数据(如每日提交量,行数等 ...

  7. Django 之memcached的应用

    memcached介绍: memcached之前是danga的一个项目,最早是为LiveJournal服务的,当初设计师为了加速LiveJournal访问速度而开发的,后来被很多大型项目采用.官网是w ...

  8. Nginx启动和停止

    启动nginx [root@LinuxServer sbin]#  /usr/local/nginx/sbin/nginx     -c     /usr/local/nginx/conf/nginx ...

  9. [PDF] - 获取 RadioButtonList 控件值的方法

    背景 目标是通过 iTextSharp 读取 PDF 模板,填充内容后以生成新 PDF 文件.利用 福昕PDF编辑器个人版 可以获取到 RadioButtonList 的组名,但是获取不到每一个 Ra ...

  10. java当中JDBC当中请给出一个DataSource的单态模式(SingleTon)HelloWorld例子

    [学习笔记] 2.DataSource的单态模式(SingleTon)程序 咱们还接着上面的例子来说.1万个人要看书.千万确保要只建立一个图书馆.要是一不留神,建了两个或三个图书馆,那可就亏大发了.对 ...