JavaScript 数组方法背后的算法-js教程-PHP中文网

首页

web前端

js教程

JavaScript 数组方法背后的算法

Susan Sarandon

Nov 03, 2024 am 07:10 AM

Algorithms Behind JavaScript Array Methods

JavaScript 数组方法背后的算法。

JavaScript 数组带有各种内置方法，允许操作和检索数组中的数据。以下是从大纲中提取的数组方法列表：

concat()
加入()
填充()
包括()
indexOf()
反向()
排序()
拼接()
在()
copyWithin()
平()
Array.from()
findLastIndex()
forEach()
每个()
条目()
值()
toReversed()（创建数组的反向副本而不修改原始数组）
toSorted()（创建数组的排序副本而不修改原始数组）
toSpliced()（创建一个新数组，添加或删除元素，而不修改原始数组）
with()（返回替换了特定元素的数组副本）
Array.fromAsync()
Array.of()
地图()
flatMap()
减少()
reduceRight()
一些()
查找()
findIndex()
findLast()

让我分解一下每个 JavaScript 数组方法所使用的常用算法：

1. concat()

算法：线性追加/合并
时间复杂度：O(n)，其中 n 是所有数组的总长度
内部使用迭代来创建新数组并复制元素

// concat()
Array.prototype.myConcat = function(...arrays) {
  const result = [...this];
  for (const arr of arrays) {
    for (const item of arr) {
      result.push(item);
    }
  }
  return result;
};

2. 加入（）

算法：字符串连接的线性遍历
时间复杂度：O(n)
迭代数组元素并构建结果字符串

// join()
Array.prototype.myJoin = function(separator = ',') {
  let result = '';
  for (let i = 0; i 



<h3>
  
  
  3. 填充（）
</h3>

算法：带赋值的线性遍历
时间复杂度：O(n)
带有赋值的简单迭代

// fill()
Array.prototype.myFill = function(value, start = 0, end = this.length) {
  for (let i = start; i 



<h3>
  
  
  4. 包含()
</h3>

算法：线性搜索
时间复杂度：O(n)
顺序扫描直到找到元素或到达结束

// includes()
Array.prototype.myIncludes = function(searchElement, fromIndex = 0) {
  const startIndex = fromIndex >= 0 ? fromIndex : Math.max(0, this.length + fromIndex);
  for (let i = startIndex; i 



<h3>
  
  
  5.indexOf()
</h3>

算法：线性搜索
时间复杂度：O(n)
从开始顺序扫描直到找到匹配

// indexOf()
Array.prototype.myIndexOf = function(searchElement, fromIndex = 0) {
  const startIndex = fromIndex >= 0 ? fromIndex : Math.max(0, this.length + fromIndex);
  for (let i = startIndex; i 



<h3>
  
  
  6. 反向()
</h3>

算法：两指针交换
时间复杂度：O(n/2)
从开始/结束向内移动元素

// reverse()
Array.prototype.myReverse = function() {
  let left = 0;
  let right = this.length - 1;

  while (left 



<h3>
  
  
  7. 排序（）
</h3>

算法：通常为 TimSort（合并排序和插入排序的混合）
时间复杂度：O(n log n)
现代浏览器使用自适应排序算法

// sort()
Array.prototype.mySort = function(compareFn) {
  // Implementation of QuickSort for simplicity
  // Note: Actual JS engines typically use TimSort
  const quickSort = (arr, low, high) => {
    if (low  {
    const pivot = arr[high];
    let i = low - 1;

    for (let j = low; j 



<h3>
  
  
  8. 拼接（）
</h3>

算法：线性数组修改
时间复杂度：O(n)
就地移动元素并修改数组

// splice()
Array.prototype.mySplice = function(start, deleteCount, ...items) {
  const len = this.length;
  const actualStart = start  0) {
    // Moving elements right
    for (let i = len - 1; i >= actualStart + actualDeleteCount; i--) {
      this[i + shiftCount] = this[i];
    }
  } else if (shiftCount 



<h3>
  
  
  9. 在()
</h3>

算法：直接索引访问
时间复杂度：O(1)
带有边界检查的简单数组索引

// at()
Array.prototype.myAt = function(index) {
  const actualIndex = index >= 0 ? index : this.length + index;
  return this[actualIndex];
};

10. 复制（）

算法：块内存复制
时间复杂度：O(n)
内存复制和移位操作

// copyWithin()
Array.prototype.myCopyWithin = function(target, start = 0, end = this.length) {
  const len = this.length;
  let to = target 



<h3>
  
  
  11. 平（）
</h3>

算法：递归深度优先遍历
时间复杂度：单层为 O(n)，深度 d 为 O(d*n)
递归展平嵌套数组

// flat()
Array.prototype.myFlat = function(depth = 1) {
  const flatten = (arr, currentDepth) => {
    const result = [];
    for (const item of arr) {
      if (Array.isArray(item) && currentDepth 



<h3>
  
  
  12. 数组.from()
</h3>

算法：迭代和复制
时间复杂度：O(n)
从可迭代创建新数组

// Array.from()
Array.myFrom = function(arrayLike, mapFn) {
  const result = [];
  for (let i = 0; i 



<h3>
  
  
  13. 查找最后一个索引()
</h3>

算法：反向线性搜索
时间复杂度：O(n)
从末尾开始顺序扫描直到找到匹配项

// findLastIndex()
Array.prototype.myFindLastIndex = function(predicate) {
  for (let i = this.length - 1; i >= 0; i--) {
    if (predicate(this[i], i, this)) return i;
  }
  return -1;
};

14. forEach()

算法：线性迭代
时间复杂度：O(n)
带有回调执行的简单迭代

// forEach()
Array.prototype.myForEach = function(callback) {
  for (let i = 0; i 



<h3>
  
  
  15. 每个（）
</h3>

<p>算法：短路线性扫描<br>
时间复杂度：O(n)<br>
在第一个错误条件下停止<br>
</p><pre class="brush:php;toolbar:false">// concat()
Array.prototype.myConcat = function(...arrays) {
  const result = [...this];
  for (const arr of arrays) {
    for (const item of arr) {
      result.push(item);
    }
  }
  return result;
};

16. 条目()

算法：迭代器协议实现
时间复杂度：创建 O(1)，完整迭代 O(n)
创建迭代器对象

// join()
Array.prototype.myJoin = function(separator = ',') {
  let result = '';
  for (let i = 0; i 



<h3>
  
  
  17. 值（）
</h3>

算法：迭代器协议实现
时间复杂度：创建 O(1)，完整迭代 O(n)
为值创建迭代器

// fill()
Array.prototype.myFill = function(value, start = 0, end = this.length) {
  for (let i = start; i 



<h3>
  
  
  18. toReversed()
</h3>

算法：反向迭代复制
时间复杂度：O(n)
创建新的反转数组

// includes()
Array.prototype.myIncludes = function(searchElement, fromIndex = 0) {
  const startIndex = fromIndex >= 0 ? fromIndex : Math.max(0, this.length + fromIndex);
  for (let i = startIndex; i 



<h3>
  
  
  19. toSorted()
</h3>

算法：复制然后 TimSort
时间复杂度：O(n log n)
使用标准排序创建排序副本

// indexOf()
Array.prototype.myIndexOf = function(searchElement, fromIndex = 0) {
  const startIndex = fromIndex >= 0 ? fromIndex : Math.max(0, this.length + fromIndex);
  for (let i = startIndex; i 



<h3>
  
  
  20. toSpliced()
</h3>

算法：修改复制
时间复杂度：O(n)
创建修改后的副本

// reverse()
Array.prototype.myReverse = function() {
  let left = 0;
  let right = this.length - 1;

  while (left 



<h3>
  
  
  21. 与()
</h3>

算法：单次修改的浅拷贝
时间复杂度：O(n)
创建更改了一个元素的副本

// sort()
Array.prototype.mySort = function(compareFn) {
  // Implementation of QuickSort for simplicity
  // Note: Actual JS engines typically use TimSort
  const quickSort = (arr, low, high) => {
    if (low  {
    const pivot = arr[high];
    let i = low - 1;

    for (let j = low; j 



<h3>
  
  
  22. Array.fromAsync()
</h3>

算法：异步迭代和收集
时间复杂度：O(n) 异步操作
处理承诺和异步迭代

// splice()
Array.prototype.mySplice = function(start, deleteCount, ...items) {
  const len = this.length;
  const actualStart = start  0) {
    // Moving elements right
    for (let i = len - 1; i >= actualStart + actualDeleteCount; i--) {
      this[i + shiftCount] = this[i];
    }
  } else if (shiftCount 



<h3>
  
  
  23. 数组.of()
</h3>

算法：直接创建数组
时间复杂度：O(n)
从参数创建数组

// at()
Array.prototype.myAt = function(index) {
  const actualIndex = index >= 0 ? index : this.length + index;
  return this[actualIndex];
};

24. 地图（）

算法：变换迭代
时间复杂度：O(n)
使用转换后的元素创建新数组

// copyWithin()
Array.prototype.myCopyWithin = function(target, start = 0, end = this.length) {
  const len = this.length;
  let to = target 



<h3>
  
  
  25. 平面地图()
</h3>

算法：地图展平
时间复杂度：O(n*m)，其中 m 是平均映射数组大小
结合了映射和展平

// flat()
Array.prototype.myFlat = function(depth = 1) {
  const flatten = (arr, currentDepth) => {
    const result = [];
    for (const item of arr) {
      if (Array.isArray(item) && currentDepth 



<h3>
  
  
  26. 减少（）
</h3>

算法：线性累加
时间复杂度：O(n)
带回调的顺序累加

// Array.from()
Array.myFrom = function(arrayLike, mapFn) {
  const result = [];
  for (let i = 0; i 



<h3>
  
  
  27.reduceRight()
</h3>

算法：反向线性累加
时间复杂度：O(n)
从右到左累积

// findLastIndex()
Array.prototype.myFindLastIndex = function(predicate) {
  for (let i = this.length - 1; i >= 0; i--) {
    if (predicate(this[i], i, this)) return i;
  }
  return -1;
};

28. 一些（）

算法：短路线性扫描
时间复杂度：O(n)
在第一个真实条件下停止

// forEach()
Array.prototype.myForEach = function(callback) {
  for (let i = 0; i 



<h3>
  
  
  29. 查找（）
</h3>

算法：线性搜索
时间复杂度：O(n)
顺序扫描直到条件满足

// every()
Array.prototype.myEvery = function(predicate) {
  for (let i = 0; i 



<h3>
  
  
  30. 查找索引()
</h3>

算法：线性搜索
时间复杂度：O(n)
顺序扫描匹配条件

// entries()
Array.prototype.myEntries = function() {
  let index = 0;
  const array = this;

  return {
    [Symbol.iterator]() {
      return this;
    },
    next() {
      if (index 



<h3>
  
  
  31. 查找最后一个()
</h3>

算法：反向线性搜索
时间复杂度：O(n)
从末尾开始顺序扫描

// concat()
Array.prototype.myConcat = function(...arrays) {
  const result = [...this];
  for (const arr of arrays) {
    for (const item of arr) {
      result.push(item);
    }
  }
  return result;
};

我已经提供了您请求的所有 31 种数组方法的完整实现。

？在 LinkedIn 上与我联系：

让我们一起深入了解软件工程的世界！我定期分享有关 JavaScript、TypeScript、Node.js、React、Next.js、数据结构、算法、Web 开发等方面的见解。无论您是想提高自己的技能还是在令人兴奋的主题上进行合作，我都乐意与您联系并与您一起成长。

跟我来：Nozibul Islam

以上是JavaScript 数组方法背后的算法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏游戏编程的“Hello world”，现在有了jQuery版本。源码 jQuery疯狂填词游戏这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。我们将构建一个带有分层图像的标题横幅，从而创造出令人惊叹的视觉深度。更新的插件可与JQuery 1.6.4及更高版本一起使用。下载

Matter.js入门：简介Mar 08, 2025 am 12:53 AM

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能，例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流浏览器。此外，它也适用于移动设备，因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中，我将介绍此库的基础知识，包括其安装和用法，并提供一