JS數組遍歷的十二種方式

遍歷有如下幾種方式

數組方法

map
forEach
filter
find
findIndex
every
some
reduce
reduceRight

其他方法

for
for in
for of

數組方法

map

核心

創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。
不改變原數組
返回值是一個新的數組

let testArr = ['子項0','子項1','子項2'];
let resultArr = testArr.map((item, index) => {
  return `處理·${item}`
});
console.log(resultArr);
// 結果： ["處理·子項0", "處理·子項1", "處理·子項2"]

缺陷

可以使用return，但是不能使用break和continue

forEach

核心

對數組的每個元素執行一次提供的函數。
總是返回undefined。
不改變原數組

let testArr = ['子項0','子項1','子項2'];
testArr.forEach((item, index)=>{
  return `forEach處理${item}`
});

缺陷

可以使用return，但是不能使用break和continue

filter

核心

對數組的每一項都進行過濾，返回符合條件的item組成的數組
不會改變原數組

let filterArr = ['子項0','子項1','子項2'];
let filterResult = filterArr.filter((item, index) => {
  return item === '子項0';
});
console.log(filterArr); // ["子項0", "子項1", "子項2"]
console.log(filterResult);  ["子項0"]

缺陷

可以使用return，但是不能使用break和continue

find

核心

遍歷數組，找到第一個符合條件的項，並返回該項。否則返回undefined
不會改變數組

let findArr = ['子項0','子項1','子項2']
let findResult = findArr.find((item, index) => {
  return item === '子項0';
});
console.log(findResult);
// 結果爲: 子項0

缺陷

可以使用return，但是不能使用break和continue

findIndex

核心

遍歷數組找到第一個符合條件的項，並返回該項的索引值。否則返回-1。
不會改變數組對象。

let findIndexArr = ['子項0','子項1','子項2'];
let findIndexResult = findIndexArr.findIndex((item, index)=>{
  return item === '子項0';
});
console.log(findIndexResult);
// 結果爲： true

缺陷

可以使用return，但是不能使用break和continue

every

核心

對數組中的每一項運行給定函數，如果該函數對每一項返回true,則返回true。簡單說就是看數組的每個元素是否符合要求，都符合則返回true，否則返回false

let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{
  return item > 0
});
console.log(everyResult);
// 結果爲: true

缺陷

可以使用return，但是不能使用break和continue

some

是對數組中每一項運行指定函數，如果該函數對任一項返回true，則返回true。

let someArr = [2,3,4];
let someResult = someArr.some((item, index)=>{
  return item > 3
});
console.log(someResult);
// 結果爲: true

缺陷

可以使用return，但是不能使用break和continue

reduce

接收一個函數作爲累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終爲一個值。
第二個參數作爲第一次調用的a的值

// reducer
let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{
  return a + b;
});
console.log(reduceResult);
// 結果: 10

缺陷

可以使用return，但是不能使用break和continue

reduceRight

和reduce一樣是累加器，不過是從右往左計算
第二個參數作爲第一次調用的a的值

let reduceRightArr = [0,1,2,3,4]
let reduceRightResult = reduceRightArr.reduceRight((a, b)=>{
  return a + b;
});
console.log(reduceRightResult);
// 結果: 10

缺陷

可以使用return，但是不能使用break和continue

其他方法

for循環

核心

使用臨時變量，並且遍歷的是key.

let testArr = ['子項0','子項1','子項2']; 
for(var i = 0; a < testArr.length; i++){
  console.log(testArr[i]);
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子項0','子項1','子項2'];
// break  
for(var i = 0; i < testArr.length; i++) {
  if(i === 1) {
    break;
  }
  console.log(testArr[i]);
}
// 結果爲： 子項0

// continue
for(var i = 0; i < testArr.length; i++) {
  if(i === 1) {
    continue;
  }
  console.log(testArr[i]);
}
// 結果爲: 子項0 子項目2

//return
for(var i = 0; i < testArr.length; i++) {
  if(i === 1) {
    return;
  }
  console.log(testArr[i]);
}
// 結果爲什麼也沒有

for in循環

核心

遍歷的是key

let testArr = ['子項0','子項1','子項2'];  
for(let i in testArr){
  console.log(testArr[i])
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子項0','子項1','子項2'];
// break  
for(let i in testArr){
  if(i === 1) {
    break;
  }
  console.log(testArr[i]);
}
// 結果爲： 子項0

// continue
for(let i in testArr){
  if(i === 1) {
    continue;
  }
  console.log(testArr[i]);
}
// 結果爲: 子項0 子項目2

//return
for(let i in testArr){
  if(i === 1) {
    return;
  }
  console.log(testArr[i]);
}
// 結果爲什麼也沒有

for of循環

核心

遍歷的是value

let testArr = ['子項0','子項1','子項2'];  
for(let i of testArr) {
  console.log(i);
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子項0','子項1','子項2'];
// break  
for(let value of testArr){
  if(value === '子項1'){
    break;
  }
  console.log(value);
}
// 結果爲： 子項0

// continue
for(let value of testArr){
  if(value === '子項1'){
    continue;
  }
  console.log(value);
}
// 結果爲: 子項0 子項目2

//return
for(let value of testArr){
  if(value === '子項1'){
    return;
  }
  console.log(value);
}
// 結果爲什麼也沒有

注意⚠️

數組方法都不可以用break和continue，for循環之類的不可以用return但是可以正常使用break和continue