在JavaScript中返回修改过的对象（类似于镜头）

问题描述

与镜头在函数式语言中的功能类似，JavaScript中是否有一种方法可以返回与原始对象相同的新对象，但某些元素已被修改？

var myObject = {
  label: 'Table',
  options: ['legs'],
  params: {
    colour: 'red',
    feet: {
      colour: 'white',
      shape: 'round'
    }
  }
}

function newObject(obj) {
  // sought-after syntax here
  return obj({ params.colour = 'green', params.feet.shape = 'square' })
}

console.log(newObject(myObject))
{
  label: 'Table',
  options: ['legs'],
  params: {
    colour: 'green',
    feet: {
      colour: 'white',
      shape: 'square'
    }
  }
}

注意： newObject()返回一个新对象，而不会影响任何形状或形式的原始对象。

没有嵌套，可以使用Object.assign轻松完成：

Object.assign({}, obj, { label: "New One" })

或使用对象传播：

{ ...obj, label: "New One" }

要支持嵌套对象/数组，您必须以递归方式手动合并对象：

 function merge(target, changes) {
   const result = {};

   for(const [key, value] of Object.entries(target).concat(Object.entries(changes))) {
     if(Array.isArray(value)) {
       // TODO
     } else if(typeof value === "object") {
       result[key] = merge(result[key] || {}, value);
     } else {
       result[key] = value;
     }
   }

   return result;
}

另一种替代方式是：

let newObj = JSON.parse(JSON.stringify(oldObj))