如何在香草 js 中使用 $.extend？ [复制]

Question

我已经使用 jQuery 很长时间了，所以在使用 Vanilla JS 进行编码时，我有点想知道我们如何使用类似于 $ 的东西。在原版 JS 中扩展。

Answer 1

基本上有这三种方法-

1. 最简单的方法是使用 Object.assign() 函数

语法 - Object.assign(target, ...sources)

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

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

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

1. 否则，如果您想在代码中使用扩展。一个描述如下 - 取自这篇帖子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);

1. 如果对象很简单（不需要深度克隆），可以使用以下方法 - 提到更多细节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 实现的人