[Vue]常见的循环处理数组方法：forEach some map filter every find等方法

文章目录

• • [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,7result: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

总结:

1. forEach() 方法对于空数组是不会执行回调函数的

2. forEach()方法是没有返回值的

3. 不支持使用break来中途跳出循环和不支持return操作输出，return只能用于控制循环是否跳出当前循环

4. 可以通过数组的索引值来修改原数组的值

5. 回调有三个参数: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，然后终止遍历，后续元素将不继续遍历，如程序中的小白就没有遍历

总结:

1. some方法找到符合条件的便会终止，否则将会遍历整个数组

2. 当数组中有一个元素满足条件即返回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//检测到小蓝不满足条件，所以后续的小白和小绿就没有遍历

总结:

1. 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2. 如果所有元素都满足条件，则返回 true

Array.map(callback)

.map()方法的返回值为新的数组，组中的元素为原始数组元素调用函数处理后的值

map() 按照原始数组元素顺序依次处理元素

注意：

1. map() 不会对空数组进行检测。
2. 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)

得到的结果:

总结:

1. .map()方法有返回值，返回的是一个新的数组
2. 遍历原数组的所有元素
3. 新数组的元素为原始元素调用函数后得到的结果

Array.find(callback)

find() 方法==返回通过测试（函数内判断）的数组的第一个元素的值==

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意:

1. find() 对于空数组，函数是不会执行的。

2. 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//返回数组中第一个符合条件的元素，之后的值将不继续遍历

总结:

1. find()方法返回通过测试（函数内判断）的数组的第一个元素的值
2. 若数组中无满足条件的元素，则返回undefined
3. 获取到满足条件的元素后，后续的元素将不继续遍历

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]

总结:

1. filter()返回值是一个新的数组
2. 新的数组的元素是满足回调函数条件而筛选出来的原数组元素
3. 不会改变原数组的数据