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
Tags:

VirMach 便宜 VPS

QNews

QNews