从V8源码解读JS数组方法底层实现（三）：filter

2024-01-27 02:29:58

对于程序员来说，理解基础数据结构的底层实现机制至关重要，因为它能帮助我们深入了解编程语言的内部运作，并编写出更高效、更可靠的代码。在这一系列文章中，我们将从 V8 引擎的源代码角度，逐一剖析 JavaScript 数组的各种方法。今天，我们把目光聚焦在 filter 方法上。

前言

filter 方法是 JavaScript 数组内置的方法之一，它可以根据给定的过滤函数，从数组中创建一个包含通过过滤条件元素的新数组。换句话说，filter 方法返回一个满足指定条件的所有元素的新数组，而不会改变原数组。

ECMA 规范中的 filter 方法

根据 ECMA 规范，filter 方法的语法如下：

filter(callbackfn, thisArg)

其中：

callbackfn 是一个函数，该函数接受三个参数：
- value 当前数组元素的值
- index 当前数组元素的索引
- array 原数组本身
thisArg 可选，指定 callbackfn 中的 this 值

filter 方法的目的是创建一个新数组，其中包含通过过滤函数 callbackfn 测试为 true 的所有元素。

V8 源码中的 filter 方法

在 V8 引擎中，filter 方法的实现位于 src/js/array.js 文件中。代码如下：

Handle<JSArray> JSArray::Filter(Handle<JSFunction> callback,
                                    Handle<Object> this_arg) {
  // 1. 获取原数组长度
  uint32_t len = Length();

  // 2. 创建一个新数组，用于存放过滤后的元素
  Handle<JSArray> result = JSArray::New(isolate(), len);

  // 3. 遍历原数组
  for (uint32_t i = 0; i < len; i++) {
    // 4. 获取当前元素
    Handle<Object> element = Get(i);

    // 5. 调用过滤函数，判断是否满足过滤条件
    Handle<Object> value;
    {
      DisallowJavascriptExecution no_callback(isolate());
      MaybeHandle<Object> maybe_value =
          Execution::Call(isolate(), callback, this_arg, 1, &element);
      if (!maybe_value.ToHandle(&value)) return Handle<JSArray>();
    }

    // 6. 如果满足过滤条件，将元素添加到新数组
    if (value->BooleanValue(isolate())) {
      result->Set(i, element);
    }
  }

  // 7. 返回过滤后的新数组
  return result;
}

算法解析

V8 中 filter 方法的实现采用了朴素的遍历算法：

获取原数组长度 ：首先，获取原数组的长度，这将作为新数组的大小。
创建新数组 ：创建一个新数组，用于存放过滤后的元素，其大小与原数组相同。
遍历原数组 ：使用 for 循环遍历原数组的每个元素。
获取当前元素 ：在每次迭代中，获取当前正在处理的元素。
调用过滤函数 ：调用过滤函数 callbackfn，并传入当前元素、索引和原数组作为参数。过滤函数返回一个布尔值，表示该元素是否满足过滤条件。
判断是否满足过滤条件 ：如果过滤函数返回 true，则表示该元素满足过滤条件，将其添加到新数组中。否则，跳过该元素。
返回新数组 ：遍历完成后，返回包含所有通过过滤条件的元素的新数组。

优化策略

为了提高 filter 方法的性能，V8 引擎采用了一些优化策略：

惰性求值 ：filter 方法不会立即执行过滤函数，而是等到访问新数组时才执行。这可以避免不必要的计算，尤其是当新数组只被部分使用时。
内联过滤函数 ：如果过滤函数是一个简单的箭头函数，V8 引擎可能会将过滤函数内联到循环中。这可以消除函数调用的开销。
使用 SIMD 指令 ：在支持 SIMD 指令的平台上，V8 引擎可能会使用 SIMD 指令并行处理过滤操作。这可以显著提高过滤大量元素时的性能。

实例

以下是一个使用 filter 方法的示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]