js的深拷贝和浅拷贝

深拷贝不同于浅拷贝，它不只拷贝目标对象的第一层属性，而是递归拷贝目标对象的所有属性。

一般来说，在JavaScript中考虑复合类型的深层复制的时候，往往就是指对于 Date 、Object 与 Array 这三个复合类型的处理。我们能想到的最常用的方法就是先创建一个空的新对象，然后递归遍历旧对象，直到发现基础类型的子节点才赋予到新对象对应的位置。

不过这种方法会存在一个问题，就是 JavaScript 中存在着神奇的原型机制，并且这个原型会在遍历的时候出现，然后需要考虑原型应不应该被赋予给新对象。那么在遍历的过程中，我们可以考虑使用 hasOenProperty 方法来判断是否过滤掉那些继承自原型链上的属性。

动手实现一份浅拷贝加扩展的函数

function _isPlainObject(target) {
  return (typeof target === 'object' && !!target && !Array.isArray(target));
}
function shallowExtend() {
  var args = Array.prototype.slice.call(arguments);
  // 第一个参数作为target
  var target = args[0];
  var src;

  target = _isPlainObject(target) ? target : {};
  for (var i=1;i<args.length;i++) {
    src = args[i];
    if (!_isPlainObject(src)) {
      continue;
    }
    for(var key in src) {
      if (src.hasOwnProperty(key)) {
        if (src[key] != undefined) {
          target[key] = src[key];
        }
      }
    }
  }

  return target;
}

测试用例：

// 初始化引用数据类型变量
var target = {
  key: 'value',
  num: 1,
  bool: false,
  arr: [1, 2, 3],
  obj: {
    objKey: 'objValue'
  },
};
// 拷贝+扩展
var result = shallowExtend({}, target, {
  key: 'valueChanged',
  num: 2,
  bool: true,
});
// 对原引用类型数据做修改
target.arr.push(4);
target.obj['objKey2'] = 'objValue2';
// 比较基本数据类型的属性值
result === target; // false
result.key === target.key;  // false
result.num === target.num;  // false
result.bool === target.bool;// false
// 比较引用数据类型的属性值
result.arr === target.arr;  // true
result.obj === target.obj;  // true

jQuery.extend 实现深浅拷贝加扩展功能

贴下 jQuery@3.3.1 中 jQuery.extend 的实现：

jQuery.extend = jQuery.fn.extend = function() {
  var options,
    name,
    src,
    copy,
    copyIsArray,
    clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // 如果第一个参数是布尔值，则为判断是否深拷贝的标志变量
  if (typeof target === "boolean") {
    deep = target;
    // 跳过 deep 标志变量，留意上面 i 的初始值为1
    target = arguments[i] || {};
    // i 自增1
    i++;
  }

  // 判断 target 是否为 object / array / function 以外的类型变量
  if (typeof target !== "object" && !isFunction(target)) {
    // 如果是其它类型变量，则强制重新赋值为新的空对象
    target = {};
  }

  // 如果只传入1个参数；或者是传入2个参数，第一个参数为 deep 变量，第二个为 target
  // 所以 length 的值可能为 1 或 2，但无论是 1 或 2，下段 for 循环只会运行一次
  if (i === length) {
    // 将 jQuery 本身赋值给 target
    target = this;
    // i 自减1，可能的值为 0 或 1
    i--;
  }

  for (; i < length; i++) {
    // 以下拷贝操作，只针对非 null 或 undefined 的 arguments[i] 进行
    if ((options = arguments[i]) != null) {
      // Extend the base object
      for (name in options) {
        src = target[name];
        copy = options[name];
        // 避免死循环的情况
        if (target === copy) {
          continue;
        }
        // Recurse if we're merging plain objects or arrays
        // 如果是深拷贝，且copy值有效，且copy值为纯object或纯array
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
          if (copyIsArray) {
            // 数组情况
            copyIsArray = false;
            clone = src && Array.isArray(src)
              ? src
              : [];
          } else {
            // 对象情况
            clone = src && jQuery.isPlainObject(src)
              ? src
              : {};
          }
          // 克隆copy对象到原对象并赋值回原属性，而不是重新赋值
          // 递归调用
          target[name] = jQuery.extend(deep, clone, copy);

          // Don't bring in undefined values
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }
    }
  }
  // Return the modified object
  return target;
};

function copy(arr){
    var obj=arr.constructor==Array?[]:{};
　　//第二种方法 var obj=arr instanceof Array?[]:{}
    for(var item in arr){
        if(typeof arr[item]==="object"){
            obj[item]=copy(arr[item]);
        }else{
            obj[item]=arr[item];
        }
    }
    return obj;
}

var dest = JSON.parse(JSON.stringify(target));

for (let key in targetObj) {
  if (targetObj.hasOwnProperty(key)) {
    // 相关操作
  }
}

const keys = Object.keys(targetObj);
keys.map((key)=>{
  // 相关操作
});

const obj = Object.create(null);
target.__proto__ = Object.create(null);
for (let key in target) {
  // 相关操作
}