Question

我一直在使用jQuery，所以在Vanilla JS进行编码时，我有点想知道我们如何使用类似于$的东西。延伸到香草JS。

Answer 1

基本上有这三种方法 -

最简单的方法是使用Object.assign（）函数

语法 - Object.assign（target，... sources）

所以你可以用以下方式编码 -

var obj = { a: 1,c:4 }, obj2 = {a:2,b:3};
var copy = Object.assign(obj, obj2);
console.log(copy); // { a: 1 }

即使深度克隆也可以参考Mozilla Doc.

否则，如果要在代码中使用extend。一种描述扩展如下 - 摘自这篇文章Vanilla JavaScript version of jQuery.extend()

/* Pass in the objects to merge as arguments.
   For a deep extend, set the first argument to `true`.*/


var extend = function () {

// Variables
var extended = {};
var deep = false;
var i = 0;
var length = arguments.length;

// Check if a deep merge
if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
    deep = arguments[0];
    i++;
}

// Merge the object into the extended object
var merge = function (obj) {
    for ( var prop in obj ) {
        if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
            // If deep merge and property is an object, merge properties
            if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
                extended[prop] = extend( true, extended[prop], obj[prop] );
            } else {
                extended[prop] = obj[prop];
            }
        }
    }
};

// Loop through each object and conduct a merge
for ( ; i < length; i++ ) {
    var obj = arguments[i];
    merge(obj);
 }
       return extended;
};

在代码中使用此定义，extend（）函数可用于扩展对象，如下所述 -

var newObjectShallow = extend(object1, object2, object3);

如果对象很简单（不需要深度克隆），可以使用以下方法 - 更多细节提到here

var extend = function ( defaults, options ) {
var extended = {};
var prop;
for (prop in defaults) {
    if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
        extended[prop] = defaults[prop];
    }
}
for (prop in options) {
    if (Object.prototype.hasOwnProperty.call(options, prop)) {
        extended[prop] = options[prop];
    }
}
return extended;
};

希望这有助于任何人在本地js中搜索$ .extend实现

如何在vanilla js中使用$ .extend？

1 个答案: