本文系统梳理JavaScript中数组的常用操作方法,涵盖splice截取替换、join字符串拼接、reverse翻转、every/some条件检测、find查找、reduce累加计算、filter过滤、sort排序以及push/pop等增删元素技巧。通过具体参数说明与代码示例,帮助开发者掌握数组进阶处理技巧,提升代码效率。
splice()方法
用于截取并替换数组元素。
该方法接收三个主要参数:第一个指定起始位置,第二个指定截取的元素个数,第三个为可选的替换元素列表。其返回值是被截取下来的元素组成的数组,而原数组则变为移除这些元素后的剩余部分。
join()方法
将数组转换为字符串。
括号内指定连接符,若传入空字符串 join(''),则元素之间不进行任何分割直接拼接。
例如:
let aaa = [1,2,3]
let bbb = aaa.join('-')
let ccc = aaa.join('0')
console.log(bbb) // '1-2-3'
console.log(ccc) //'10203'
reverse()方法
用于翻转数组顺序。
调用 arr.reverse() 即可实现数组翻转,该方法返回翻转后的新数组。
every()方法
用于检测数组是否全部符合条件。
遍历数组每一项,若发现有一项不满足定义的条件则立即返回 false,后续元素不再执行检测;只有当所有元素均符合条件时,才返回 true。
回调函数接收三个参数:第一个是数组的每一项,第二个是当前索引,第三个是当前数组本身。
例:
arr:[121,3322,3215,3549,6899,46456]
arr.every(function(item,index,array){
return item>2000 //检测数组的每一个值是否大于2000
}) //结果是false 除非数组每个值都大于2000 才是true
reduce()方法
用于计算累加值或聚合数据。
该方法可将前一次遍历产生的结果与当前遍历项进行运算,从而实现累加、累乘等逻辑。
第一个参数是累计器 prev,用于保存上一次回调返回的结果。
第二个参数是当前正在处理的值 cur,遍历从数组头部进行到底部。
第三个参数是索引 index。
第四个参数是当前数组 arr。
第五个参数是初始值 init,位于 reduce 函数调用的第二个参数位置。
例:
var arr = [3,9,4,3,6,0,9];
var sum = arr.reduce(function (prev, cur) {
return prev + cur;
},0);//由于初始值是0 也就是prev刚开始的值是0 索以运算起来就是 0+3=3 3+9=12 12+4=16 .... 每次得到的结果都会被prev存储进行下一次运算 这就是最简单的reduce求和
filter()方法
遍历并筛选数组元素。
回调函数接收三个参数:第一个是数组的每一项,第二个是索引,第三个是当前数组。
该方法遍历数组,根据定义的条件筛选元素,并返回一个包含所有满足条件元素的新数组,原数组保持不变。
例:
var arr=[1,3,5,7,8]
var sum = arr.filter(function(value,index,arr){
return value >3 //筛选arr数值中 大于3的元素
})
console.log(sum) //返回的值是[5,7,8]
findIndex()方法 和find()方法
findIndex()
用于找出第一个满足条件的数组成员的索引,若找不到则返回 -1。
对于空数组,回调函数不会执行,且不会改变原数组的值。
find()
find() 函数用于查找目标元素,找到即返回该元素,找不到则返回 undefined。
查找函数接收三个参数:
value:每一次迭代查找的数组元素。
index:每一次迭代查找的数组元素索引。
arr:被查找的数组。
forEach()方法
用于遍历循环数组。 第一个参数是每个元素值 第二个参数是索引 第三个参数是数组本身 多用于遍历数组里的元素
arr:[1,2,3]
arr.forEach(function(item,index,array){
console.log(item) //1,2,3
})
some()方法
检测数组中是否有元素满足条件,用于查找是否存在符合条件的值,返回 true 或 false。
var a = arr.some(function(item,index,array){
return item>3 //检测是否有大于3的元素,有则返回true,没有则返回false
})
只要找到一个满足条件的元素则终止循环,在 some 里面 遇到了 return true 就会终止循环
indexOf()方法
用于查找数组中是否存在某个元素,返回其下标。该方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1。 参数说明: 第一个参数(必须):被查找的元素 第二个参数(可选):开始查找的位置(不能大于等于数组的长度,否则返回 -1),接受负值,默认值为 0。 严格相等的搜索: 数组的 indexOf 搜索跟字符串的 indexOf 不一样,数组的 indexOf 使用严格相等 === 搜索元素,即数组元素要完全匹配才能搜索成功。
sort ()方法
参数可选: 规定排序顺序的比较函数。 默认情况下 sort() 方法没有传比较函数的话,默认按字母升序,如果元素不是字符串的话,会调用 toString() 方法将元素转化为字符串的 Unicode(万国码)位点,然后再比较字符。
// 字符串排列 首字母
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// 数字排序的时候 因为转换成Unicode字符串之后,有些数字会比较大会排在后面
var a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];
push()方法
push 向数组末尾添加新元素 (可一次性添加多个) 返回值: 新数组的 length (长度)
const aa = [1,2,3]
aa.push(5,6)
console.log(aa) // [1,2,3,5,6]
pop()方法
从尾部删除一个元素,返回值是被删除的元素。
unshift()方法
向头部添加元素,返回值是数组长度。
shift()方法
从头部删除元素,返回值: 被删除的元素。
以上就是 JS 数组中常用方法技巧学会进阶成为大佬的详细内容,更多关于 JS 数组中常用方法技巧的资料请关注本站其它相关文章!