ES5 Object.assign 等价物答案

【问题标题】：ES5 Object.assign equivalentES5 Object.assign 等价物
【发布时间】：2015-08-10 11:23:50
【问题描述】：

我想使用Object.assign 做一些非常直接的事情。

var firstObj = {name : "Saba H.", rollNo : 1};
var secondObj = {college : "WCE"};
var wholeObj = Object.assign(firstObj, secondObj);

console.log(wholeObj); // {name : "Saba H.", rollNo : 1, college : "WCE"}

由于Object.assign 是 ECMAScript6 和谐提案的一部分，并且不受许多浏览器的支持，是否可以使用 ES5？如果没有，有没有微库？

【问题讨论】：

lodash.com/docs#assign基本相同——基于编辑，看看lodash源代码何乐而不为？
在mdn你可以看到polyfill

标签： javascript object ecmascript-5 ecmascript-harmony

【解决方案1】：

在underscore.js中你可以使用like，

_.extend(firstObj, secondObj);

在jQuery中，你可以使用，

$.extend({},firstObj,secondObj);

在纯javascipt中，你可以使用这个函数合并n个对象：

function mergeObjects() {
    var resObj = {};
    for(var i=0; i < arguments.length; i += 1) {
         var obj = arguments[i],
             keys = Object.keys(obj);
         for(var j=0; j < keys.length; j += 1) {
             resObj[keys[j]] = obj[keys[j]];
         }
    }
    return resObj;
}

【讨论】：

【解决方案2】：

我在MDN 上找到了一个适用于 Object.assign 的 polyfill（太棒了，谢谢！）：

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

【讨论】：

【解决方案3】：

纯javascript方式：

function mergeObjects() {
  var res = {};
  for (var i = 0; i < arguments.length; i++)
    for (var x in arguments[i])
      res[x] = arguments[i][x];
  return res;
}

例子：

var my_merged_object = mergeObjects(obj1,obj2,...);

【讨论】：

您忘记在循环内声明x。否则，它将是一个全局变量。
而且还缺少一个 hasOwnProperty 检查（第二个 for 循环）

【解决方案4】：

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;
};

var settings = extend(defaults, options);

【讨论】：

【解决方案5】：

使用扩展运算符

var firstObj = {name : "Saba H.", rollNo : 1},
secondObj = {college : "WCE"},
wholeObj = {...firstObj, ...secondObj};

console.log(wholeObj); // {name : "Saba H.", rollNo : 1, college : "WCE"}

【讨论】：