剩余参数 ... / 参数列表 arguments

约 949 字大约 3 分钟

2025-04-18

在 Stylus 中，剩余参数（args...）和参数列表（arguments）是很强大的特性，允许你捕获和处理不确定数量的参数。这使得函数和 mixin 更加灵活和可扩展。

一、剩余参数 `args...`

剩余参数表示参数数量的不确定，这些参数被收集到一个数组中。剩余参数可以结合关键字参数一起使用，但是在定义的时候，它的位置必须在所有关键字参数之后。

1、基本用法

// 定义一个函数，接受任意数量的参数
sum-numbers(numbers...)
  total = 0
  for num in numbers
    total += num
  return total
div
  z-index: sum-numbers(1, 2, 3, 4, 5)

编译为：

div {
  z-index: 15;
}

2、结合关键字参数

margin-calc(a, b, others...)
  (a b others[0] others[1])
div
  margin margin-calc(30px, 40px, a: 10px, b: 20px)

编译为：

div {
  margin: 10px 20px 30px 40px;
}

二、参数列表 `arguments`

arguments 是一个内置对象，它包含了函数调用时传递的所有参数。

box-shadow-args()
  box-shadow arguments

.card
  box-shadow-args(0 1px 3px rgba(0,0,0,.1), inset 0 0 5px red)

编译为：

.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px red;
}

三、二者对比

特性	参数列表 `arguments`	剩余参数 `args...`
据类型	保留原始参数列表（包括逗号）	展开为独立值或键值对
修改能力	只读	可操作
包含命名参数	❌ 不包含	✅ 包含
典型用途	直接转发原始参数	参数计算和转换

arguments 能保持参数列表的原始格式，而 args... 会将其合并成一个数组或对象。

例如，以下代码中，我们希望给box-shadow() 传入的参数 #ddd 1px 1px, #eee 2px 2px，我们希望编译的时候保留逗号,：

box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

#login
  box-shadow #ddd 1px 1px, #eee 2px 2px

这时候，我们发现编译结果中，逗号消失了，不是我们想要的，改成argument：

#login {
  -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
  -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
  box-shadow: #ddd 1px 1px #eee 2px 2px;
}

让我们使用 arguments 获取参数：

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

body
  box-shadow #ddd 1px 1px, #eee 2px 2px

编译为：

body {
  -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
  -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
  box-shadow: #ddd 1px 1px, #eee 2px 2px;
}

四、特殊技巧

1、参数解构

first-two(a, b, rest...)
  p('First:', a, 'Second:', b, 'Rest:', rest)

first-two(1, 2, 3, 4, 5)
// 输出: First: 1 Second: 2 Rest: 3 4 5

2、类型判断

process-args(args...)
  if length(args) == 1
    return 'Single: ' + args[0]
  else
    return 'Multiple: ' + args

process-args(1)      // "Single: 1"
process-args(1, 2)   // "Multiple: 1 2"

五、典型应用场景

1. CSS 多值属性处理

box-shadows(shadows...)
  box-shadow shadows

.card
  box-shadows(0 1px 3px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05))

2. 创建参数代理

create-proxy(fn, args...)
  return fn(args...)

// 使用
add(a, b)
  return a + b

result = create-proxy(add, 3, 5)  // 8

3. 高级混入（Mixins）

responsive-mixin(breakpoint, overrides...)
  @media (min-width: breakpoint)
    {block}
    for prop, val in overrides
      {prop} val

+responsive-mixin(768px, color: red, padding: 20px)
  width 100%
// 编译为：
// @media (min-width: 768px) { width: 100%; color: red; padding: 20px; }

六、总结

1、注意事项

性能影响：剩余参数会在运行时创建临时数组/对象
命名冲突：避免与内置函数或变量名冲突
嵌套限制：剩余参数不能嵌套在另一个剩余参数中
不要去修改 arguments 和 args... 里的值

2、最佳实践

明确注释，描述参数、代码块的用途：

/*
 * @param {*} required - 必填参数
 * @param {...*} rest - 其他参数
 */

参数数量至少 3 个，否则没有必要使用：

命名空间隔离：

$utils = {
  merge-args: (args...) => { /*...*/ }
}

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24