JavaScript数组方法看这一篇就够了

1,668 阅读4分钟

这是我参与更文挑战的第15天,活动详情查看 更文挑战

汇总了JavaScript数组中常用的一些方法,并且按照增、删、该等用途进行了分类,涵盖了日常开发的大部分场景,赶紧收藏起来吧!

push-尾部添加

在尾部添加一个或多个元素,返回数组的新长度。

image.png

unshift-头部添加

在头部添加一个或多个元素,并返回数组的新长度。

image.png

pop-尾部删除

从尾部删除一个元素,并返回该元素。

image.png

shift-头部删除

从头部删除一个元素,并返回该元素。

image.png

splice-添加替换删除

添加、删除、替换元素。会改变原数组。

arrayObject.splice(index,howmany,item1,.....,itemX)

image.png

image.png

find-按函数查找

找到第一个满足检测函数条件的元素,并返回该元素,没找到则返回 undefined。

image.png

image.png

findIndex-按函数查找

找到第一个满足检测函数条件的元素,并返回该元素索引。找不到返回-1。

image.png

image.png

indexOf-按元素值查找

查找元素并返回元素索引值。

image.png

找不到返回-1 image.png

第二个参数表示查找的起始位置 image.png

lastIndexOf-按元素值查找

从后向前查找元素并返回元素索引值,找不到返回 -1。

image.png

第二个参数表示查找的起始位置 image.png

排序

sort-排序

对数组的元素进行排序,注意,数组在原数组上进行排序,不生成副本。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

image.png

如果想按照其他标准进行排序,就需要提供比较函数。

image.png

reverse-反序

倒置数组,并返回新数组。会改变原数组。

image.png

合并

join-合并成字符串

合并数组中所有元素成为字符串并返回。 image.png

concat-合并成数组

合并两个或多个数组,返回一个全新数组,原数组不变。

image.png

image.png

遍历

forEach

遍历数组中的元素,并执行回调函数。

array.forEach(function(currentValue, index, arr), thisValue)

image.png

示例:

let arr = ['a','b','c']
arr.forEach(function(currentValue, index, arr){
    console.log('currentValue',currentValue)
    console.log('index',index)
    console.log('arr',arr)
})

image.png

检测

includes-值包含检测

判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true,否则返回 false。

string.includes(searchvalue, start)

image.png

查找字符串是否包含Axjy

image.png

从第6个索引位置查找

image.png

some-函数包含检测

检测数组中是否有元素可以通过检测函数验证,该方法会依次执行数组的每个元素。

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测
  • 如果没有满足条件的元素,则返回false。
array.some(function(currentValue,index,arr),thisValue)

image.png

image.png

image.png

every-函数完全检测

检测数组中是否所有元素都可以通过检测函数验证。

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。
array.every(function(currentValue,index,arr), thisValue)

image.png

image.png

image.png

其他

filter-过滤函数

创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)

image.png

slice-截取数组

按参数begin 和 end 截取数组,不改变原数组。

image.png

map-映射

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,不会改变原始数组。

array.map(function(currentValue,index,arr), thisValue)

返回一个数组,数组中元素为原始数组的2倍。 image.png

copyWithin-内部复制

用于从数组的指定位置拷贝元素到数组的另一个指定位置中,不改变原数组长度。

array.copyWithin(target, start, end)

image.png

复制数组的前面两个元素到后面两个元素上。 image.png

fill-填充函数

将一个固定值替换数组的元素。

array.fill(value, start, end)

image.png

使用固定值填充数组

image.png

批量替换指定位置

image.png

image.png

结语

🍒 完篇不代表结束,每篇文章都会持续更新完善补充,所以入股不亏哟!


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 不能不知道的15 个JavaScript数组实用技巧

👉 JavaScript高阶函数(map/reduce/filter/sort)详解与应用

👉 JavaScript干净编码的最佳实践

👉 JavaScript深拷贝和浅拷贝看这篇就够了