国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jimhs / 1581人閱讀

摘要:將品牌的標價全部加蘇南的專欄交流公眾號不會對空數組進行檢測。方法用于調用數組的每個元素,并將元素傳遞給回調函數。

前言:

? 今天我想分享一個有關于循環篩選的知識點,也許是前端小白的你首先想到的是用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}
]//蘇南的專欄 交流:912594095、公眾號: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;  
    });//蘇南的專欄 交流:912594095、公眾號: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] !== ""  ){//蘇南的專欄 交流:912594095、公眾號: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 ;//蘇南的專欄 交流:912594095、公眾號: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"}
};//蘇南的專欄 交流:912594095、公眾號: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設置一個有效期?

前端好文匯總分享~

阿里云產品限時優惠

作者:前端挖坑妹
鏈接:http://susouth.com/
交流:912594095、公眾號:honeyBadger8
本文原創,著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權,非商業轉載請注明原鏈接及出處。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100854.html

相關文章

  • 深入了解JavaScript 中的For循環詳解

    摘要:將品牌的標價全部加蘇南的專欄交流公眾號不會對空數組進行檢測。方法用于調用數組的每個元素,并將元素傳遞給回調函數。 showImg(https://segmentfault.com/img/bVblSSO?w=1008&h=298); 前言: ? 今天我想分享一個有關于循環篩選的知識點,也許是前端小白的你首先想到的是用for循環做篩選,但我這種小菜鳥想到的就是map(工作中很喜歡...

    linkin 評論0 收藏0
  • 【進階2-3期】JavaScript深入閉包面試題解

    摘要:閉包面試題解由于作用域鏈機制的影響,閉包只能取得內部函數的最后一個值,這引起的一個副作用就是如果內部函數在一個循環中,那么變量的值始終為最后一個值。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第二期,本周的主題是作用域閉包,今天是第8天。 本計劃一共28期,每期重點攻克一個面試重難點,如果你還不了...

    alanoddsoff 評論0 收藏0
  • 【進階1-3期】JavaScript深入內存空間詳細圖解

    摘要:進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下,調用堆棧中函數調用的數量超出了調用堆棧的實際大小,瀏覽器會拋出一個錯誤終止運行。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第一期,本周的主題是調用堆棧,今天是第3天。 本計劃一共28期,每期重點攻...

    coordinate35 評論0 收藏0
  • 【進階2-2期】JavaScript深入從作用域鏈理解閉包

    摘要:使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數,也不是局部變量,所以是自由變量。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第二期,本周的主題是作用域閉包,今天是第7天。 本計劃一共28期,每期重點攻克一個面試重難點,如果你還不了解本進階計...

    simpleapples 評論0 收藏0

發表評論

0條評論

jimhs

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<