函数参数中变量周围的大括号是什么意思

Question

我在包裹上看到了这段代码：

const SortableList = SortableContainer(({items}) => {
 return (
     <ul>
        {items.map((value, index) =>
            <SortableItem key={`item-${index}`} index={index} value={value} />
        )}
    </ul>
 );
});

items 在函数参数中用大括号括起来会发生什么？

Answer 1

这个问题很可能是转贴：What do {curly braces} around javascript variable name mean

但作为答案，它是 destructuring assignment。如果传入的对象反映了引用的变量，则可以在赋值期间检索该特定字段。

Answer 2

这是 destructuring assignment 语法。

再举个例子，下面两行代码是等价的：

const { items } = args

const items = args.items

简而言之，这是一种访问给定变量的特定字段以便在该范围内进一步使用的简化方法。

在您的原始示例中，它声明了一个变量 items 用于第一个参数的 items 字段的函数体中。

const SortableList = SortableContainer(({items}) => {
    // do stuff with items here

等于

const SortableList = SortableContainer((input) => {
    const items = input.items
    // do stuff with items here

Answer 3

这是Destructuring Assignment。

在下面的示例中，变量 "name"、"sex" 和 "age" 在 花括号 "{}" 中提取值 "John", "Male"和 "24" 分别来自 "data"：

*大括号"{}"中的变量名必须与"data"中的键名相同[=77] =]

const data = { name: "John", sex: "Male", age: 24 }; const { name, sex, age } = data; console.log(name); // John console.log(sex); // Male console.log(age); // 24

如果大括号“{}”中的变量名与“data”中的键名不同，则值“未定义” 的分配：

const data = { name: "John", sex: "Male", age: 24 }; const { myName, mySex, age } = data; console.log(myName); // undefined console.log(mySex); // undefined console.log(age); // 24

大括号“{}”中变量的顺序无关紧要：

const data = { name: "John", sex: "Male", age: 24 }; const { age, sex, name } = data; console.log(name); // John console.log(sex); // Male console.log(age); // 24

您可以重命名大括号“{}”中的变量“{}”:

const data = { name: "John", sex: "Male", age: 24 }; const { name: firstName, sex: gender, age } = data; console.log(firstName); // John console.log(gender); // Male console.log(age); // 24

花括号“{}”中的变量重命名后，原变量不起作用报错：

const data = { name: "John", sex: "Male", age: 24 }; const { name: firstName, sex: gender, age } = data; console.log(name); console.log(sex); console.log(age);

函数参数中变量周围的大括号是什么意思

What do curly braces around a variable in a function parameter mean

javascript

curly-braces

node.js

ecmascript-6

reactjs