JavaScript中的filter方法和原数组的改变|极客笔记

JavaScript中的filter方法和原数组的改变

1. 简介

在JavaScript中，数组是一种常见的数据结构，用于存储一系列的元素。而filter方法是数组的一个内置方法，用于筛选出符合条件的元素，并返回一个新的数组。

本文将详细讨论filter方法的使用以及是否会改变原始数组。

2. filter方法的语法

filter方法的语法如下所示：

array.filter(callback(element[, index[, array]])[, thisArg])

其中，array表示要操作的原始数组，callback表示一个用于测试数组元素的函数，element表示当前正在被处理的元素，index表示当前元素在数组中的索引，array表示正在被遍历的数组。另外，thisArg是一个可选参数，用于指定在执行callback时使用的this值。

callback函数接收三个参数，根据传入的条件判断是否保留当前元素。如果callback返回true，则当前元素会被保留，否则会被过滤掉。

3. filter方法的使用

下面通过一些实际的示例来说明filter方法的使用。

示例1：筛选出数组中大于10的元素

const numbers = [5, 10, 15, 20, 25];

const filteredNumbers = numbers.filter((number) => {
  return number > 10;
});

console.log(filteredNumbers);

输出：

[15, 20, 25]

示例2：筛选出数组中偶数元素

const numbers = [1, 2, 3, 4, 5, 6];

const filteredNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(filteredNumbers);

输出：

[2, 4, 6]

4. 是否会改变原数组

接下来，我们来讨论filter方法是否会改变原始数组。

通过查看MDN文档，我们可以得到以下信息：

filter 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

从这段描述可以看出，filter方法不会改变原始数组，而是返回一个新的数组。

为了验证这个说法，我们来进行一些实验。

实验1：验证filter方法不会改变原数组

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = numbers.filter((number) => {
  return number > 2;
});

console.log(numbers);
console.log(filteredNumbers);

输出：

[1, 2, 3, 4, 5]
[3, 4, 5]

从输出可以看出，原始数组numbers没有发生改变，而是生成了一个新的数组filteredNumbers。

实验2：验证原始数组仍然可通过索引访问

const numbers = [1, 2, 3, 4, 5];

numbers.filter((number) => {
  return number > 2;
});

console.log(numbers[0]);

输出：

从输出可以看出，尽管使用了filter方法，原始数组依然可以通过索引访问。

5. 进一步理解filter方法的实现

为了更好地理解filter方法的实现机制，我们可以用一个简单的示例来模拟filter方法的效果。

function customFilter(array, callback) {
  const filteredArray = [];

  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      filteredArray.push(array[i]);
    }
  }

  return filteredArray;
}

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = customFilter(numbers, (number) => {
  return number > 2;
});

console.log(numbers);
console.log(filteredNumbers);

输出：