把数组添加到数组：给 call 和 apply 技巧拍手！

前端

2023-12-19 19:36:19

在 JavaScript 中驾驭数组操作：深入了解 call 和 apply

JavaScript 是一门强大的语言，其灵活性和通用性使其成为开发人员的理想选择。在处理数组时，call 和 apply 这两个函数脱颖而出，它们为数组操作提供了高效且优雅的方式。

call 和 apply 的作用原理

call 和 apply 的核心功能是调用函数并设置其上下文。上下文定义了函数的调用方式，以及调用时谁来充当主语。这两个函数接受两个参数：

要调用的函数
上下文对象

call 和 apply 的区别

虽然 call 和 apply 的功能相似，但它们在参数处理方式上略有不同：

call: 接受多个参数，除了上下文对象之外，还可以传递额外的参数给函数。
apply: 只接受一个参数，该参数是一个数组，其中包含要传递给函数的所有参数。

利用 call 和 apply 轻松操作数组

添加元素

为了向数组中添加元素，通常使用 concat 函数。但是，当涉及到大型数组时，concat 的效率会受到影响。这时，call 和 apply 就派上用场了。通过调用数组的 push() 方法，并使用 call 或 apply 指定要添加的元素，可以轻松地将元素添加到数组中。

示例：

const arr = [1, 2, 3];
arr.push.call(arr, 4); // 使用 call 添加元素
arr.push.apply(arr, [5, 6]); // 使用 apply 添加元素
console.log(arr); // 输出： [1, 2, 3, 4, 5, 6]

复制元素

使用 slice 函数可以复制数组中的元素，从而创建新数组。但是，如果需要将元素复制到另一个数组中，可以使用 call 和 apply。通过调用目标数组的 push() 或 concat() 方法，并使用 call 或 apply 传递源数组的 slice() 方法作为参数，可以轻松地复制元素。

示例：

const arr1 = [1, 2, 3];
const arr2 = [];
arr2.push.apply(arr2, arr1.slice(0, 2)); // 使用 apply 复制元素
console.log(arr2); // 输出： [1, 2]

插入元素

splice 函数不仅可以删除数组元素，还可以插入新元素。使用 call 或 apply，可以指定要插入元素的位置。

示例：

const arr = [1, 2, 3];
arr.splice.call(arr, 1, 0, 4); // 使用 call 插入元素
console.log(arr); // 输出： [1, 4, 2, 3]

交替合并数组

有时，需要交替合并两个数组中的元素。forEach 函数可以轻松实现这一操作。通过遍历源数组中的每个元素，并使用 call 或 apply 将它们添加到目标数组，可以创建交替合并的数组。

示例：

const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];
const result = [];
arr1.forEach(function(element) {
  result.push.call(result, element);
});
arr2.forEach(function(element) {
  result.push.call(result, element);
});
console.log(result); // 输出： [1, 2, 3, 4, 5, 6]