如何防止對象/數組突變？

Question

我一直在嘗試調試奇怪的問題，我終於弄清楚它為什么會發生。 只是不確定如何防止它（;我有這個功能：

getInfo(id) {
  id = id || "zero";
  let i = routeDefinitions.findIndex(r => Boolean(r.name.toLowerCase().match(id)));
  // console.log(i) - works in plunker
  // but in my app sometimes returns -1...
  let current = routeDefinitions[i];
  let next = routeDefinitions[i + 1] ? routeDefinitions[i + 1] : false;
  let prev = routeDefinitions[i - 1] ? routeDefinitions[i - 1] : false;
  return { prev, current, next };
}

..在這個plunker中完美運行 ，但在我的應用程序中，我使用其返回值來更新應用程序狀態（redux模式的自定義實現）。 當我通過此函數發送返回值時：

  private _update(_old, _new) {
    let newState = Object.keys(_new)
      .map(key => {
        if (_old[key] === undefined) {
          _old[key] = _new[key];
        } else if (typeof _new[key] === "object") {
          this._update(_old[key], _new[key]);
        } else {
          _old[key] = _new[key];
        }
        return _old;
      })
      .find(Boolean);

    return Object.assign({}, newState || _old);
  }

.. routeDefinitions數組是變異的，事情開始破壞......我嘗試了幾件事：

let current = [...routeDefinitions][i];
// and:
return Object.assign({}, { prev, current, next });

..但它沒有用。 如何防止routeDefinitions數組的routeDefinitions ？

編輯 ：我設法重現了這個plunker中的錯誤

Answer 1

routeDefinitions數組發生了變異，事情開始破裂

如果您的功能是真的：

getInfo(id) {
  id = id || "zero";
  let i = routeDefinitions.findIndex(r => Boolean(r.name.toLowerCase().match(id)));
  // console.log(i) - works in plunker
  // but in my app sometimes returns -1...
  let current = routeDefinitions[i];
  let next = routeDefinitions[i + 1] ? routeDefinitions[i + 1] : false;
  let prev = routeDefinitions[i - 1] ? routeDefinitions[i - 1] : false;
  return { prev, current, next };
}

然后， routeDefinitions 不會發生變異 。 其他東西正在改變routeDefinitions。

Answer 2

我通過像這樣修改_update()來解決這個問題：

  private _update2(_old, _new) {
    let newState = {}; 
    Object.keys(_new)
      .map(key => {
        if (_old[key] === undefined) {
          newState[key] = _new[key];
        } else if (typeof _new[key] === "object") {
          newState[key] = this._update2(_old[key], _new[key]);
        } else {
          newState[key] = _new[key];
        }
        return newState;
      })
      .find(Boolean);

    return Object.assign({}, _old, newState);
  } 

我只使用old state來檢查值，不要在_update()完成后再修改它。

Plunker