企业官网建设流程全解析

• 教程

本文对应 jstips 仓库英文原帖 _posts/en/javascript/2016-01-06-writing-a-single-method-for-arrays-and-a-single-element.md（仓库内另有 简体中文译本 与 西班牙语译本）。

本篇技术指南讲解一个高频实用的小技巧：只写一个方法，就能同时处理"单个元素"与"元素数组"两种入参。核心做法是一行[].concat(words || [])，把任意入参先归一化成数组再遍历。读完本文，你将掌握这一"输入归一化"范式、Array.prototype.concat的底层语义与边界行为，并能直接把它应用到 DOM 批量操作、工具函数设计等真实场景中。

一、问题：为什么需要"一个方法吃两种入参"

在日常开发中，我们经常面对这样的 API 设计难题：某个业务方法有时需要处理一个元素，有时需要处理一批元素。如果不加处理，常见的做法是写两个方法，或者在使用侧强行if (Array.isArray(x))分支，这会造成大量重复代码。

jstips 原帖给出了一个非常形象的类比：jQuery 的很多方法就是这样工作的——例如css方法，传入一个选择器时，它会修改所有匹配到的元素，而不是只改第一个。也就是说，jQuery 把"集合操作"作为默认语义，单个元素只是"长度为 1 的集合"的特例。这种设计让调用方无需关心自己拿到的是单个节点还是节点列表。

本文要解决的问题正是：让你的自定义函数拥有同样的宽容度——传入字符串"cactus"和传入数组["cactus", "bear", "potato"]，都能被同一套逻辑正确处理。

二、核心一行代码：[].concat(words || [])

原帖给出的解法非常精简——不需要判断类型，只需要把入参"拼进一个空数组"：

var elements = [].concat(words || []);

这一行同时完成了两件事：

1. 归一化：Array.prototype.concat接受数组，也接受单个元素。传入"cactus"时结果是["cactus"]；传入["cactus", "bear"]时结果是["cactus", "bear"]。无论哪种入参，elements最终都是一个真正的数组。
2. 兜底防错：words || []保证了当参数为undefined、null或干脆没有传参时，elements退化为空数组[]，从而避免了对undefined调用.toUpperCase()之类的TypeError。

值得注意的是，这一技巧依赖concat的一个关键特性：它返回一个全新数组，而不会修改原数组。因此它可以安全地包裹任意来源的数据，不用担心污染调用方的原数组。

三、完整示例：printUpperCase

原帖给出了完整可运行示例。下面这段代码定义了printUpperCase，它现在可以同时接受单个单词或单词数组：

function printUpperCase(words) { var elements = [].concat(words || []); for (var i = 0; i < elements.length; i++) { console.log(elements[i].toUpperCase()); } }

调用与输出：

printUpperCase("cactus"); // => CACTUS printUpperCase(["cactus", "bear", "potato"]); // => CACTUS // BEAR // POTATO

可以看到：传入单个字符串时，它被包成单元素数组后照常遍历；传入数组时，三个元素依次被转成大写输出。printUpperCase现在已准备好接受"单个节点或一组节点"作为参数，同时避免了不传参数时抛出TypeError的隐患——这正是原帖要表达的核心收益。

四、Array.prototype.concat的底层语义

要真正用好这个技巧，需要准确理解concat的三个底层行为：

1. 展开行为：只展开一层

concat会把传入的数组参数的元素逐个追加到结果中，但只展开一层，不会递归展开。这一点在 jstips 仓库的另一篇 tip _posts/en/javascript/2016-02-07-flattening-multidimensional-arrays-in-javascript.md 中有更详细的论述——该文总结了 5 种扁平化多维数组的方法，其中第一种就是：

var myNewArray = [].concat.apply([], myArray);

以及 ES6 版本的展开符写法：

var myNewArray4 = [].concat(...myArray);

也就是说，concat天然具备"单层扁平化"能力——把嵌套数组摊平一层——这正是"单个元素与数组统一处理"得以成立的底层机制。但要注意：如果入参是更深层的嵌套数组（如[[1, 2], [3, 4]]），[].concat只能摊平到[1, 2, 3, 4]这一层；若要处理任意深度的嵌套，需要flat(Infinity)或递归方案。

2. 非破坏性：返回新数组

concat不会修改调用它的数组，而是返回合并后的新数组。这与push、unshift、splice等原地修改的方法形成对比。仓库另一篇 tip _posts/en/javascript/2015-12-29-insert-item-inside-an-array.md 在讨论"向数组插入元素"时也对比了arr2 = arr.concat([6])（返回新数组）与arr.push(6)（修改原数组）两种路径，可见concat的"返回新数组"语义在数组操作中是一以贯之的。

3. 参数个数不限

concat可以接受任意多个参数，且每个参数都可以是数组或单值。利用这一点，仓库的 _posts/en/javascript/2016-01-19-safe-string-concatenation.md 展示了''.concat(one, two, three)这种"安全的字符串拼接"技巧——避免+运算符因类型隐式转换产生意外结果（例如1 + 2 + '3'得到"33"而非"123"）。同一个concat方法族（数组版与字符串版）在仓库里被反复用于消除隐式类型歧义，这也侧面印证了"用 concat 统一输入"是社区公认的稳健写法。

五、边界情况与注意事项

1. 不传参 / 传undefined/ 传null

words || []覆盖了这三种情况。但要注意||的语义是"真值判断"：如果调用方显式传入0、''、false等假值，它们同样会被[]替换。对printUpperCase这类方法来说，假值输入本就无意义，行为是合理的；但如果你要处理的对象可能合法地等于假值（例如数字0），则需要改用words == null ? [] : ...之类的空值判断，而不是||。

2. 传入类数组对象

concat只认识真正的数组（以及Symbol.isConcatSpreadable标记为可展开的对象）。如果传入arguments或document.querySelectorAll()返回的NodeList这类类数组对象，[].concat(nodeList)得到的是[nodeList]——一个把整个 NodeList 当作单个元素包起来的数组，而不是把里面的节点逐个展开。处理 DOM 集合时，通常需要先Array.prototype.slice.call(nodeList)或Array.from(nodeList)转成真数组，再交给统一逻辑处理。这一点在 _posts/en/javascript/2016-01-08-converting-a-node-list-to-an-array.md 中有专门讨论。

3. 深层嵌套

如前所述，concat只做单层展开。若业务中确实需要"任意深度拍平 + 单元素兼容"，可以组合flat(Infinity)或在归一化后再调用扁平化方法。

六、现代 ES6+ 替代方案对比

原帖写于 ES5 时代，用的是var和concat。在现代代码中，同一诉求也有多种等价写法：

// 方案 A：concat 归一化（原帖思路） function printUpperCase(words) { var elements = [].concat(words || []); // ... } // 方案 B：Array.isArray 显式分支 function printUpperCase(words) { var elements = Array.isArray(words) ? words : [words]; // ... } // 方案 C：ES6 展开符 + 条件 function printUpperCase(words) { var elements = words == null ? [] : (Array.isArray(words) ? [...words] : [words]); // ... }

各方案的取舍：

• 方案 A（[].concat）：代码最短，一行同时完成归一化与空值兜底，且天然处理"数组参数"无需分支；代价是||会吞掉所有假值。
• 方案 B（Array.isArray分支）：语义最直白、可读性最强，但多一层条件判断，且需要额外处理空值。
• 方案 C（展开符）：现代风格，但代码反而更长。

从原帖的视角看，方案 A 之所以值得推荐，不只是因为短，更因为它把"单元素是长度为 1 的集合"这个设计意图直接固化在代码里。当然，如果团队追求显式语义，方案 B 也是完全合理的替代。

仓库中还有一个相关的设计模式值得一提：_posts/en/javascript/2016-05-06-use-optional-arguments.md 讨论的是"如何让函数参数可选"，它同样主张用统一的参数处理逻辑（把arguments转成数组后逐个解析）代替为每种调用形态写独立分支。这两篇 tip 一脉相承：与其在调用方做类型判断，不如在函数内部做一次统一的输入归一化。

七、实战场景

场景 1：DOM 批量操作

最常见的落地场景是"单个 DOM 节点 vs 节点数组/NodeList"的统一处理：

function setText(content, nodes) { var targets = [].concat(nodes || []); targets.forEach(function (node) { node.textContent = content; }); } setText('Hello', document.getElementById('title')); // 单个节点 setText('Hello', document.querySelectorAll('.item')); // 多个节点

提醒：如第四节所述，querySelectorAll返回的是 NodeList，属于类数组，[].concat不会展开它。实战中可先Array.from(nodes)再归一化，或在方法内对类数组做一次检测。

场景 2：API 输入归一化

当你的工具函数可能从不同调用方拿到"单值或数组"时，用同一模式统一内部处理，可以让下游逻辑永远只面对数组：

function normalizeTags(tags) { return [].concat(tags || []).filter(Boolean); } normalizeTags('js'); // ['js'] normalizeTags(['js', 'tips']); // ['js', 'tips'] normalizeTags(); // []

场景 3：配合reduce做组合处理

仓库的 _posts/en/javascript/2016-02-17-reminders-about-reduce-function-usage.md 在讲解reduce时，其"累加"示例也大量依赖prev.concat(curr)——同样是利用 concat 的"单层展开 + 返回新数组"语义来持续累积结果。把"输入归一化"与reduce这类函数式工具结合，可以写出非常简洁的批量处理管线。

八、总结

本文围绕 jstips 第 6 期 tip 的核心理念展开，要点如下：

1. 理念：让一个方法同时接受"单个元素"与"元素数组"，参照 jQuerycss的"集合默认语义"，避免为同一逻辑写两套方法。
2. 手法：[].concat(words || [])一行完成"归一化 + 空值兜底"，concat接受数组或单元素、返回新数组、只展开一层。
3. 收益：消除了入参形态差异，顺带规避了不传参数时的TypeError。
4. 边界：注意||对假值的吞并、类数组（NodeList、arguments）不会被自动展开、深层嵌套需要额外扁平化。
5. 演进：ES6+ 时代可用Array.isArray分支或展开符替代，但 concat 写法依然是最简洁的"集合化输入"方案。

这一技巧既适用于 ES5 时代的遗留代码，也完全兼容现代代码风格——它是"统一输入、简化分支"这一设计思想的最小实现，值得在日常工具函数中反复使用。

• 教程