Js高階函數(shù)reduce、map、filter

  • reduce

reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減,最終計算為一個值。
注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

基本語言
array.reduce(function(prev,cur,index,array){
...
}, init);

prev 表示上一次調(diào)用回調(diào)時的返回值,或者初始值 init;
cur表示當(dāng)前正在處理的數(shù)組元素;
index 表示當(dāng)前處理的數(shù)組元素的索引,若提供 init 值,則索引為0,否則索引為1;
array表示原數(shù)組;
init表示初始值。

實例

定義一個數(shù)組:

var arr = [3,9,4,3,6,0,9];
  • 數(shù)組項總和
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);
  • 數(shù)組項最大值
var max = arr.reduce(function (prev, cur) {
   return Math.max(prev,cur);
});
  • 數(shù)組去重
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
    //& 不管前面的條件是否正確,后面都執(zhí)行
    //&& 前面條件正確時,才執(zhí)行后面,不正確時,就不執(zhí)行,就效率而言,這個更好。
  • map

map()方法返回一個新數(shù)組,常用于根據(jù)原數(shù)組來生成新的數(shù)組,此方法按照原始數(shù)組元素順序依次處理元素。
注意: map() 不會對空數(shù)組進(jìn)行檢測,不會改變原始數(shù)組。

基本語言
array.map(function(cur,index,array){
 ...
})

cur必須。當(dāng)前元素的值
index可選。當(dāng)期元素的索引值
array可選。當(dāng)期元素屬于的數(shù)組對象

實例
  • 數(shù)值項求平方
// 例子數(shù)值項求平方
let data = [1,2,3,4,5];
let newData = data.map(function (item){
    return item * item;

});
console.log(newData);
//箭頭函數(shù)的寫法
let newData2 = data.map(item => item *item);
console.log(newData2);
  • 方便獲得數(shù)組對象中的特定屬性值
// 在實際中,我們可以利用map方法方便獲得數(shù)組對象中的特定屬性值
let arr = [
    {"name": "張小花", "email": "zhang@qq.com"},
    {"name": "body", "email": "body@qq.com"},
    {"name": "李小璐", "email": "li@qq.com"}
];
let newEmail = arr.map(function (item) {
    return item.name;
});
console.log(newEmail.join(','));
//第2種獲取數(shù)組對象中的值
let emails = [];
arr.map(function (item){
    emails.push(item.email);
});
console.log(emails);
// ["zhang@qq.com", "body@qq.com", "li@qq.com"]
  • filter

filter() 方法創(chuàng)建一個新的數(shù)組,新數(shù)組中的元素是通過過濾出符合條件的元素。
注意: filter() 不會對空數(shù)組進(jìn)行檢測, 不會改變原始數(shù)組。

基本語言
array.filter(function(cur,index,array){
...
}, thisValue);

currentValue 必須。當(dāng)前元素的值
index可選。當(dāng)前元素的索引值
arr 可選。當(dāng)前元素屬于的數(shù)組對象
thisValue可選。對象作為該執(zhí)行回調(diào)時使用,傳遞給函數(shù),用作 "this" 的值。如果省略了 thisValue ,"this" 的值為 "undefined"

實例
  • 數(shù)組元素大于指定數(shù)值
let arr=[1,2,3,4,5,6];
let newArr=arr.filter(item=>{
    return item>3;
}
console.log(newArr);// newArr=[4,5,6]
  • 數(shù)組去重
var  newArray;
var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
console.log(newArray.toString());//[apple,strawberry,banana,pear,orange]

注:去除重復(fù)元素依靠的是indexOf總是返回第一個元素的位置,后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等,因此被filter濾掉了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容