将具有解构赋值语法的字段提取到特定变量名

Posted 2023-02-22

【中文标题】将具有解构赋值语法的字段提取到特定变量名

【英文标题】：Extract fields with destructuring assignment syntax to a specific variable name

【发布时间】：2021-03-05 04:16:27

【问题描述】：

我正在尝试从返回的对象中提取特定字段，特别是我想将第一个字段与其他三个字段分开，但不知何故，我似乎只能保留返回元素的原始返回名称：

return 
   function1,
   string1,
   string2,
   function2  

我尝试提取返回值如下：

  const function1, ...rest = useField('firstField')

我的问题是我对表单的三个不同字段使用了三次 useField（自定义挂钩），所以我需要三个不同的名称来表示三个不同的“function1”返回：

const function1, ...rest = useField('firstField')
const function1, ...rest = useField('secondField')
const function1, ...rest = useField('thirdField')

我知道我可以通过添加额外步骤（声明新常量）来解决这个问题，但我正在尝试以一种优雅、简单的方式来解决这个问题。如果我尝试为每个函数分配自定义变量名称，它就不起作用，例如：

const firstFunction, ...rest = useField('firstField')
const secondFunction, ...rest = useField('firstField')
const thirdFunction, ...rest = useField('firstField')

它似乎可以返回一个数组而不是一个对象并且它可以工作，但是作为数组为每个元素分配一个数字（0：function1，1：value1 ...）而不是字段名称（function1：function1，value1：value1 ...) 对于我的目的而言，这不是一个好的解决方案。

知道如何优雅地解决这个问题吗？ （我不介意解决方案是修改收益还是价差解构）。

谢谢 =)

【参考方案1】：

使用destructuring assignment syntax，可以使用const prop: name = obj;将解构后的属性赋给一个新的变量名，相当于const name = obj.prop;冒号左边是属性名，右边是属性名是变量名。考虑到这一点，您可以编写以下代码，以便将 function1 属性分配给三个不同命名的变量：

const function1: firstFunction, ...rest = useField('firstField')
const function1: secondFunction, ...rest = useField('secondField')
const function1: thirdFunction, ...rest = useField('thirdField')

【讨论】：

谢谢！！这完美无缺。我实际上曾尝试用 = 而不是 : (facepalm) 做类似的事情。不过，我对左侧和右侧有点困惑，因为我习惯于将右侧作为值，因此从未想过将其用作变量赋值。再次感谢您=)

@HigoChumbo = 是在属性缺失或显式设置为值undefined 时为解构属性提供default value。