将对象解构为函数参数 深度扩展

Question

在使用解构设置传递给函数的对象的默认属性时，是否可以“深度扩展”对象？

例子：

function foo({
  foo = 'foo',
  bar = 'bar',
  baz = {
    propA: 'propA',
    propB: 'propB'
  }
} = {}) {
  console.log(foo);
  console.log(bar);
  console.log(baz);
}

foo({
  foo: 'changed',
  baz: {
    propA: 'changed'
  }
});

这个输出：（baz 被覆盖）

changed
bar
{
  "propA": "changed"
}

是否有语法可以扩展baz 对象，以提供输出：

changed
bar
{
  "propA": "changed",
  "propB": "propB"
}

Answer 1

没有本地方法可以按您的要求做，但是您可以自己写function decorator，当然这是一种冗长的方法...

注意：为了执行深度合并，您应该使用社区开发的一些现有解决方案，Object.assign 和 Object Spread Operator 都执行源的浅拷贝，甚至，编写自己的 deepmerge 函数可能容易出错。我建议您使用lodash#merge，这是公认的解决问题的可靠方法之一。

var {
  // https://lodash.com/docs/#merge
  merge
} = require('lodash');

function defaultsArgDecorator(defaults, target) {

  return function(args) {
    
    return target(
      merge(Object.create(defaults), args)
    )
  }
}


function _foo(args) { console.log({args}); }
var foo = defaultsArgDecorator({
  foo: 'foo',
  bar: 'bar',
  baz: {
    propA: 'propA',
    propB: 'propB'
  }
}, _foo);

foo({bar: "ciao bello", baz: {propA: "HELLO"}})

Answer 2

您还可以进行嵌套解构。你解构 baz，也解构 propA 和 propB。

如果您需要整个对象并且不想“重建”它，这不适合您，但它确实实现了为嵌套在对象中的未指定属性设置默认值的目标。

我将baz 保留为一个单独的描述值，并将其属性作为有时方便的模式的示例，但您很可能希望将其删除，因为它同样存在丢失默认属性的问题。

function foo({
  foo = 'foo',
  bar = 'bar', 
  baz,  // likely extraneous and confusing, here for example
  baz: { propA = 'propA', propB = 'propB' }
} = {}) {
  console.log(foo);
  console.log(bar);
  console.log(propA, propB);
  console.log(baz);
  console.log(Object.assign(baz, {propA, propB}));
}

foo({
  foo: 'changed',
  baz: {
    propA: 'changed'
  }
});

Answer 3

由于参数解构允许您在其他参数的默认值中使用以前的参数，您可以创建一个不会退出原始参数的属性，例如__baz，并使用baz 设置其默认值。 在该方法中，您将使用__baz 而不是baz。

注意：这是一个 hack，如果对象包含由 __baz 的名称将覆盖默认值，产生意想不到的结果。 但是，您可以使用类似的名称命名默认属性 dontUse__baz，被使用的几率非常低。

使用Object#assign的默认属性：

function foo({
  foo = 'foo',
    bar = 'bar',
    baz,
    __baz = Object.assign({  
      "propA": "changed",
      "propB": "propB"
    }, baz)
} = {}) {
  console.log(foo);
  console.log(bar);
  console.log(__baz);
}

foo({
  foo: 'changed',
  baz: {
    propA: 'changed'
  }
});

---

使用 object spread 的默认属性（需要 babel 插件 - see link）：

function foo({
  foo = 'foo',
    bar = 'bar',
    baz,
    __baz = {  
      "propA": "changed",
      "propB": "propB",
      ...baz
    }
} = {}) {
  console.log(foo);
  console.log(bar);
  console.log(__baz);
}

foo({
  foo: 'changed',
  baz: {
    propA: 'changed'
  }
});

Answer 4

是的，完全有可能！

解决方案 1：

function foo({
  foo = 'foo',
  bar = 'bar',
  baz: {
    propA = 'propA',
    propB = 'propB'
  } = {}
}) {
  console.log(foo)
  console.log(bar)
  console.log({propA, propB}) // Because `bar` is renamed to `{propA, propB}`. Hence, no local variable named `baz`
}

解决方案 2（解决方法）：

function foo({
  foo = 'foo',
  bar = 'bar',
  baz = {}
}) {
  // ...
  const baz2 = Object.assign({}, {propA: 'propA', propB: 'propB'} = {})
  console.log(baz2) // Yeah, not really a solution
}

你甚至可以这样做：

const func = ([{foo, bar: {a, b: BB, c: CC = 'c'} = {}} = {}], ...{0: rest0 = 0, 1: rest1 = '1'}) => { /* do stuffs */ }

上面的代码是一个复杂的例子，我会用更简单的例子来解释：

示例 1：

const f1 = ({x: varx}) => console.log(varx)

当您调用f1(obj) 时，obj.x 将被分配给varx 在f1 的范围内

示例 2：

const f2 = ({xy: {x, y}}) => console.log({x, y})

类似于f1，但用{x, y}代替varx，obj.xy将分配给{x, y}，所以x = obj.xy.x和y = obj.xy.y

示例 3：现在让我们添加创建默认参数

const f3 = ({xy: {x, y} = {}}) => { /* do stuffs */ }

现在，您仍然需要将 obj 作为对象传递，但您不再需要提供 obj.xy。如果obj.xy 是undefined，x 和y 是undefineds

示例 4：现在，让 x 和 y 具有默认值

const f4 = ({xy: {x = 'XXX', y = 'YYY'} = {}}) => { /* do stuffs */ }

如果你传递的obj.xy是undefined，{x, y}将被设置为{x: undefined, y: undefined}，但由于x和y也有默认值，x将是'XXX'和@987654357 @ 将是'YYY'

示例 4：“终极生命形态”

const f5 = ({xy: {x = 'XXX', y = 'YYY'} = {}} = {}) => { /* do stuffs */ }

我想我不必再解释了：D