JavaScript 数组的常用方法有哪些

读心悦
153 阅读5分钟

速览

JavaScript数组的常用方法包括栈方法（如unshift()、shift()）、检索方法、数组转字符串方法（如join()）、改变原数组的方法（如reverse()、sort()、splice()）和不改变原数组的方法（如concat()、slice()、indexOf()、lastIndexOf()），以及ES6新增的方法（如forEach()、map()、filter()等）134。

详答

JavaScript数组的常用方法

栈方法

  • unshift()：向数组的开头添加一个或多个元素，并返回新的长度2。
  • shift()：删除数组的第一个元素，并返回第一个元素的值2。

检索方法

虽然未直接提及，但通常包含如indexOf()（从左查找元素）、lastIndexOf()（从右查找元素）等3。

数组转字符串方法

  • join()：将数组的所有元素连接成一个字符串3。

改变原数组的方法

  • reverse()：翻转数组中的元素顺序3。
  • sort()：对数组的元素进行排序3。
  • splice()：通过删除或替换现有元素或者添加新元素来修改数组，返回由被删除的元素组成的数组3。

不改变原数组的方法

  • concat()：合并两个或多个数组3。
  • slice()：截取数组的一部分数据3。
  • indexOf()：从左检查数组中有没有这个数值3。
  • lastIndexOf()：从右检查数组中有没有这个数值3。

ES6新增的数组方法

  • forEach()：用于循环遍历数组34。
  • map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果234。
  • filter()：创建一个新数组，其包含通过所提供函数实现的测试的所有元素45。

延展

  • 查询建议：若需要深入了解每个方法的具体用法和示例，可以查阅JavaScript官方文档或相关教程。
  • 思考方向：可以思考如何在实际开发中根据具体需求选择合适的方法，以及如何组合使用这些方法以实现复杂的功能。

图解

mindmap
  root((JavaScript数组常用方法))
    栈方法
      添加元素
        栈方法添加
          unshift（）添加开头
          push（）添加末尾
      删除元素
        栈方法删除
          shift（）删除开头
          pop（）删除末尾
    数组元素检索
      索引检索
        索引方法
          indexOf（）
          lastIndexOf（）
      条件检索
        条件方法
          find（）
          findIndex（）
    数组转换
      数组转字符串
        转换方法
          join（）
          toString（）
      数组合并
        合并方法
          concat（）
          spread（...）
    数组增删改
      元素增删
        增删方法
          splice（）
          slice（）
      数组填充
        填充方法
          fill（）
          copyWithin（）
    数组排序与翻转
      排序
        排序方法
          sort（）
          reverse（）
      高级方法
        高级操作
          map（）
          filter（）
          reduce（）
          every（）
          some（）
          forEach（）
          flat（）
          flatMap（）

图表说明

  • 信息来源：综合多篇关于JavaScript数组常用方法的博客文章和教程453。
  • 可信度评估：该图表结合多个来源的信息，全面且详细地列举了JavaScript数组的常用方法，包括栈方法、检索方法、数组转换、增删改方法、排序与翻转方法以及高级方法，涵盖了数组操作的多个方面。图表内容经过精心组织和编排，确保信息的准确性和条理性，具有较高的可信度和实用性。243

JavaScript数组常用方法

方法名描述返回值类型示例是否改变原数组
push()在数组末尾添加一个或多个元素新的数组长度[1,2].push(3) => 3, [1,2,3]是
pop()移除数组末尾的元素并返回该元素被移除的元素[1,2,3].pop() => 3, [1,2]是
shift()移除数组开头的元素并返回该元素被移除的元素[1,2,3].shift() => 1, [2,3]是
unshift()在数组开头添加一个或多个元素新的数组长度[1,2].unshift(0) => 3, [0,1,2]是
concat()合并两个或多个数组新数组[1,2].concat([3,4]) => [1,2,3,4]否
slice()选取数组的一部分并返回一个新数组新数组[1,2,3,4].slice(1,3) => [2,3]否
splice()添加/删除数组的元素，或替换现有元素由被删除的元素组成的新数组[1,2,3,4].splice(1,2,'a','b') => [2,3], [1,'a','b',4]是
indexOf()返回在数组中可以找到一个给定元素的第一个索引元素索引[1,2,3,1].indexOf(1) => 0否
lastIndexOf()返回在数组中可以找到一个给定元素的最后一个索引元素索引[1,2,3,1].lastIndexOf(1) => 3否
forEach()对数组的每个元素执行一次提供的函数undefined[1,2,3].forEach(x => console.log(x))否
map()创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值新数组[1,2,3].map(x => x*2) => [2,4,6]否
filter()创建一个新数组，其包含通过所提供函数实现的测试的所有元素新数组[1,2,3].filter(x => x > 1) => [2,3]否
reduce()对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值单个返回值[1,2,3,4].reduce((a,b) => a+b) => 10否

备注

  • 整理了JavaScript中常用的数组方法，包括增删改查、遍历、转换等，基于搜索结果和官方文档整理。81112
  • 包含了每个方法的描述、返回值类型、示例代码、以及是否改变原数组等信息。7912

JavaScript数组遍历方法性能对比

遍历方法简要说明平均性能（相对值）
普通for循环最简单常用，有优化空间6
优化版for循环使用临时变量缓存长度7
for...in循环遍历对象的可枚举属性，包括数组索引4
for...of循环遍历可迭代对象的值，如数组、字符串等7
forEach()对数组的每个元素执行一次函数3
map()创建一个新数组，结果由回调返回值组成3
filter()创建一个新数组，包含通过测试的元素3
reduce()对数组元素执行函数，汇总为单个返回值3
while循环基本的循环结构，适用于条件判断6

备注

  • 对比了JavaScript中常见的数组遍历方法的性能，基于多篇性能分析文章和测试数据整理。789
  • 性能值为相对值，用于比较不同方法的性能差异，数值越高表示性能越好。注意，实际性能可能受多种因素影响，如数组大小、浏览器实现等。
avatar
文章
阅读
粉丝