JS-数组遍历的方法你知道几种?
开源
个人开源的leno-admin
后台管理项目,前端技术栈:reactHooks
、ant-design
;后端技术栈:koa
、mysql
、redis
,整个项目包含web端
、electron客户端
、mob移动端
、template基础模板
,能够满足你快速开发一整套后台管理项目;如果你觉得不错,就为作者点个✨star
✨吧,你的支持就是对我最大的鼓励;
forEach
基本语法:
数组.forEach(function(数组[i],索引值){ 业务处理 });
功能类似于for循环,但是比for循环更加简洁明了,更易于使用,效率更高;
求数组[1,8,6,12,36,4,10]中大于10且不等于10 👇👇
let arr = [1, 8, 6, 12, 36, 4, 10]
let newArr = []
arr.forEach((value, indx) => {
if (value > 10) newArr.push(value)
})
console.log(newArr); // => [12,36]
forEach里面直接写函数的话,
里面函数会获得三个参数function(value(遍历数组的值),index(遍历数组的索引值),array(遍历当前的整个数组)){}
;
内部写函数的案例
let arr = ['一', '二']
arr.forEach(function (value, index, array) {
console.log(value, index, array); // 一 0 (2) ['一', '二']
// 二 1 (2) ['一', '二']
})
filter
基本语法:
let newArr(新数组) = 数组.filter(function(数组[i],索引值){return 条件1 === 条件2});
将数组中满足条件的筛选出来,生成一个新的数组,所以需要用一个变量去接受,常用于筛选&删除业务;
将数组[10,'',0,23,'',8,'',88,'']中空的数组去除🐱👓🐱👓
let arr = [10, '', 0, 23, '', 8, '', 88, '']
let newArr = arr.filter((value, index) => {
return value !== ''
})
console.log(newArr); // => [10, 0, 23, 8, 88]
map
基本语法:
let newArr(新数组) = 数组.map(function(数组[i],索引值){return 数组[i]+2});
map的使用和forEach类似,常用来操作原数组里面的内容,会生成新的数组;
将数组[5,3,7,11,20,15]中每个数组+2 🐱🐱
let arr = [5, 3, 7, 11, 20, 15]
let newArr = arr.map((value, index) => {
return value + 2
})
console.log(newArr); // => [7, 5, 9, 13, 22, 17]
find
基本语法:
let item = 数组.find(function(数组[i],索引值)){return 数组[i]===条件};
找到第一个满足条件的值,会返回数值;
找数组["a", "b", "c", "d", "e","c"]中的c 🍖🍖
const arr = ["a", "b", "c", "d", "e", "c"];
const item = arr.find((value, index) => {
return value === "c"
})
console.log(item); // => 第一个:c
// # :找不到元素返回undefined
findIndex
基本语法:
let i = 数组.findIndex(function(数组[i],索引值)){return 数组[i]===条件};
找到第一个满足条件的值,会返回数值的索引值;
找数组["a", "b", "c", "d", "e","c"]中的c的索引值 🥬🥬
const arr = ["a", "b", "c", "d", "e", "c"];
const i = arr.findIndex((value, index) => {
return value === "f"
})
console.log(i); // => 第一个c的索引值2 ; * 找不到值返回-1
every
基本语法::
let sta = 数组.every(function(数组[i],索引值)){return 数组[i]===条件};
用于检测数组所有元素是否都符合指定条件,返回布尔值;
判定数组["a", "b", "c", "d", "e","c"]是否都是c 🌍🌍
const arr = ["a", "b", "c", "d", "e", "c"];
const sta = arr.every((value, index) => {
return value === 'a'
})
// console.log(sta); // => 返回false
some
基本语法::
let sta = 数组.some(function(数组[i],索引值)){return 数组[i]===条件};
检测数组中是否有元素满足指定条件,返回布尔值;
判定数组["a", "b", "c", "d", "e","c"]是否有c 🍦🍬
const arr = ["a", "b", "c", "d", "e", "c"];
const sta = arr.some((value, index) => {
return value === 'c'
})
console.log(sta); // => 返回true
reduce
基本语法::
let res = 数组.reduce(callback(返回reduce内部上一次回调return的值/上次回调没值,则返回数组第一个值(即初始值),当前的数组[i],索引值,数组),设置初始值){return 上一次的值+当次的值};
reduce功能和forEach、map类似,但个人感觉reduce在多层解构数组合并上比较好用;
数组求和[2, 10, 3, 5] 🧃🍺
let arr = [2, 10, 3, 5]
let sum = arr.reduce(function (previousValue, currentValue, index, arr) {
console.log(previousValue, currentValue, index); // 2 10 1
return previousValue + currentValue // 12 3 2 打印值
}) // 15 5 3
console.log(sum); // => 20
结语
以上方法都是为了利于我们日常开发,提高我们的开发效率,虽然这些效果for循环全部都能完成,但是更精简,更优美,更高效的代码是每个程序员都一直追求的~