摘要：將品牌的標(biāo)價(jià)全部加蘇南的專欄交流公眾號(hào)不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。

? 今天我想分享一個(gè)有關(guān)于循環(huán)篩選的知識(shí)點(diǎn)，也許是前端小白的你首先想到的是用for循環(huán)做篩選，但我這種小菜鳥想到的就是map(工作中很喜歡用= =),學(xué)過(guò)數(shù)據(jù)結(jié)構(gòu)的小伙伴也肯定知道，線性表這些跟循環(huán)也息息相關(guān)，包括你出去面試的時(shí)候或許你遇到過(guò)這樣的問(wèn)題，map和forEach的區(qū)別？去重的幾種方式？說(shuō)實(shí)話，forEach我真的很少用，但不滿足于現(xiàn)狀的我，覺(jué)得應(yīng)該多學(xué)習(xí)幾種。我是前端挖坑妹，準(zhǔn)備好了么？一起粗發(fā)~

? 在代碼示例中我會(huì)用到es6中的語(yǔ)言，如果你還不是很了解，你可以看看阮老師的es6.(= =我也是一點(diǎn)一點(diǎn)跟著看的。)

1.map

? 先說(shuō)一下最常用的map.利用map方便獲得對(duì)象數(shù)組中的特定屬性值們.它返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

//將a02品牌的標(biāo)價(jià)全部加100
const clothesArr=[
  {username:"sunan",haveA02:false,basePrice:30},
  {username:"fenshuajiang",haveA02:true,basePrice:10},
  {username:"huixin",haveA02:true,basePrice:20}
]//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8

clothesArr.map(
    item=>item.haveA02?{...item,basePrice:item.basePrice+100}:item
)

map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

map() 不會(huì)改變?cè)紨?shù)組。

2.filter

? filter和map相比，它也接受一個(gè)函數(shù)，并把接受的函數(shù)依次作用于每個(gè)元素，返回值為true和false,true留下，false扔掉！看看例子~

const filterArr = [1,2,3,4,5,6,7,8,9,10];//這里我只想要3的倍數(shù)

const newArr = filterArr.filter((x) => x % 3 == 0);

console.log(newArr);//(3) [3, 6, 9]

這里需要注意：

filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

filter() 不會(huì)改變?cè)紨?shù)組,所以你需要賦值到新數(shù)組上。

3.forEach

forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。forEach方法中的function回調(diào)有三個(gè)參數(shù)：第一個(gè)參數(shù)是遍歷的數(shù)組內(nèi)容，第二個(gè)參數(shù)是對(duì)應(yīng)的數(shù)組索引，第三個(gè)參數(shù)是數(shù)組本身,數(shù)組中有幾項(xiàng)，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次.

const forEachArr=[1,2,3,4,5];//計(jì)算所有數(shù)組的和
var sum=0;
forEachArr.forEach((value,index,array)=>{
    sum+=value;  
    });//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
console.log(sum);//15

這里需要注意：

forEach() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

4.for in

以前覺(jué)得這個(gè)不常用，但現(xiàn)在真的很感謝有這個(gè)函數(shù),因?yàn)樽罱?xiàng)目中解決了很多問(wèn)題，尤其是對(duì)象拿value值的時(shí)候，先來(lái)說(shuō)說(shuō)對(duì)數(shù)組的時(shí)候怎么用。

const forInArr=[1,2,3,4,5]
for(let index in forInArr){
    console.log(index,forInArr[index]);
}
//0 1
//1 2
//2 3
//3 4
//4 5

用for in不僅可以對(duì)數(shù)組便利,也可以對(duì)enumerable（可枚舉）對(duì)象操作

const forInObj={
  "111":{name:"huixin",size:"m"},
  "222":{name:"sunan",size:"l"},
  "333":{name:"fenshuajiang",size:"s"}
};//這個(gè)時(shí)候我只想取到value值傳給后端，key值不要。
for(let index in forInObj){
    console.log(index,forInObj[index]);
}
//111 {name: "huixin", size: "m"}
//222 {name: "sunan", size: "l"}
//333 {name: "fenshuajiang", size: "s"}

在這里插播一個(gè)問(wèn)題：給你一個(gè)對(duì)象，去掉里面屬性值為null、""或者undefined的屬性

let objs={
  a:false,
  b:null,
  c:undefined,
  d:""
}

const dataType=(obj)=>{
    if (obj===null) return "Null";
    if (obj===undefined) return "Undefined";
    return Object.prototype.toString.call(obj).slice(8,-1);
};

const filtrateValue=(obj)=>{
    var param = {};
    if ( obj === null || obj === undefined || obj === "" ) return param;
    for ( var key in obj ){
        if ( dataType(obj[key]) === "Object" ){
            param[key] = filtrateValue(obj[key]);
        }else if(  obj[key] !== null && obj[key] !== undefined && obj[key] !== ""  ){//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
            param[key] = obj[key];
        }
    }
    return param;
};
filtrateValue(objs);

//{a: false}

5.for of

在es6 中新增了一個(gè) for of 循環(huán)，這個(gè)還沒(méi)怎么用過(guò)，以后要多用才能記得住，看看例子～

const forOfArr="huixin";
for(let value of forOfArr) {  
        console.log(value);  
};
//h
//u
//i
//x
//i
//n

for in總是得到對(duì)像的key或數(shù)組,字符串的下標(biāo),而for of和forEach一樣,是直接得到值

注意：for of不能對(duì)對(duì)象用

6.set

Set類似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值,也沒(méi)有索引。用set.size表示偽數(shù)組長(zhǎng)度

var setArr= [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];//數(shù)組去重
var set = new Set(setArr);
var newArr = new Array(...set);
console.log(newArr);//(7) [7, 8, 82, 839, 49, 329, 3]

7.some

這個(gè)函數(shù)，我覺(jué)得只是檢測(cè)數(shù)組中是否有某個(gè)元素，符合條件，符合返回true。如果沒(méi)有滿足條件的元素，則返回false。感覺(jué)有點(diǎn)像|字符。

var someArr = [2, 13, 18, 20];//檢測(cè)是否有人小于18歲
let outcome=someArr.some( (age)=>{ return age<18})
console.log(outcome);//true

注意： some() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： some() 不會(huì)改變?cè)紨?shù)組。

8.every

這個(gè)函數(shù)，檢測(cè)數(shù)組中是否有某個(gè)元素，不符合條件，有一個(gè)為false,則返回false。如果都滿足條件的元素，則返回true。感覺(jué)有點(diǎn)像&字符。

var someArr = [2, 13, 18, 20];//檢測(cè)是否都是未成年
let outcome=someArr.every((age)=>{ return age<18})
console.log(outcome);//false

注意： every() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： every() 不會(huì)改變?cè)紨?shù)組。

9.reduce

? 最后一個(gè)，reduce，剛接觸前端的時(shí)候，我也不明白，現(xiàn)在到是知道那么一丟丟了。這個(gè)方法有點(diǎn)不同，4個(gè)參數(shù)。接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。

? prev：它是上一次調(diào)用回調(diào)時(shí)返回的結(jié)果，每次調(diào)用的結(jié)果都會(huì)給prev

? cur：當(dāng)前的元素

? index：當(dāng)前的索引

? arr：循環(huán)的數(shù)組

var reduceArr = [1,2,3,4,5]//求和
 
var str = reduceArr.reduce((prev,cur,index,arr)=>{
    return prev + cur ;//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
})

console.log(str);//15

10.Object.keys(obj)

朋友小機(jī)靈又幫我添加了一個(gè)，可以遍歷對(duì)象

const forInObj={
  "111":{name:"huixin",size:"m"},
  "222":{name:"sunan",size:"l"},
  "333":{name:"fenshuajiang",size:"s"}
};//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
Object.keys(forInObj).map(item=>console.log(item,forInObj[item]));

//111 {name: "huixin", size: "m"}
//222 {name: "sunan", size: "l"}
//333 {name: "fenshuajiang", size: "s"}

學(xué)了這么多，不一定強(qiáng)制我在工作中一定要用到，玩的順手就好，畢竟每天進(jìn)步一點(diǎn)點(diǎn)，心里才踏實(shí)，哈哈。我是前端挖坑妹，一個(gè)每天給自己挖坑的妹子，下次見哈～

vue/react/java/大廠面試題等資源免費(fèi)獲取

大家好 這就是2018年的我～

如何給localStorage設(shè)置一個(gè)有效期？

脫了程序員的格子衫 我是如何月入三萬(wàn)的～

如何給localStorage設(shè)置一個(gè)有效期？

前端好文匯總分享～

阿里云產(chǎn)品限時(shí)優(yōu)惠

作者：前端挖坑妹
鏈接：http://susouth.com/
交流：912594095、公眾號(hào)：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。