javascript - 无法解构 `obj1` 或 'undefined' 的属性 'null'

Question

我试图在函数参数中进行解构，但收到如下错误，

TypeError: Cannot destructure property obj1 of 'undefined' or 'null'.

var deepDiffMapper = function() {
  return {
    VALUE_CREATED: 'created',
    VALUE_UPDATED: 'updated',
    VALUE_DELETED: 'deleted',
    VALUE_UNCHANGED: 'unchanged',
    map: function({
      obj1,
      obj2
    }) {

      if (this.isFunction(obj1) || this.isFunction(obj2)) {
        throw 'Invalid argument. Function given, object expected.';
      }
      if (this.isValue(obj1) || this.isValue(obj2)) {
        return {
          type: this.compareValues(obj1, obj2),
          data: (obj1 === undefined) ? obj2 : obj1
        };
      }

      /* Error On Uncomment
                var diff = {};
                for (var key in obj1) {
                    if (this.isFunction(obj1[key])) {
                        continue;
                    }
    
                    var value2 = undefined;
                    if ('undefined' != typeof (obj2[key])) {
                        value2 = obj2[key];
                    }
    
                    diff[key] = this.map(obj1[key], value2);
                }
                for (var key in obj2) {
                    if (this.isFunction(obj2[key]) || ('undefined' != typeof (diff[key]))) {
                        continue;
                    }
    
                    diff[key] = this.map(undefined, obj2[key]);
                }
    
                return diff;
                */

    },
    compareValues: function(value1, value2) {
      if (value1 === value2) {
        return this.VALUE_UNCHANGED;
      }
      if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
        return this.VALUE_UNCHANGED;
      }
      if ('undefined' == typeof(value1)) {
        return this.VALUE_CREATED;
      }
      if ('undefined' == typeof(value2)) {
        return this.VALUE_DELETED;
      }

      return this.VALUE_UPDATED;
    },
    isFunction: function(obj) {
      return {}.toString.apply(obj) === '[object Function]';
    },
    isArray: function(obj) {
      return {}.toString.apply(obj) === '[object Array]';
    },
    isDate: function(obj) {
      return {}.toString.apply(obj) === '[object Date]';
    },
    isObject: function(obj) {
      return {}.toString.apply(obj) === '[object Object]';
    },
    isValue: function(obj) {
      return !this.isObject(obj) && !this.isArray(obj);
    }
  }
}();


var result = deepDiffMapper.map({
  "obj1": {
    a: 'i am unchanged',
    b: 'i am deleted',
    e: {
      a: 1,
      b: false,
      c: null
    },
    f: [1, {
      a: 'same',
      b: [{
        a: 'same'
      }, {
        d: 'delete'
      }]
    }],
    g: new Date('2017.11.25')
  },
  "obj2": {
    a: 'i am unchanged',
    c: 'i am created',
    e: {
      a: '1',
      b: '',
      d: 'created'
    },
    f: [{
      a: 'same',
      b: [{
        a: 'same'
      }, {
        c: 'create'
      }]
    }, 1],
    g: new Date('2017.11.25')
  }
});
console.log(result);

注意:如果我作为两个参数传递，上面的代码可以正常工作。

如果取消上面代码中注释行的注释，则会出现错误。我还使用下面的代码测试了函数中的解构，效果很好。我不确定为什么会发生。

var sayHello = function ({ name, surname }) {
    console.log(`Hello ${name} ${surname}! How are you?`);
};

sayHello({ name: 'John', surname: 'Smith' })
// -> Hello John Smith! How are you?

Answer 1

您正在使用错误的参数递归调用 map 函数。

diff[key] = this.map(obj1[key], value2)

这需要一个具有 obj1 和 obj2 的对象，以便它可以正确地解构它。

您应该尝试两个内部 map 调用:

diff[key] = this.map({obj1: obj1[key], obj2: value2)