获取 rangeError 超出最大调用堆栈大小

【问题标题】：get rangeError Maximum call stack size exceeded获取 rangeError 超出最大调用堆栈大小
【发布时间】：2018-06-05 06:38:41
【问题描述】：

我有一个带有复选框的下拉列表，它的值是一个对象。（见附件）

每次我选择一个对象时，都会有一个手表将这个新值（这是一个选定对象的数组）粘贴到另一个在指令（绑定）中显示它的对象——图块

$scope.$watch('skills', function(newVal, oldVal) {
        if (newVal) {
            console.log('changed!!! old value: ' + oldVal + '  new val  ' + newVal);
            if (newVal === undefined) {
                return;
            }
            $scope.tiles = _.cloneDeep(newVal);
        }
    }, true);



angular.module('dsadad')
    .component('tiles', {
        templateUrl: 'tile.tpl.html',
        bindings: {
            tiles: '<',
            onDelete: '&?'
        },
        controller: function ($state, _, $scope, $log, Utils, $translate, moment) {
            'use strict';

            var $ctrl = this;

        }
    });

我得到： rangeError 超出最大调用堆栈大小

由于某种原因，所选对象数组的值之一是一个数组，它也是一个对象的数组，如您所见....

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的问题很可能在这里$scope.tiles = _.cloneDeep(newVal);

如果newVal 有对自身的引用，它会递归地尝试克隆，直到你得到一个stackoverflow。

例如你可能有一个像这样的圆形对象结构：

const objectB = {
  id: 'B',
  otherData: null;
};
const objectA = {
  id: 'A',
  otherData: objectB;
};
objectB.otherData = objectA;
_.deepClone(objectB) // This will blow up due to the circular reference

否则，newVal 嵌套得太深，会导致问题。例如

const objectA = {
  a: {
    b: {
      c: {
        // etc. etc.
      }
    },
  }
};

要解决此问题，您可以从数据结构中删除此循环引用，也可以通过 {...newVal} 进行浅拷贝（如果它适合您的数据需求）

【讨论】：