文章目录
- [Vue]常见的循环处理数组方法:`forEach` `some` `map` `filter` `every` `find`等方法
- Array.forEach(callback)
- Array.some(callback)
- Array.every(callback)
- Array.map(callback)
- Array.find(callback)
- Array.filter(callback)
[Vue]常见的循环处理数组方法:forEach some map filter every find等方法
Array.forEach(callback)
千万注意:forEach() 方法对于空数组是不会执行回调函数的
forEach()方法用于遍历数组中的每一个元素，并将元素传给回调函数，注意:forEach()中是不支持使用break来中途跳出循环和不支持return操作输出，return只能用于控制循环是否跳出当前循环
语法:
let arr=[1,2,3,4,5,6,7]
arr.forEach((item,index,arr)=>{
console.log(item，index，arr)
})
输出：
1 0 [1, 2, 3, 4, 5, 6, 7]
2 1 [1, 2, 3, 4, 5, 6, 7]
3 2 [1, 2, 3, 4, 5, 6, 7]
4 3 [1, 2, 3, 4, 5, 6, 7]
5 4 [1, 2, 3, 4, 5, 6, 7]
6 5 [1, 2, 3, 4, 5, 6, 7]
7 6 [1, 2, 3, 4, 5, 6, 7]
回调有三个参数： item:遍历的数组内容 index:对应的数组索引 arr:数组本身
forEach方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改
let arr=[1,2,3,4,5,6,7]
let result = arr.forEach((item,index,arr)=>{
// 通过item不能改变原数组
if(item==2){
item=1
}
})
console.log('arr:'+arr)
console.log('result:'+result)
输出:
arr:1,2,3,4,5,6,7
result:undefined
但是可以通过数组的索引值来修改原数组的值
let arr=[1,2,3,4,5,6,7]
let result = arr.forEach((item,index,arr)=>{
// 通过数组索引值来修改原数组的值
if(item==2){
arr[index]=20
}
})
console.log('修改后的arr:'+arr)
输出:
修改后的arr:1,20,3,4,5,6,7
总结:
forEach() 方法对于空数组是不会执行回调函数的
forEach()方法是没有返回值的
不支持使用break来中途跳出循环和不支持return操作输出，return只能用于控制循环是否跳出当前循环
可以通过数组的索引值来修改原数组的值
回调有三个参数:item:遍历的数组元素 index：当前遍历的数组元素的索引值 arr：遍历的数组本身
Array.some(callback)
**some()**是Vue 中的一个常用方法，它接收一个回调函数，回调函数接收三个参数：item当前元素、index当前索引、arr数组本身，注意:当有一个元素满足回调函数的条件时，some方法返回true，否则返回false
some方法找到符合条件的便会终止，否则将会遍历整个数组
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组
语法：
let arr=[1,2,3,4,5,6,7]
arr.some((item,index,arr)=>{
})
若数组中的对象只要有一个对象复合条件就返回true , 剩余的元素不会再执行检测，全部对象都不符合条件才返回false
let arr=[
{
name:'小红',
age:28,
},
{
name:'小蓝',
age:25,
},
{
name:'小绿',
age:29,
},
{
name:'小白',
age:27,
},
]
let result = arr.some((item,index,arr)=>{
return item.age>30
})
console.log(result)
输出:
false
//所有对象都不符合就返回false
let arr=[
{
name:'小红',
age:28,
},
{
name:'小蓝',
age:25,
},
{
name:'小绿',
age:29,
},
{
name:'小白',
age:27,
},
]
let result = arr.some((item,index,arr)=>{
console.log(item)
return item.age>28
})
console.log(result)
输出:
{name: '小红', age: 28}
{name: '小蓝', age: 25}
{name: '小绿', age: 29}
true
//当有一个元素满足回调函数条件时，数组就返回true，然后终止遍历，后续元素将不继续遍历，如程序中的小白就没有遍历
总结:
some方法找到符合条件的便会终止，否则将会遍历整个数组
当数组中有一个元素满足条件即返回true，所有对象都不符合就返回false
Array.every(callback)
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组
语法:
let arr=[1,2,3,4,5,6,7]
arr.every((item,index,arr)=>{
})
当所有元素都满足条件返回true
let arr=[
{
name:'小红',
age:28,
},
{
name:'小蓝',
age:25,
},
{
name:'小绿',
age:29,
},
{
name:'小白',
age:27,
},
]
let result = arr.every((item,index,arr)=>{
console.log(item)
return item.age>20
})
console.log(result)
输出:
true
当检测到有元素不满足时，返回false，循环终止，后续元素不再遍历
let arr=[
{
name:'小红',
age:28,
},
{
name:'小蓝',
age:25,
},
{
name:'小绿',
age:29,
},
{
name:'小白',
age:27,
},
]
let result = arr.every((item,index,arr)=>{
console.log(item)
return item.age>26
})
console.log(result)
输出:
age: 28 name: "小红"
age: 25 name: "小蓝"
false
//检测到小蓝不满足条件，所以后续的小白和小绿就没有遍历
总结:
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true
Array.map(callback)
.map()方法的返回值为新的数组，组中的元素为原始数组元素调用函数处理后的值
map() 按照原始数组元素顺序依次处理元素
注意：
map()不会对空数组进行检测。map()不会改变原始数组。
语法:
let arr=[1,2,3,4,5,6,7]
let newArr = arr.map((item,index,arr)=>{
})
.map()方法的返回值为一个新的数组
假设你的数据为:
{
name: '小红',
age: 28,
},
{
name: '小蓝',
age: 25,
},
{
name: '小绿',
age: 29,
},
{
name: '小白',
age: 27,
},
但是前端想要使用的数据类型为
{name: '小红'},
{name: '小蓝'},
{name: '小绿'},
{name: '小白'},
这时候就可以用map()方法遍历原数组，返回一个新数组，组中的元素为原始元素调用函数后得到的结果
let arr = [
{
name: '小红',
age: 28,
},
{
name: '小蓝',
age: 25,
},
{
name: '小绿',
age: 29,
},
{
name: '小白',
age: 27,
},
]
let newArr = arr.map((item, index, arr) => {
return {name:item.name}
})
console.log(newArr)
得到的结果:
总结:
- .map()方法有返回值，返回的是一个新的数组
- 遍历原数组的所有元素
- 新数组的元素为原始元素调用函数后得到的结果
Array.find(callback)
find() 方法==返回通过测试（函数内判断）的数组的第一个元素的值==
find() 方法为数组中的每个元素都调用一次函数执行：
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意:
-
find() 对于空数组，函数是不会执行的。
-
find() 并没有改变数组的原始值。
语法:
let arr=[1,2,3,4,5,6,7]
let res = arr.map((item,index,arr)=>{
})
假如要选出数组中第一个大于8的数
let arr = [1,0,8,92,3,65,48,2,100]
let result = arr.find((item, index, arr) => {
return item>8
})
console.log(result)
输出:
92
//返回数组中第一个符合条件的元素，之后的值将不继续遍历
总结:
- find()方法返回通过测试（函数内判断）的数组的第一个元素的值
- 若数组中无满足条件的元素，则返回undefined
- 获取到满足条件的元素后，后续的元素将不继续遍历
Array.filter(callback)
.filter()用于把数组的某些元素的筛选，然后返回剩下的元素
不会改变原数组，返回值是一个新的数组
新数组的数据是满足return条件的原数组数据
语法：
let arr=[1,2,3,4,5,6,7]
let res = arr.filter((item,index,arr)=>{
})
假设原数据为
let arr = [1,0,8,92,3,65,48,2,100]
需要提取数组中大于10的数据
let arr = [1,0,8,92,3,65,48,2,100]
let result = arr.filter((item, index, arr) => {
return item>10
})
console.log(result)
输出:
[92, 65, 48, 100]
总结:
- filter()返回值是一个新的数组
- 新的数组的元素是满足回调函数条件而筛选出来的原数组元素
- 不会改变原数组的数据
| .forEach() | .some() | .every() | .map() | .find() | .filter() | |
|---|---|---|---|---|---|---|
| 使用场景 | 没有返回值，可以通过索引修改原函数的数据，遍历所有数据 | 返回值是一个布尔值，找到符合条件的就会终止遍历，否则就遍历整个数组 | 返回值是一个布尔值，找到不符合条件的就停止遍历，否则就遍历整个数组（与some()相反） | 返回值是一个新的数组，新数组的元素取决于.map()方法的回调函数返回 | 返回通过测试（函数内判断）的数组的第一个元素的值 | 返回值是一个新的数组，新的数组的元素是满足回调函数条件而筛选出来的原数组元素 |
| 循环次数 | 数组的长度 | 小于等于数组的长度 | 小于等于数组的长度 | 数组的长度 | 小于等于数组的长度 | 数组的长度 |
| 执行结果 | 没有返回值，return只是用来跳过当前循环 | 找到满足条件的就返回true，否则就遍历整个数组返回false | 找到不满足条件的就返回true，否则就遍历整个数组返回false | 新数组的数据是.map（）callback函数的return返回结果 | 返回的数据是原数组中第一个满足条件的元素，若原数组中的所有元素都不满足，则返回undefined | 返回一个新数组，数组的元素是满足回调条件的所有原数组数据 |
