函数参数中的变量被花括号括起来是什么意思？

Question

我在一个包装上看到这段代码：

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

在函数参数中加上花括号，对items发生了什么?

- Toli

---

@KevinB 在 JSX 中是什么意思？ - Toli

嗯，说得好。那个特定的位置不是JSX，JSX是( <ul>部分。 - Kevin B

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Pulling_fields_from_objects_passed_as_function_parameter - Kevin B

Answer 1

这是 解构赋值 语法。

作为另一个例子，下面两行代码是相等的：

const { items } = args

const items = args.items

简单来说，它是一种简化的方式，用于访问给定变量的特定字段，以便在该范围内进一步使用。

在您的原始示例中，它声明了一个变量项，以便在函数体中使用，该变量是第一个参数的项字段。

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

等于

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

- lawls544

Answer 2

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

作为答案，这是解构赋值。如果传入的对象与所引用的变量相似，则可以在赋值过程中检索该特定字段。

- Blake Geraci

Answer 3

这是解构赋值。

在下面的例子中，花括号“{}”中的变量“name”，“sex”和“age”从“data”中分别提取了值“John”，“Male”和“24”：

* 花括号“{}”中的变量名必须与“data”中的键名相同。

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”中的键名不同，则会分配值为“undefined”的值：

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);

- Kai - Kazuya Ito