Return JavaScript 中的修改对象（类似于镜头）

Question

类似于 lenses 在函数式语言中的作用，有没有办法在 JavaScript 中 return 一个与原始对象相同但某些元素已被修改的新对象？

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() return是一个新对象，没有以任何形状或形式影响原始对象。

Answer 1

无需使用 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;
}

Answer 2

您可以尝试使用 Spread Syntax

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

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

console.log(newObject(myObject))

Answer 3

另一种替代方法是：

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

Return JavaScript 中的修改对象（类似于镜头）

Return modified object in JavaScript (similar to lenses)

javascript

destructuring

ecmascript-6