技術標籤：筆記javascript前端

javaScript中運算元組的高階方法filter、map、reduce及for迴圈三種遍歷形式

• filter方法過濾陣列
• • 一般操作
  • filter方法
  • 方法解析：
• map方法改變陣列
• • 一般操作
  • map方法用
  • 方法解析：
• reduce方法
• • 一般操作
  • reduce方法
  • 方法解析

filter方法過濾陣列

需求：有一個數組，我們需要把陣列中的值給給篩選一下。

一般操作

例子：找出陣列中小於100的數，我們常規的寫法，就如下程式碼：

// 注：下面的const、let都是ES6的新語法，不懂的可以當做var
// 建立一個數組
const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

// 需求一：過濾掉大於100的值
let new1nums = [];  // 建立一個空陣列儲存資料
for (let i=0; i<nums.length; i++){  // for遍歷
  if(nums[i] <= 100){
    new1nums.push(nums[i]);   // 把陣列nums中小於100的值新增到新陣列
  }
}
console.log("new1nums:"
 
 + new1nums);

filter方法

可以用filter方法更加優雅的滿足這個需求：程式碼如下

const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

// 需求一：過濾掉大於100的值
let new1nums = nums.filter( function (n) {
  return n < 100;   // 如果n小於100，那就是true，就把當前n存入臨時陣列
  // 上面寫法看不懂可以看這個寫法
  // if (n < 100){
  //   return true;
  // }
  // return false;
})
console.
 
log(new1nums);

方法解析：

nums.filter方法傳入一個function方法，裡面的值n就是陣列nums裡面的值的遍歷，如上例子:

• 第一次：n = 12
• 第二次：n = 32
• 第三次：n = 31
  …
  方法的返回值是一個boolean值，
• true：表示把當前n的值放到一個臨時數組裡面。
• false：表示不把當前n的值放到數組裡面。

最後把這個臨時陣列當做方法的返回值，我們接收一下就好了。

map方法改變陣列

需求：把陣列中的所有數都乘以10

一般操作

const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

let new2nums = [];  // 建立一個新陣列儲存資料
for (let i in new1nums){    // for遍歷的第二種形式
  new2nums[i] = unms[i] * 10;
}
console.log("new2nums:" + new2nums);

map方法用

用map方法優雅的實現這個需求，程式碼如下：

const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

// 需求二：把nums中的數 乘以10
let new2nums = nums.map(function (n) {
  return n * 10;   // 把陣列中的每個元素都乘以10
})
console.log(new2nums);

方法解析：

同上，還是傳入一個方法，其中的引數n也是陣列中值的遍歷，
把返回值放入一個臨時陣列中，把這個最終的陣列當做整個方法的返回值。

reduce方法

需求：求出陣列中所有元素的和

一般操作

const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

// 需求三：求出nums中的數的總和
let total = 0;    // 儲存資料
for (let num of nums){  // for遍歷的第三種形式
  total += num;
}
console.log("total:" + total);

reduce方法

用reduce方法實現這個需求，程式碼如下：

const nums = [12, 32, 31, 987, 323, 234, 343, 34, 23, 345]

// 需求三：求出nums中的數的總和
let total = nums.reduce( function (preValue, n) {
   return preValue + n;
}, 0)
console.log(total);

方法解析

reduce()方法傳入兩個引數，

• 引數一：第一個引數是一個方法回撥。
• 引數二：是preValue的起始值

在引數一的方法中，又傳入兩個引數

• 引數一：preValue：表示上一次的返回值，（最開始沒有，所以要賦一個初始值，就是reduce()方法的第二個引數，例子中賦值為0）
• 引數二：陣列的遍歷。

此方法有點繞，詳細說一下：
現在上面寫的是:return preValue + n;就能完成整個陣列相加的計算，
如果我們是寫成: return 50;
那麼他每次的方法傳入值function(preValue, n)應該是
第一次：preValue=0; n=12;
第二次：preValue=50; n=32;
第三次：preValue=50; n=31;
第四次：preValue=50; n=987;
…
然後把最後的一個preValue當做返回值

方法中的preValue引數，就是此方法上一次return的值。初值自己設定。