数组方法总结

js数组身上有很多方法,赶在春招之前,今天我们来一起复习下这些方法

push

向数组的末尾添加一个或多个元素,影响原数组

bash 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.push('e')

console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ]

pop

删除数组的最后一个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.pop()

console.log(arr); // [ 'a', 'b', 'c' ]

unshift

向数组的开头添加一个或多个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.unshift('A')

console.log(arr); // [ 'A', 'a', 'b', 'c', 'd' ]

shift

删除数组的第一个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.shift()

console.log(arr); // [ 'b', 'c', 'd' ]

indexOf

从左到右查看数组是否存在这个元素,有就返回它的第一个下标,没有就返回-1

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'c']

console.log(arr.indexOf('c')); // 2
console.log(arr.indexOf('f')); // -1

lastIndexOf

从右到左查看数组是否存在这个元素,有就返回它的第一个下标,没有就返回-1

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'c']

console.log(arr.lastIndexOf('c')); // 4
console.log(arr.lastIndexOf('f')); // -1

includes

判断数组是否存在指定元素,有就返回true,否则返回false

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

console.log(arr.includes('a')); // true
console.log(arr.includes('f')); // false

concat

拼接两个数组,不影响原数组,需要新数组接收

bash 复制代码
let arr = ['a', 'b', 'c']
let arr2 = ['A', 'B', 'C']

let newArr = arr.concat(arr2)

console.log(newArr); // [ 'a', 'b', 'c', 'A', 'B', 'C' ]

join

将数组所有元素按照填充规则连接成一个字符串,不影响原数组,需要新参数接收

ini 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']
let arr2 = ['hello', 'world', 'dolphin']

let str = arr.join('')
let str2 = arr2.join(',')

console.log(str); // abcde
console.log(str2); // hello,world,dolphin

fill

对数组填充值,比如下面迅速创建一个三个元素均为0的数组,影响原数组

javascript 复制代码
var arr = new Array(3).fill(0)

console.log(arr) // [ 0, 0, 0 ]

reverse

颠倒数组,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.reverse()

console.log(arr); // [ 'e', 'd', 'c', 'b', 'a' ]

sort

对数组元素进行排序,默认按照unicode顺序排序,影响原数组

0~9对应的unicode十进制为48-57

A~Z对应的unicode十进制为65-90

a~z对应的unicode十进制为97-122

scss 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort()

console.log(arr); // [ 1, 2, 3, 4, 5 ]

接收一个回调,a-b对应默认的顺序,升序

css 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort((a, b) => {
    return a - b
})

console.log(arr); // [ 1, 2, 3, 4, 5 ]

b-a对应的逆序

css 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort((a, b) => {
    return b - a
})

console.log(arr); // [ 5, 4, 3, 2, 1 ]

slice

根据下标区间截取数组,左闭右开,若是一个参数,则从左边开始截取到最后一位,不影响原数组,需要新数组接收

bash 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

let newArr = arr.slice(1, 3)
let newArr2 = arr.slice(1)

console.log(newArr); // [ 'b', 'c' ]
console.log(newArr2); // [ 'b', 'c', 'd', 'e' ]

splice

根据下标删除数组元素,第二个参数代表从下标位置开始删除几个,影响原数组

scss 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.splice(1, 3) // 从下标为1的位置删除3个

console.log(arr); // [ 'a', 'e' ]

后面的参数代表删除后插入的元素

bash 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.splice(1, 3, 'dolphin')

console.log(arr); //[ 'a', 'dolphin', 'e' ]

toString

将数组转换成字符串,数组元素之间以,隔开

ini 复制代码
let arr = ['apple', 'watch']

let str = arr.toString()

console.log(str); // apple,watch

forEach

遍历数组,接受一个回调,回调三个参数:数组的每一项,下标,数组

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.forEach((item) => {
    console.log(item); // a b c d e
})

reduce

对数组的每个元素执行指定的函数,并将结果汇总为一个返回值,接收的回调第一个参数为累计值,第二个为当前值,返回累计值,不影响原数组,需要新参数来接收

javascript 复制代码
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => {
    return a + b
})

console.log(sum); // 15

map

通过对每个元素调用指定函数来创建一个新数组,不影响原数组,需要新数组接收

javascript 复制代码
let arr = [1, 2, 3, 4]

let newArr = arr.map((item) => {
    return item + 1
})

console.log(newArr); // [ 2, 3, 4, 5 ]

filter

过滤出符合条件的元素,不会影响原数组,需要新数组接收

javascript 复制代码
let arr = [1, 2, 3, 4]

let newArr = arr.filter((item) => {
    return item >= 2
})

console.log(newArr); // [ 2, 3, 4 ]

some

查看数组中是否至少有一项元素满足回调的条件,有则返回true,否则返回false

ini 复制代码
let arr = [1, 3, 5]

let flag = arr.some((item) => {
    return item % 2 === 0
})

console.log(flag); // false

find

返回数组中第一个通过回调条件的元素

ini 复制代码
let arr = [1, 2, 3, 4, 5, 6]

let flag = arr.find((item) => {
    return item % 2 === 0
})

console.log(flag); // 2

flat

扁平化数组,参数为减去的维度,默认为1,比如3维,参数为2,最终flat为1维,想要最终直接变成1维,可放入Infinity。不影响原数组,需要新数组来接收

ini 复制代码
var arr = [1, [2, [3, 4]]]

var newArr = arr.flat(2)

console.log(newArr) // [ 1, 2, 3, 4 ]

下面顺带讲解几个字符串的方法

replace

查找匹配的字符串然后用指定的字符串替换它,不影响原字符串,需要新参数来接收

ini 复制代码
let str = 'apple watch'

let newStr = str.replace('apple', 'Huawei')

console.log(newStr) // Huawei watch

split

按照指定规则使字符串变成数组。不影响原字符串,需要新参数来接收

ini 复制代码
let str = 'apple watch'

let newStr = str.split(' ')

console.log(newStr) // [ 'apple', 'watch' ]

最后

数组的这些方法很容易忘记,可以结合力扣刷题时使用

另外有不懂之处欢迎在评论区留言,如果觉得文章对你学习有所帮助,还请"点赞+评论+收藏"一键三连,感谢支持!

相关推荐
机器学习之心17 小时前
198种组合算法+优化TCN-Transformer+SHAP分析+新数据预测+多输出!深度学习可解释分析,强烈安利,粉丝必备!
深度学习·算法·transformer·shap分析·新数据预测
狐5717 小时前
2026-01-12-LeetCode刷题笔记-1266-访问所有点的最小时间.md
笔记·算法·leetcode
Gorgous—l17 小时前
数据结构算法学习:LeetCode热题100-栈篇(有效的括号、最小栈、字符串解码、每日温度、柱状图中最大的矩形)
数据结构·学习·算法
小郭团队17 小时前
教育公平的探索
大数据·人工智能·嵌入式硬件·算法·硬件架构
天府之绝17 小时前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
be or not to be17 小时前
Html-CSS动画
前端·css·html
瑞雨溪17 小时前
力扣题解:740.删除并获得点数
算法·leetcode·职场和发展
LeeeX!17 小时前
基于YOLO11实现明厨亮灶系统实时检测【多场景数据+模型训练、推理、导出】
深度学习·算法·目标检测·数据集·明厨亮灶
初恋叫萱萱17 小时前
技术基石与职场进阶:构建从Web后端到高性能架构的完整知识图谱
前端·架构·知识图谱
红队it17 小时前
【Spark+Hadoop】基于spark+hadoop游戏评论数据分析可视化大屏(完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程)✅
大数据·hadoop·分布式·算法·游戏·数据分析·spark