Javascript中的find()吟宦、findIndex()、filter()涩维、forEach()殃姓、some()、every()瓦阐、map()蜗侈、reduce()用法

1、find()與findIndex()
find()方法睡蟋,用于找出第一個符合條件的數(shù)組成員踏幻,它的參數(shù)是一個回調函數(shù),所有數(shù)組成員依次執(zhí)行該回調函數(shù)戳杀,直到找出一個返回值為true的成員该面,返回該成員,反之信卡,最返回undefined隔缀。

[1,2,3,-1,6].find((n) => n < 0)
// 找出數(shù)組中第一個小于0的成員 -1

find()方法的回調函數(shù)可以接受三個參數(shù),以此為當前的值傍菇、當前的位置和原數(shù)組猾瘸。
findeIndex() 方法的用法與find()方法類似,返回第一個符合條件的數(shù)組成員的位置,如若全部不符合牵触,則返回 -1 可以快速查找某個元素在某個數(shù)組中出現(xiàn)的位置

var id = 66
data =[{
  name:'測試',
  id:55
},{
  name:'findIndex',
  id:66
}]
var currentIndex = (data||[]).findIndex((item) =>item.id === id);
// 1

2淮悼、filter()
filter()方法使用指定的函數(shù)測試所有元素,并創(chuàng)建一個包含所有通過測試元素的新數(shù)組荒吏。
filter 維數(shù)組中的每一個元素調用一次 callback函數(shù)敛惊,并利用所有使得 callback 返回 true 或 等價于 true 的值 的元素創(chuàng)建一個新數(shù)組。那些沒有通過 callback 測試的元素會被跳過绰更,不會被包含在新數(shù)組中瞧挤。filter 不會改變原數(shù)組。

var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]
//數(shù)組去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x) === index)  
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

3儡湾、forEach()
遍歷數(shù)組全部元素特恬,利用回調函數(shù)對數(shù)組進行操作,自動遍歷整個數(shù)組徐钠,且無法break中跳出循環(huán)癌刽,不可控,不支持return操作輸出尝丐,return只用于控制循環(huán)是否是跳出當前循環(huán)
回調有三個參數(shù):
1显拜、遍歷的數(shù)組內容
2、是對應的數(shù)組索引
3爹袁、是數(shù)組本身

var arr = [1,2,3,4,5,6];
arr.forEach((item,index) =>{
  console.log(item)
})

4远荠、some() 和 every()
every() 與some都是js中數(shù)組的迭代方法,只返回布爾值
every()
判斷數(shù)組中是否每個元素都滿足條件失息,都滿足譬淳、返回true,反之盹兢,只要一個不滿足 返回 false邻梆。
some()
與every() 相反,一個滿足就返回true绎秒,都不滿足浦妄,返回false


// 判斷數(shù)組arr1是否全是偶數(shù)
// 判斷數(shù)組arr2是否至少有一個偶數(shù)
 
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
    arr1.every(function(value, index, array){
        return value % 2 == 0;
    })
);    // false
console.log(
    arr2.some(function(value, index, array){
        return value % 2 == 0;
    })
);    // true

5、map()
map()方法返回一個新數(shù)組见芹,數(shù)組中的元素為原始數(shù)組元素調用函數(shù)處理后的值校辩。
map()方法按照原始數(shù)組元素順序依次處理元素。
map()不會對空數(shù)組進行檢測
map() 不會改變原始數(shù)組辆童。

var data =[1,2,3,4]
var arrayOfSquares = data.map(function(item){
return item*item
})
alert(arrayOfSquares); // [1,4,9,16]

6宜咒、reduce()
1、reduce() 方法接收一個函數(shù)作為累加器(accumulator)把鉴,數(shù)組中的每個值(從左到右)開始合并故黑,最終成為一個值儿咱。
array.reduce(callback,initialValue)
2、callback:執(zhí)行數(shù)組中每個值的函數(shù)场晶,包括4個參數(shù)混埠。

1.previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2.currentValue:數(shù)組中當前被處理的元素
3.index:當前元素在數(shù)組中的索引
4.array:調用reduce的數(shù)組
// 獲取購物車中商品列表的價格總和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price: 15, qty: 2}, {id: 3, price: 20, qty: 1}]
 
let totalPrice = goodList.reduce((prev, cur) => {
    return prev + cur.price * cur.qty
}, 0)
 
console.log(totalPrice) // 100
var arrString = 'abcdaabc'
// 獲取字符中中每個字母出現(xiàn)的次數(shù)
let count = arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur]++ : res[cur] = 1
    return res
}, {})
console.log(count) // {a: 3, b: 2, c: 2, d: 1}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市诗轻,隨后出現(xiàn)的幾起案子钳宪,更是在濱河造成了極大的恐慌,老刑警劉巖扳炬,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吏颖,死亡現(xiàn)場離奇詭異,居然都是意外死亡恨樟,警方通過查閱死者的電腦和手機半醉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來劝术,“玉大人缩多,你說我怎么就攤上這事⊙” “怎么了衬吆?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長绳泉。 經常有香客問我咆槽,道長,這世上最難降的妖魔是什么圈纺? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮麦射,結果婚禮上蛾娶,老公的妹妹穿的比我還像新娘。我一直安慰自己潜秋,他們只是感情好蛔琅,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著峻呛,像睡著了一般罗售。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钩述,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天寨躁,我揣著相機與錄音,去河邊找鬼牙勘。 笑死职恳,一個胖子當著我的面吹牛所禀,可吹牛的內容都是我干的。 我是一名探鬼主播放钦,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼色徘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了操禀?” 一聲冷哼從身側響起褂策,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎颓屑,沒想到半個月后斤寂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡邢锯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年扬蕊,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丹擎。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡尾抑,死狀恐怖,靈堂內的尸體忽然破棺而出蒂培,到底是詐尸還是另有隱情再愈,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布护戳,位于F島的核電站翎冲,受9級特大地震影響,放射性物質發(fā)生泄漏媳荒。R本人自食惡果不足惜抗悍,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望钳枕。 院中可真熱鬧缴渊,春花似錦、人聲如沸鱼炒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昔瞧。三九已至指蚁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間自晰,已是汗流浹背凝化。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留酬荞,地道東北人缘圈。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓劣光,卻偏偏與公主長得像,于是被迫代替她去往敵國和親糟把。 傳聞我的和親對象是個殘疾皇子绢涡,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354