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

Question

这个问题在这里已经有了答案:





Where can I get info on the object parameter syntax for JavaScript functions?

(1 个回答)


6 个月前关闭。




我在一个包上看到了这段代码:

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

items 发生了什么通过在函数参数中将花括号括起来？

Answer 1

这是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