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

	.forEach()	.some()	.every()	.map()	.find()	.filter()
使用场景	没有返回值，可以通过索引修改原函数的数据，遍历所有数据	返回值是一个布尔值，找到符合条件的就会终止遍历，否则就遍历整个数组	返回值是一个布尔值，找到不符合条件的就停止遍历，否则就遍历整个数组（与some()相反）	返回值是一个新的数组，新数组的元素取决于.map()方法的回调函数返回	返回通过测试（函数内判断）的数组的第一个元素的值	返回值是一个新的数组，新的数组的元素是满足回调函数条件而筛选出来的原数组元素
循环次数	数组的长度	小于等于数组的长度	小于等于数组的长度	数组的长度	小于等于数组的长度	数组的长度
执行结果	没有返回值，return只是用来跳过当前循环	找到满足条件的就返回true，否则就遍历整个数组返回false	找到不满足条件的就返回true，否则就遍历整个数组返回false	新数组的数据是.map（）callback函数的return返回结果	返回的数据是原数组中第一个满足条件的元素，若原数组中的所有元素都不满足，则返回undefined	返回一个新数组，数组的元素是满足回调条件的所有原数组数据