Question

我正在尝试对函数参数进行解构，但是出现如下错误，

TypeError：无法解构'undefined'的属性obj1或 '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)

Answer 2

函数.map()等待具有2个属性obj1和obj2的1个对象参数。在注释掉的代码中，使用2个没有以下属性的参数来调用它：map(obj1[key], value2);。根据其签名，呼叫应为map({obj1: obj1[key], obj2: value2});。

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

2 个答案: