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

[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

总结:

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. 不会改变原数组的数据

代码007普通

打赏 收藏 海报 链接