js 数组循环操作方法

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 虽然也能跳出循环,但是仍然会执行多次

forEach

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和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不会修改原数组

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

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

every

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

find

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

findIndex

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

reduce

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

注意

跳出循环的方法

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

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

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

本文链接:https://my.lmcjl.com/post/1513.html

展开阅读全文

4 评论

留下您的评论.