标签: destructuring

我目前正在使用对象解构模式和ES6对象解构默认参数的答案中描述的默认参数。

(function test({a = "foo", b = "bar"} = {}) {
  console.log(a + " " + b);
})();

我希望能够访问对象参数，而无需将其分配给函数体中的变量并显式列出每个键。

(function test({a = "foo", b = "bar"} = {}) {
  console.log(a + " " + b);
})();

我尝试命名对象参数，但该函数失去了将丢失的键解析为其默认值的能力。

(function test({a = "foo", b = "bar"} = {}) {
  const options = {a, b};
  console.log(options);
})();

在解构为命名参数时，它似乎忽略了默认参数。

这是 ES6 规范的一部分吗？有没有办法在函数体中无需额外代码即可实现所需的行为？

编辑：我删除了一个没有为问题添加上下文的多余示例。

我的理解是这样的解构将从传入的参数对象中选择属性：

const last = "Smith" // unrelated const

const full = function({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""

这似乎对进口同样有效。

import last from "last"; // unrelated import

export function full({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""

为什么这会导致no-shadoweslint 错误？

错误'last' 已经在上层作用域no-shadow 中声明

是否有任何情况full可以访问外部引用？没有权利？如何在不重命名不相关的外部last引用的情况下保持语法接近于此？

在 ES6 中，我们可以这样做：

let myFunc = ({name}) => {
  console.log(name)
}

myFunc({name:'fred'}) // => logs 'fred'

但是我该如何处理这样的嵌套属性：

myFunc({event:{target:{name:'fred'}}}) // => I want it to log 'fred'

myFunc 应该是什么样子才能记录“fred”？

我无法更改传入的对象。我希望使用解构来实现这种或其他一些合适的 ES6 方法。

在 python 中，我可以传递一个字典，其键与参数名称与**(double-splat) 运算符匹配：

def foo(a, b):
    print (a - b)

args = {'b': 7, 'a': 10}

foo(**args) # prints 3

在 ES6 中如何做同样的事情？这不起作用：

def foo(a, b):
    print (a - b)

args = {'b': 7, 'a': 10}

foo(**args) # prints 3

注意：我正在寻找一种不涉及更改签名的解决方案，foo因为我希望它以任何方式使用（带或不带解构）。所以以下应该有效：

foo(<magic>args);

foo(123, 456);

额外问题：为什么错误消息是“未定义不是函数”？这里到底什么是未定义的？

（正如 @Nina Scholz 在评论中回答的那样，这是因为...要求其参数具有Symbol.iterator，而这不是为对象定义的）。

我有一个执行 AJAX 调用的函数，如下所示：

let retrieveData = (section, sectionItem, callback) => {
    ...
}

其中第二个参数是可选的，即在某些情况下该参数是必需的，而在其他情况下则不是：

let data = retrieveData(aSection, aSectionItem, function(json)) {
    ...
});

和：

let data = retrieveData(aSection, undefined, function(json)) {
    ...
});

在第二个实例中，我希望能够省略undefined参数，我相信通过解构的方式分配选项/默认值是答案（根据这个例子：https : //javascript.info/destructuring-assignment#smart-function -parameters），但我对如何构建代码缺乏了解。

为什么此代码会产生错误Type 'symbol' cannot be used to index type '{ [x: string]: string; }'.：

let symbol = Symbol()
let obj = { [symbol] : 'value'}
let { [symbol]: alias } = obj
             // ^^^^^ the error is here

console.log(alias)

最重要的是，我该如何解决这个问题？

我想用函数组件中的单个更改处理程序来更新表单中的几个值的状态。我不知道如何以正确的方式设置该州的单个属性。我已经在类组件中看到了它的工作原理。

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

export function Example(){
  const [user, setUser] = useState({nickname: '', age: 0})

  const handleChange = event => {
    const { name, value } = event.target
    setUser({ [name]: value })
  }

  return(
     <form>
       <input name="nickname" onChange={handleChange} />
       <input name="age" onChange={handleChange} />
       <button onClick={(e) => {
         e.preventDefault()
         console.log(user)
        }}>Show User</button>
     </form>
  )
}

ReactDOM.render(
    <Example />,
    document.getElementById('app')
);

上面的代码不能按我想要的方式工作，因为它总是覆盖整个状态，而不仅仅是相应的属性。

我收到：

Object {age: "24"}
Object {nickname: "Lala"}

我想：

Object {age: "24", nickname: "Lala"}

实现这一目标的最佳实践是什么？

Groovy 是否具有像 Javascript 这样的多个赋值的对象解构：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

假设我有这个功能：

const testFunction = () => {
  const item_one = 1
  const item_two = 2
  return { item_one, item_two }
}

当我像这样解构该函数的返回值时

let item_one, item_two; // the variables are defined elsewhere

{ item_one, item_two } = testFunction() // <-- Syntax error: Unexpected token "="

我收到语法错误。

相反，当我在做的时候

1）

let { item_one, item_two } = testFunction() // not suitable since I need to reassign

或者

2）

let item_one, item_two;
({ item_one, item_two } = testFunction())

代码按预期执行。

有人可以解释为什么我需要在 2. 中的赋值周围加上括号以及为什么会出现语法错误吗？

谢谢！

考虑以下代码，我x使用解构创建了一个“副本”，并删除了其中一个属性：

const x = { a: 1, b: 2, c: 3};
const { a, ...x2} = x;
console.log(x);
console.log(x2);

如果我这样做，@typescript-eslint/no-unused-vars会认为这是一个未使用的错误a。

如何更改代码来修复错误，而不明确要求 eslint 忽略有问题的行，最好仍然使用解构语法？即我真的不想使用delete，也不想显式枚举所有其他属性，例如const x2 = {b: x.b, c: x.c }.

是否有一种奇特的语法或奇怪的 eslint 规则可以鱼与熊掌兼得？