首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery的扩展方法的JavaScript等价物

jQuery的扩展方法的JavaScript等价物
EN

Stack Overflow用户
提问于 2012-06-26 04:56:25
回答 8查看 54.8K关注 0票数 100

背景

我有一个函数,它接受一个config对象作为参数。在函数中,我还有default对象。这些对象中的每个对象都包含属性,这些属性基本上用作函数中其余代码的设置。为了避免必须在config对象中指定所有设置,我使用jQuery的extend方法来填充一个新对象settings,其中包含来自default对象的任何默认值(如果没有在config对象中指定的话):

代码语言:javascript
复制
var config = {key1: value1};
var default = {key1: default1, key2: default2, key 3: default 3};

var settings = $.extend(default, config);

//resulting properties of settings:
settings = {key1: value1, key2: default2, key 3: default 3};

问题

这很好用,但是我想在不需要jQuery的情况下重现这个功能。有没有一种同样优雅(或接近)的方法可以用普通的javascript来做到这一点呢?

编辑:非重复对齐

这个问题不是"How can I merge properties of two JavaScript objects dynamically?“问题的重复。虽然这个问题只是想创建一个包含来自两个单独对象的所有键和值的对象-我特别想解决如何在两个对象共享一些键而不是所有键的情况下做到这一点,以及在存在重复键的情况下哪个对象将获得结果对象的优先级(默认值)。更具体地说,我想解决使用jQuery的方法来实现这一点,并找到一种不使用jQuery的替代方法。虽然这两个问题的许多答案是重叠的,但这并不意味着问题本身是相同的。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-06-26 05:03:48

要在代码中获得结果,您需要执行以下操作:

代码语言:javascript
复制
function extend(a, b){
    for(var key in b)
        if(b.hasOwnProperty(key))
            a[key] = b[key];
    return a;
}

请记住,您在其中使用extend的方式将修改默认对象。如果您不想这样做,可以使用

代码语言:javascript
复制
$.extend({}, default, config)

模仿jQuery功能的更健壮的解决方案如下所示:

代码语言:javascript
复制
function extend(){
    for(var i=1; i<arguments.length; i++)
        for(var key in arguments[i])
            if(arguments[i].hasOwnProperty(key))
                arguments[0][key] = arguments[i][key];
    return arguments[0];
}
票数 134
EN

Stack Overflow用户

发布于 2018-02-06 08:24:30

您可以使用ECMA 2018 spread operator in object literals...

代码语言:javascript
复制
var config = {key1: value1};
var default = {key1: default1, key2: default2, key 3: default 3};

var settings = {...default, ...config}

//resulting properties of settings:
settings = {key1: value1, key2: default2, key 3: default 3};

BabelJS support for older browsers

票数 43
EN

Stack Overflow用户

发布于 2016-08-28 12:47:24

您可以使用Object.assign。

代码语言:javascript
复制
var defaults = {key1: "default1", key2: "default2", key3: "defaults3"};
var config = {key1: "value1"};

var settings = Object.assign({}, defaults, config); // values in config override values in defaults
console.log(settings); // Object {key1: "value1", key2: "default2", key3: "defaults3"}

它将所有可枚举的own属性的值从一个或多个源对象复制到目标对象,并返回目标对象。

代码语言:javascript
复制
Object.assign(target, ...sources)

它适用于除IE (但包括Edge)以外的所有桌面浏览器。它减轻了移动支持。

您可以在此处查看:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

关于深度复制

但是,Object.assign没有jQuery的extend方法所具有的深度选项。

注意:您通常可以使用JSON来实现类似的效果

代码语言:javascript
复制
var config = {key1: "value1"};
    var defaults = {key1: "default1", key2: "default2", keyDeep: {
        kd1: "default3",
        kd2: "default4"
    }};
    var settings = JSON.parse(JSON.stringify(Object.assign({}, defaults, config))); 
    console.log(settings.keyDeep); // Object {kd1: "default3", kd2: "default4"}
票数 32
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11197247

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档