es6中的Object.assign

最新推荐文章于 2024-04-01 00:00:00 发布

weixin_30468137

最新推荐文章于 2024-04-01 00:00:00 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenzhiyu/p/8695408.html

本文介绍了如何在ES6中利用Object.assign方法实现参数合并，默认参数被覆盖的需求，并提供了具体的代码示例，同时讨论了使用该方法时可能出现的问题及解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写一些插件的时候，我们会经常遇到所传参数需要合并默认参数，并覆盖相同参数的情况，在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}