javascript – 使用扩展语法在ES6中进行深层复制

我正在尝试为我的Redux项目创建一个深度复制映射方法,该方法将使用对象而不是数组.我读到在Redux中,每个州都不应该改变以前的状态.

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    output[key] = callback.call(this, {...object[key]});

    return output;
    }, {});
}

有用：

    return mapCopy(state, e => {

            if (e.id === action.id) {
                 e.title = 'new item';
            }

            return e;
        })

但是它没有深层复制内部项目所以我需要调整它：

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    let newObject = {...object[key]};
    newObject.style = {...newObject.style};
    newObject.data = {...newObject.data};

    output[key] = callback.call(this, newObject);

    return output;
    }, {});
}

这不太优雅,因为它需要知道传递了哪些对象.
ES6中是否有一种方法可以使用扩展语法来深度复制对象？

解决方法:

ES6没有内置这样的功能.我认为你有几个选择取决于你想做什么.

如果你真的想要深层复制：

>使用库.例如,lodash有一个cloneDeep方法.
>实现自己的克隆功能.

针对您的特定问题的替代解决方案(无深层复制)

但是,我想,如果你愿意改变一些事情,你可以节省一些工作.我假设您控制所有呼叫站点到您的功能.

>指定传递给mapCopy的所有回调必须返回新对象,而不是改变现有对象.例如：

mapCopy(state, e => {
  if (e.id === action.id) {
    return Object.assign({}, e, {
      title: 'new item'
    });
  } else {  
    return e;
  }
});

这使用Object.assign创建一个新对象,在该新对象上设置e的属性,然后在该新对象上设置新标题.这意味着您永远不会改变现有对象,只在必要时创建新对象.
> mapCopy现在可以非常简单：

export const mapCopy = (object, callback) => {
  return Object.keys(object).reduce(function (output, key) {
    output[key] = callback.call(this, object[key]);
    return output;
  }, {});
}

从本质上讲,mapCopy信任其调用者做正确的事情.这就是我说这假设您控制所有呼叫站点的原因.

标签：spread-syntax,javascript,ecmascript-6,redux
来源： https://codeday.me/bug/20190926/1821423.html