关于可运行的ES2016特殊代码及...style语法作用的技术问询

嘿，这个问题我碰到过好多次，我来给你拆解清楚～

首先，...这个语法在ES2016（也就是常说的ES7）里有两个核心用法：剩余参数（Rest Parameters）和扩展运算符（Spread Operator），结合你说的“没找到声明为style的变量”，咱们分情况看：

1. 作为「剩余参数」：style是在参数里声明的局部变量 #

这种情况最可能让你误以为“没找到style变量”——因为style是在函数的参数列表里被声明的，只有函数内部能访问，外部看不到。

它的作用是把函数接收的剩余所有参数打包成一个数组，语法必须放在函数参数的最后一位。举个例子：

// 这里的...style就是剩余参数，style在参数位置声明，外部无法访问
function combineStyles(base, ...style) {
  // style是一个数组，包含了除base之外的所有传入参数
  return Object.assign({}, base, ...style);
}

// 调用时传入多个样式对象
const finalStyle = combineStyles(
  { color: "#333" },
  { fontSize: "14px" },
  { padding: "8px 12px" }
);
// 此时style数组是 [{fontSize: "14px"}, {padding: "8px 12px"}]

2. 作为「扩展运算符」：style可能来自你没注意到的作用域 #

如果...style是用在对象/数组字面量里（比如const newObj = { ...style }），那它的作用是把style对象的所有可枚举属性展开到新对象里，或者把数组元素展开到新数组/函数参数里。

你没找到style的声明，大概率是它来自这些你没留意的地方：

• 函数参数：比如在React组件里，style是组件接收的props，可能参数列表用了解构赋值（比如function Card({ style }) {}），你可能漏看了参数里的style；
• 父作用域/闭包：style可能在当前代码块的外层函数里声明，当前代码块通过闭包访问它；
• 模块导入：可能有一行import { style } from './styles'你没注意到；
• 全局变量：这种情况比较少见，但不排除style是某个全局环境提供的变量（比如浏览器里的某个全局对象）。

举个JSX里的常见例子：

// style是组件的props，在参数里解构得到，你可能没注意到参数里的style
function Button({ children, style }) {
  // ...style把style对象的所有属性展开为button的HTML属性
  return <button className="btn" {...style}>{children}</button>;
}

额外提醒 #

如果翻遍代码真的找不到style的任何声明，那要么是代码有遗漏（比如被删除了一部分），要么是经过编译工具（比如Babel、TypeScript）转换后，原代码里的style声明被改写了。

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga