深刻了解JavaScript 中的For循環之詳解

前言:

​ 今天我想分享一個有關於循環篩選的知識點，也許是前端小白的你首先想到的是用for循環作篩選，但我這種小菜鳥想到的就是map(工做中很喜歡用= =),學過數據結構的小夥伴也確定知道，線性表這些跟循環也息息相關，包括你出去面試的時候或許你遇到過這樣的問題，map和forEach的區別？去重的幾種方式？說實話，forEach我真的不多用，但不知足於現狀的我，以爲應該多學習幾種。我是前端挖坑妹，準備好了麼？一塊兒粗發~

正文:

​ 在代碼示例中我會用到es6中的語言，若是你還不是很瞭解，你能夠看看阮老師的es6.(= =我也是一點一點跟着看的。)

1.map

​ 先說一下最經常使用的map.利用map方便得到對象數組中的特定屬性值們.它返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

//將a02品牌的標價所有加100
const clothesArr=[
  {username:"sunan",haveA02:false,basePrice:30},
  {username:"fenshuajiang",haveA02:true,basePrice:10},
  {username:"huixin",haveA02:true,basePrice:20}
]//蘇南的專欄 交流：91259409五、公衆號：honeyBadger8

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

• map() 不會對空數組進行檢測。

• map() 不會改變原始數組。

2.filter

​ filter和map相比，它也接受一個函數，並把接受的函數依次做用於每一個元素，返回值爲true和false,true留下，false扔掉！看看例子~

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

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

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

這裏須要注意：

• filter() 不會對空數組進行檢測。

• filter() 不會改變原始數組,因此你須要賦值到新數組上。

3.forEach

forEach() 方法用於調用數組的每一個元素，並將元素傳遞給回調函數。forEach方法中的function回調有三個參數：第一個參數是遍歷的數組內容，第二個參數是對應的數組索引，第三個參數是數組自己,數組中有幾項，那麼傳遞進去的匿名回調函數就須要執行幾回.

const forEachArr=[1,2,3,4,5];//計算全部數組的和
var sum=0;
forEachArr.forEach((value,index,array)=>{
    sum+=value;  
    });//蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
console.log(sum);//15

這裏須要注意：

• forEach() 對於空數組是不會執行回調函數的。

4.for in

之前以爲這個不經常使用，但如今真的很感謝有這個函數,由於最近項目中解決了不少問題，尤爲是對象拿value值的時候，先來講說對數組的時候怎麼用。

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不只能夠對數組便利,也能夠對enumerable（可枚舉）對象操做

const forInObj={
  '111':{name:'huixin',size:'m'},
  '222':{name:'sunan',size:'l'},
  '333':{name:'fenshuajiang',size:'s'}
};//這個時候我只想取到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"}

在這裏插播一個問題：給你一個對象，去掉裏面屬性值爲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] !== ""  ){//蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
            param[key] = obj[key];
        }
    }
    return param;
};
filtrateValue(objs);

//{a: false}

5.for of

在es6 中新增了一個 for of 循環，這個還沒怎麼用過，之後要多用才能記得住，看看例子～

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

for in老是獲得對像的key或數組,字符串的下標,而for of和forEach同樣,是直接獲得值

注意：for of不能對對象用

6.set

Set相似於數組，可是成員的值都是惟一的，沒有重複的值,也沒有索引。用set.size表示僞數組長度

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

7.some

這個函數，我以爲只是檢測數組中是否有某個元素，符合條件，符合返回true。若是沒有知足條件的元素，則返回false。感受有點像|字符。

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

注意： some() 不會對空數組進行檢測。

注意： some() 不會改變原始數組。

8.every

這個函數，檢測數組中是否有某個元素，不符合條件，有一個爲false,則返回false。若是都知足條件的元素，則返回true。感受有點像&字符。

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

注意： every() 不會對空數組進行檢測。

注意： every() 不會改變原始數組。

9.reduce

​ 最後一個，reduce，剛接觸前端的時候，我也不明白，如今到是知道那麼一丟丟了。這個方法有點不一樣，4個參數。接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

​ prev：它是上一次調用回調時返回的結果，每次調用的結果都會給prev

​ cur：當前的元素

​ index：當前的索引

​ arr：循環的數組

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

console.log(str);//15

10.Object.keys(obj)

朋友小機靈又幫我添加了一個，能夠遍歷對象

const forInObj={
  '111':{name:'huixin',size:'m'},
  '222':{name:'sunan',size:'l'},
  '333':{name:'fenshuajiang',size:'s'}
};//蘇南的專欄 交流：91259409五、公衆號：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"}

總結

學了這麼多，不必定強制我在工做中必定要用到，玩的順手就好，畢竟天天進步一點點，內心才踏實，哈哈。我是前端挖坑妹，一個天天給本身挖坑的妹子，下次見哈～

以爲不錯的話，請記得關注支持咱們哦～

其餘

• vue/react/java/大廠面試題等資源免費獲取
• 你們好 這就是2018年的我～
• 如何給localStorage設置一個有效期？
• 脫了程序員的格子衫 我是如何月入三萬的～
• 如何給localStorage設置一個有效期？
• 前端好文彙總分享～
• 阿里雲產品限時優惠
• 面試官問：可否模擬實現JS的new操做符
• GraphQL-前端進階的利劍與橋樑

做者：前端挖坑妹 連接：http://susouth.com/ 交流：91259409五、公Z號：honeyBadger8 本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。