jQuery.makeArray() 方法（长文讲解）

什么是 jQuery.makeArray() 方法？

在前端开发中，我们常常需要将各种非数组的数据结构转换为数组，比如 DOM 集合、类数组对象（arguments、NodeList）或者字符串。这些数据虽然看起来像数组，但并不能使用数组原生的方法，比如 forEach、map、filter 等。这个时候，jQuery 提供了一个非常实用的方法——jQuery.makeArray()。

这个方法的作用就是：将一个非数组对象转换为真正的 JavaScript 数组。它就像是一个“数据转化器”，把那些“看起来像数组但不是数组”的对象，统统变成标准数组，让你可以放心地调用各种数组方法。

想象一下，你在厨房里有一堆食材，有些是散装的（比如米、豆子），有些是装在小盒子里的（比如调料包）。虽然它们都放在一个大篮子里，但你不能直接用“搅拌”这个动作去处理米和豆子，因为它们不是统一的容器。而 jQuery.makeArray() 就像是一个“分装工具”，它把这些散装食材统一放进“碗”里，让你可以自由使用各种厨具。

常见的类数组对象与转换需求

在日常开发中，我们经常会遇到以下几种“类数组”对象：

• arguments：函数内部的参数集合
• NodeList：通过 document.querySelectorAll() 获取的 DOM 元素集合
• HTMLCollection：通过 document.getElementsByTagName() 返回的集合

这些对象虽然有 length 属性，也可以用索引访问元素，但它们没有数组原型链上的方法，比如 forEach、map 等。如果直接调用，会报错。

举个例子：

function test() {
  console.log(arguments); // Arguments { 0: 'a', 1: 'b', 2: 'c' }
  arguments.forEach(function(item) {
    console.log(item);
  });
}

test('a', 'b', 'c');

运行这段代码，你会发现报错：arguments.forEach is not a function。因为 arguments 是类数组，不是真正的数组。

这时，jQuery.makeArray() 就派上用场了。它能帮你把 arguments 转成数组：

function test() {
  // 将 arguments 转为数组
  const args = $.makeArray(arguments);
  console.log(args); // ['a', 'b', 'c']
  args.forEach(function(item) {
    console.log(item); // a, b, c
  });
}

test('a', 'b', 'c');

现在，args 是一个真正的数组，forEach 可以正常运行。

jQuery.makeArray() 的语法与返回值

jQuery.makeArray() 的语法非常简单：

$.makeArray( object )

• object：要转换的对象，可以是任何类型，包括字符串、类数组、数组本身、甚至 null 或 undefined。
• 返回值：一个标准的 JavaScript 数组。

注意：如果传入的是数组，makeArray 会返回一个副本（深拷贝），而不是原数组的引用。

传入不同类型的示例

// 示例 1：传入数组
const arr = [1, 2, 3];
const result1 = $.makeArray(arr);
console.log(result1); // [1, 2, 3]
console.log(result1 === arr); // false（是副本）

// 示例 2：传入字符串
const str = 'hello';
const result2 = $.makeArray(str);
console.log(result2); // ['h', 'e', 'l', 'l', 'o']

// 示例 3：传入 null
const result3 = $.makeArray(null);
console.log(result3); // []

// 示例 4：传入 NodeList
const divs = document.querySelectorAll('div');
const result4 = $.makeArray(divs);
console.log(result4); // [div, div, div]（DOM 元素数组）

📌 提示：$.makeArray() 并不会修改原对象，而是返回一个新的数组，这是安全的操作方式。

实际开发中的典型应用场景

场景 1：处理函数参数（arguments）

在写工具函数时，我们经常需要处理可变参数。arguments 虽然方便，但不能用数组方法。使用 makeArray 可以轻松解决这个问题。

// 一个通用的参数处理函数
function sumAll() {
  // 将 arguments 转为数组
  const numbers = $.makeArray(arguments);
  // 使用 reduce 求和
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumAll(1, 2, 3));     // 6
console.log(sumAll(10, 20));      // 30
console.log(sumAll(5));           // 5

场景 2：处理 DOM 集合

在操作多个 DOM 元素时，querySelectorAll 返回的是 NodeList，不能用 map。makeArray 可以快速转换。

// 假设页面上有多个 class 为 'item' 的 div
const items = document.querySelectorAll('.item');

// 传统方式：使用 for 循环
for (let i = 0; i < items.length; i++) {
  items[i].style.color = 'red';
}

// 使用 makeArray：更简洁
const itemArray = $.makeArray(items);
itemArray.map(function(item) {
  item.style.color = 'blue'; // 每个 item 都变蓝
});

场景 3：字符串拆分为字符数组

有时候我们需要对字符串进行逐字符处理。直接用 split('') 也可以，但 makeArray 更简洁，且对非字符串对象也有容错。

const text = 'JavaScript';

// 方法一：split
const chars1 = text.split('');

// 方法二：makeArray（更通用）
const chars2 = $.makeArray(text);

console.log(chars1); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
console.log(chars2); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

注意事项与使用建议

1. 不要滥用，原生方法已足够

现代 JavaScript 已经提供了 Array.from() 和展开运算符 ...，它们功能更强大、性能更好。

// 替代方案 1：Array.from
const arr1 = Array.from(arguments);

// 替代方案 2：展开运算符（适用于可迭代对象）
const arr2 = [...arguments];

所以，除非你必须兼容老版本浏览器或项目中已大量使用 jQuery，否则建议优先使用原生方法。

2. makeArray 不会深拷贝对象

如果数组中包含对象引用，makeArray 只是浅拷贝。修改新数组中的对象，原对象也会受影响。

const obj = { name: 'Alice' };
const original = [obj];
const copied = $.makeArray(original);

copied[0].name = 'Bob';

console.log(original[0].name); // 'Bob' —— 原对象也被修改了

3. 不要对非可迭代对象使用 makeArray

虽然 makeArray 能处理 null、undefined，但对某些非类数组对象（如普通对象）会返回空数组。

const obj = { a: 1, b: 2 };
console.log($.makeArray(obj)); // [] —— 不会把 key-value 转为数组

这和 Object.values() 或 Object.keys() 不同，使用时需注意。

总结：为什么你需要了解 jQuery.makeArray() 方法？

尽管现代开发中 Array.from() 和展开运算符已经取代了大部分 makeArray 的使用场景，但理解这个方法仍然很有价值。它不仅体现了 jQuery 在早期 JavaScript 生态中“统一差异”的设计哲学，也帮助我们理解“类数组对象”这一常见概念。

在维护老项目、阅读 jQuery 代码、或需要快速兼容多种数据类型时，jQuery.makeArray() 依然是一个实用、可靠的工具。它像一位“老派的翻译官”，把各种不统一的数据格式，统一翻译成数组语言，让开发者可以“用同一种方式说话”。

掌握它，不只是学会一个方法，更是理解了 JavaScript 中“类型转换”和“兼容性设计”的底层思想。在未来的开发中，无论使用 jQuery 还是原生 JS，你都能更从容地应对各种数据结构的挑战。