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)//trueevery
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)//3reduce
reduce 有兩個引數 callBack,initalValue ,
callBack 是陣列中每一個元素依次執行回呼函式
initalValue是第一次呼叫callBack的第一個引數
callBack 引數
- prev 上一次帶呼叫回傳的值，或者提供的初始值
- cur 陣列中當前被處理的元素
- index 當前元素的索引
- array 呼叫reduce的陣列
reduce求和，沒有初始值
let list = [1,2,3,4]
let sum = list.reduce((pre,cur,index,list)=>{
return pre+cur
})
console.log(sum)//10reduce求和 ，有初始值
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 跳出回圈
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319780.html
標籤：其他