当前位置:首页 > JavaScript

js includes实现原理

2026-04-07 13:01:36JavaScript

JavaScript includes 方法实现原理

includes 方法是 JavaScript 中用于检查数组或字符串是否包含特定元素的工具。其实现原理可以分解为以下几个关键点:

数组的 includes 方法

数组的 includes 方法用于检查数组中是否包含某个值。其实现逻辑如下:

js includes实现原理

  • 遍历数组的每个元素,从起始索引(默认为 0)开始。
  • 使用严格相等(===)比较目标值与当前元素。
  • 如果找到匹配项,立即返回 true;否则遍历结束后返回 false

示例代码实现:

js includes实现原理

Array.prototype.customIncludes = function(searchElement, fromIndex = 0) {
  const length = this.length;
  fromIndex = fromIndex >= 0 ? fromIndex : Math.max(0, length + fromIndex);

  for (let i = fromIndex; i < length; i++) {
    if (this[i] === searchElement) {
      return true;
    }
  }
  return false;
};

字符串的 includes 方法

字符串的 includes 方法用于检查字符串中是否包含某个子串。其实现逻辑如下:

  • 从起始索引(默认为 0)开始搜索子串。
  • 如果子串长度加上起始索引超过字符串长度,直接返回 false
  • 使用逐字符匹配的方式检查子串是否存在。

示例代码实现:

String.prototype.customIncludes = function(searchString, position = 0) {
  const str = this;
  const searchLength = searchString.length;
  const strLength = str.length;

  position = position >= 0 ? position : Math.max(0, strLength + position);
  if (position + searchLength > strLength) {
    return false;
  }

  for (let i = position; i <= strLength - searchLength; i++) {
    let match = true;
    for (let j = 0; j < searchLength; j++) {
      if (str[i + j] !== searchString[j]) {
        match = false;
        break;
      }
    }
    if (match) {
      return true;
    }
  }
  return false;
};

注意事项

  • includes 方法对 NaN 的处理与普通严格相等不同。数组的 includes 可以正确识别 NaN,而 indexOf 不能。
  • 字符串的 includes 方法区分大小写。
  • 性能上,includes 的时间复杂度为 O(n),但对于大型数据可能需要优化。

标签: 原理js
分享给朋友:

相关文章

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

vue插件实现原理

vue插件实现原理

Vue 插件实现原理 Vue 插件的核心是通过扩展 Vue 的功能,提供全局或实例级别的能力。插件可以添加全局方法、指令、混入(mixin)、组件等。 插件的基本结构 一个 Vue 插件通常是一个对…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js放大镜的实现原理

js放大镜的实现原理

放大镜效果的基本原理 放大镜效果的核心是通过鼠标移动事件获取当前光标位置,动态计算放大区域的显示范围和比例。通常需要两个元素:原图容器和放大镜显示的容器。当鼠标在原图上移动时,放大镜容器显示对应位置的…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

vue动画实现原理

vue动画实现原理

Vue动画实现原理 Vue的动画系统基于CSS过渡和动画,结合Vue的响应式系统,提供声明式的方式管理元素进入/离开的动画效果。核心原理分为以下几个部分: 过渡类名自动应用 Vue在元素插入/删除时…