js 数组循环操作方法

Posted 2021-11-03 丰的传说

for  循环处理数据

for  循环处理数据是数组操作的基本方法

for (let index = 0; index < list.length; index++) {
    const element = list[index];
}

for循环处理数据的注意点

当数组里里面的值是对象类型时，数组里的每一项的属性是可以改变的

let listObj = [
    {
        name:'11',
        age:18
    },
     {
        name:'22',
        age:19
    },
    {
        name:'33',
        age:20
    },
     {
        name:'44',
        age:21
    },
    {
        name:'55',
        age:22
    },
     {
        name:'66',
        age:23
    }
]
for (let index = 0; index < listObj.length; index++) {
    const element = listObj[index];
    element.name=20//element 是对象类型 对象里的值可以改变
}

当数组里面的值是基本数据类型是（number,string等）,数组里的每一项是不可以改变的

for (let index = 0; index < listNormal.length; index++) {
    let  element = listNormal[index];
    element="0"//值无法改变
}
console.log(listNormal)//][ '1', '2', '3', '4', '5' ]

for  如何跳出循环

  初始数据

let list=[
    '1','2','3','4','5'
]

     break

跳出当前循环，并结束后面所有的循环

for (let index = 0; index < list.length; index++) {
    let  element = list[index];
    if(element=='3'){
        break
    }
    console.log(element)// 1,2
 
}

   continue

跳出当前循环，继续后面的循环                

  for (let index = 0; index < list.length; index++) {
        let  element = list[index];
        if(element=='3'){
            continue
        }
        console.log(element)//1 2 4 5
    
    }

return  可以跳出多层循环

终止所有循环

let list = [
    '1', '2', '3', '4', '5'
]
let outList = [
    1, 2
]
for (let j = 0; j < outList.length; j++) {
    for (let index = 0; index < list.length; index++) {
        let element = list[index];
        if (element == '3') {
            break
        }
        console.log(element)//1 2 

    }
}

用return 跳出多层循环时，只会循环一次，

break 虽然也能跳出循环，但是仍然会执行多次

let list = [
    '1', '2', '3', '4', '5'
]
let outList = [
    1, 2
]
for (let j = 0; j < outList.length; j++) {
    for (let index = 0; index < list.length; index++) {
        let element = list[index];
        if (element == '3') {
            break
        }
        console.log(element)//1 2  12

    }
}

forEach

forEach可以理解为for的简写形式，循环的时候他有两个参数，一个是 当前项，另外一个是索引

forEach 基本用法同 for 但是

forEach 无法跳出循环 需要用 throw new Error 强制跳出循环

let listObj = [
    {
        name: '11',
        age: 18
    },
    {
        name: '22',
        age: 19
    },
    {
        name: '33',
        age: 20
    },
    {
        name: '44',
        age: 21
    },
    {
        name: '55',
        age: 22
    },
    {
        name: '66',
        age: 23
    }
]

listObj.forEach((ele,index)=>{
    console.log(ele,index)
})

/* { name: '11', age: 18 } 0
{ name: '22', age: 19 } 1
{ name: '33', age: 20 } 2
{ name: '44', age: 21 } 3
{ name: '55', age: 22 } 4
{ name: '66', age: 23 } 5 */

数据

let listObj = [
    {
        name: '11',
        age: 18
    },
    {
        name: '22',
        age: 19
    },
    {
        name: '33',
        age: 20
    },
    {
        name: '44',
        age: 21
    },
    {
        name: '55',
        age: 22
    },
    {
        name: '66',
        age: 23
    }
]

map 

映射处理每一条数据，会修改原数组

 对map的误区 

有人测试过map的执行时间比find filter some 的长，就误以为 map的执行效率低，实际上是因为，map必须映射处理每一条数据且不会跳出循环，而find和filter以及some查找到满足条件的元素就跳出循环了，所以相对而言 map似乎慢了 。我们需要具体问题具体分析，结合具体场景使用对应的方法

let listObj = [
    {
        name: '11',
        age: 18
    },
    {
        name: '22',
        age: 19
    },
    {
        name: '33',
        age: 20
    },
    {
        name: '44',
        age: 21
    },
    {
        name: '55',
        age: 22
    },
    {
        name: '66',
        age: 23
    }
]

let result = listObj.map(ele=>{
    return ele.age++
})

console.log(result)
// [ 18, 19, 20, 21, 22, 23 ]
console.log(listObj)
// [
//     { name: '11', age: 19 },
//     { name: '22', age: 20 },
//     { name: '33', age: 21 },
//     { name: '44', age: 22 },
//     { name: '55', age: 23 },
//     { name: '66', age: 24 }
//   ]

let result1= listObj.map(ele=>{
    let obj= Object.assign(ele,{sex:'男'})
    return obj 
})

console.log(result1)
/* 
[
  { name: '11', age: 19, sex: '男' },
  { name: '22', age: 20, sex: '男' },
  { name: '33', age: 21, sex: '男' },
  { name: '44', age: 22, sex: '男' },
  { name: '55', age: 23, sex: '男' },
  { name: '66', age: 24, sex: '男' }
] */
console.log(listObj)
 /* [
  { name: '11', age: 19, sex: '男' },
  { name: '22', age: 20, sex: '男' },
  { name: '33', age: 21, sex: '男' },
  { name: '44', age: 22, sex: '男' },
  { name: '55', age: 23, sex: '男' },
  { name: '66', age: 24, sex: '男' }
] */

filter  过滤

filter 过滤查找所有满足条件的元素 

filter不会修改原数组

let result2  = listObj.filter(ele=>ele.age >20)
console.log(result2)
/* 
[
  { name: '44', age: 21 },
  { name: '55', age: 22 },
  { name: '66', age: 23 }
]
*/
console.log(listObj)
/* 
[
  { name: '11', age: 18 },
  { name: '22', age: 19 },
  { name: '33', age: 20 },
  { name: '44', age: 21 },
  { name: '55', age: 22 },
  { name: '66', age: 23 }
]
*/

  some

some的返回值是boolean值,且只要有一个满足条件的值，就返回true,如果都不满足条件就返回false

let result2  = listObj.some(ele=>ele.age >20)
console.log(result2)//true

every

every的返回值是boolean值，必须所有的值都满足条件，才返回true,否则返回false

let result2  = listObj.every(ele=>ele.age >20)
console.log(result2)//false 

find

find 查找到满足条件的第一个元素，返回的不是数组而是一个元素

let result2  = listObj.find(ele=>ele.age >20)
console.log(result2)
/* 
{ name: '44', age: 21 }
*/

findIndex

find 查找到满足条件的第一个元素的索引

let result2  = listObj.findIndex(ele=>ele.age >20)
console.log(result2)//3

reduce

reduce 有两个参数 callBack,initalValue ,

callBack 是数组中每一个元素依次执行回调函数

initalValue是第一次调用callBack的第一个参数

callBack 参数

1. prev 上一次带调用返回的值，或者提供的初始值
2. cur 数组中当前被处理的元素
3. index 当前元素的索引
4. array 调用reduce的数组 

reduce求和，没有初始值

let list = [1,2,3,4]

let sum =   list.reduce((pre,cur,index,list)=>{
    return pre+cur
})
console.log(sum)//10

reduce求和 ，有初始值

let list = [1,2,3,4]
let sum1 = list.reduce((prev,cur,index,list)=>{
  return prev+cur  
},100)
console.log(sum1)

reduceRight

reduceRight用用法同reduce一致，只不过reduceRight是从右向左累加

注意

跳出循环的方法

自动跳出循环的方法  find,some,filter
使用break,continue ,return 可以是for循环跳出循环

不会跳出循环的方法 map,every

使用 throw new Error 可以使 forEach 跳出循环