function ({ event }) {}与function (event) {}区别

这两个写法在 JavaScript 或 TypeScript 中是不同的，区别主要在于 参数解构 的使用。

✅ 1. function ({ event }) {} —— 对象解构

这是一个对象参数解构的写法。

• 它表示函数期望接收一个对象作为参数。
• 然后从这个对象中，提取出 event 这个属性作为局部变量。

✅ 示例：

function handleClick({ event }) {
  console.log(event.type); // 使用 event
}

// 调用时必须传一个对象，且该对象中要有 event 属性
handleClick({ event: { type: 'click' } });

✅ 2. function (event) {} —— 普通参数

这是最常见的函数参数写法。

• 它表示函数接收一个参数，并将其命名为 event。
• 这个参数可以是任意类型（对象、字符串、数字等）。

✅ 示例：

function handleClick(event) {
  console.log(event.type); // 使用 event
}

// 直接传入一个对象
handleClick({ type: 'click' });

✅ 总结对比：

🔍 实际应用场景

• 如果你写的是 React 事件处理函数，比如：

  <button onClick={({ event }) => ...}> // ❌ 错误，event 不是解构出来的
  

  这是错误的，因为 React 事件对象本身就是 event，不需要解构。

• 正确写法是：

  <button onClick={(event) => ...}> // ✅ 正确
  

✅ 一句话总结：

function ({ event }) {} 是从对象中解构出 event，而 function (event) {} 是直接接收一个参数就叫 event。两者语义完全不同。