我一直在使用jQuery,所以在Vanilla JS
进行编码时,我有点想知道我们如何使用类似于$
的东西。延伸到香草JS。
答案 0 :(得分:4)
基本上有这三种方法 -
语法 - 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实现