淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總結(jié)
1.map
有返回值,返回一個(gè)新的數(shù)組,每個(gè)元素為調(diào)用func的結(jié)果。
let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { return d * 2; }); console.log(other); // print: [2, 4, 6, 8, 10]
2.filter
有返回值,返回一個(gè)符合func條件的元素?cái)?shù)組
let list = [1, 2, 3, 4, 5]; let other = list.filter((d, i) => { return d % 2; }); console.log(other); // print: [1, 3, 5]
3.some
對(duì)數(shù)組中的每一個(gè)元素進(jìn)行遍歷,遇到return true退出循環(huán)
var list=[1,2,3,4,5,6] var sum = 0; list.some(obj->{ sum = sum + obj; if(obj === 5) return true }) console.log(sum); //sum == 10
返回一個(gè)boolean,判斷是否有元素符合func條件,如果有一個(gè)元素符合func條件,則循環(huán)會(huì)終止。
let list = [1, 2, 3, 4, 5]; list.some((d, i) => { console.log(d, i); return d > 3; }); // print: 1,0 2,1 3,2 4,3 // return false
4.every
對(duì)數(shù)組中的每一個(gè)元素進(jìn)行遍歷,遇到return false退出循環(huán)
var list=[1,2,3,4,5,6] var sum = 0; list.euery(obj->{ sum = sum + obj; if(obj === 5) return false }) console.log(sum); //sum == 10
返回一個(gè)boolean,判斷每個(gè)元素是否符合func條件,有一個(gè)元素不滿足func條件,則循環(huán)終止,返回false。
let list = [1, 2, 3, 4, 5]; list.every((d, i) => { console.log(d, i); return d < 3; }); // print: 1,0 2,1 3,2 // return false
5.forEach
對(duì)數(shù)組中的每一個(gè)元素進(jìn)行遍歷,直到循環(huán)完成
var list=[1,2,3,4,5,6] var sum = 0; list.some(obj->{ sum = sum + obj; if(obj === 3) return true if(obj === 4) return false if(obj === 5) return }) console.log(sum); //sum == 21
沒有返回值,只針對(duì)每個(gè)元素調(diào)用func。
優(yōu)點(diǎn):代碼簡(jiǎn)介。
缺點(diǎn):無(wú)法使用break,return等終止循環(huán)。
let list = [1, 2, 3, 4, 5]; let other = []; list.forEach((d, i) => { other.push(d * 2); }); console.log(other); // print: [2, 4, 6, 8, 10]
6.for in
for-in循環(huán)實(shí)際是為循環(huán)”enumerable“對(duì)象而設(shè)計(jì)的,for in也可以循環(huán)數(shù)組,但是不推薦這樣使用,for–in是用來(lái)循環(huán)帶有字符串key的對(duì)象的方法。
缺點(diǎn):只能獲得對(duì)象的鍵名,不能直接獲取鍵值。
var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); } // print: "obj.a = 1" "obj.b = 2" "obj.c = 3"
7.for of
for of為ES6提供,具有iterator接口,就可以用for of循環(huán)遍歷它的成員。也就是說(shuō),for of循環(huán)內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator方法。
for of循環(huán)可以使用的范圍包括數(shù)組、Set和Map結(jié)構(gòu)、某些類似數(shù)組的對(duì)象(比如arguments對(duì)象、DOM NodeList對(duì)象)、后文的Generator對(duì)象,以及字符串。
有些數(shù)據(jù)結(jié)構(gòu)是在現(xiàn)有數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)上,計(jì)算生成的。比如,ES6的數(shù)組、Set、Map都部署了以下三個(gè)方法,調(diào)用后都返回遍歷器對(duì)象。
entries
entries() 返回一個(gè)遍歷器對(duì)象,用來(lái)遍歷[鍵名, 鍵值]組成的數(shù)組。對(duì)于數(shù)組,鍵名就是索引值;對(duì)于Set,鍵名與鍵值相同。Map結(jié)構(gòu)的iterator接口,默認(rèn)就是調(diào)用entries方法。
keys
keys() 返回一個(gè)遍歷器對(duì)象,用來(lái)遍歷所有的鍵名。
values
values() 返回一個(gè)遍歷器對(duì)象,用來(lái)遍歷所有的鍵值。
這三個(gè)方法調(diào)用后生成的遍歷器對(duì)象,所遍歷的都是計(jì)算生成的數(shù)據(jù)結(jié)構(gòu)。
// 字符串 let str = "hello"; for (let s of str) { console.log(s); // h e l l o } // 遍歷數(shù)組 let list = [1, 2, 3, 4, 5]; for (let e of list) { console.log(e); } // print: 1 2 3 4 5 // 遍歷對(duì)象 obj = {a:1, b:2, c:3}; for (let key of Object.keys(obj)) { console.log(key, obj[key]); } // print: a 1 b 2 c 3
說(shuō)明:對(duì)于普通的對(duì)象,for...in循環(huán)可以遍歷鍵名,for...of循環(huán)會(huì)報(bào)錯(cuò)。
一種解決方法是,使用Object.keys方法將對(duì)象的鍵名生成一個(gè)數(shù)組,然后遍歷這個(gè)數(shù)組。
// entries let arr = ['a', 'b', 'c']; for (let pair of arr.entries()) { console.log(pair); } // [0, 'a'] // [1, 'b'] // [2, 'c']
以上所述是小編給大家介紹的淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
在前端模塊化的時(shí)候,不僅僅是js需要進(jìn)行模塊化管理,html有時(shí)候也需要模塊化管理。這里就介紹下如何通過(guò)requirejs,實(shí)現(xiàn)html代碼的模塊化開發(fā)2016-04-04JS實(shí)現(xiàn)定時(shí)頁(yè)面彈出類似QQ新聞的提示框
類似QQ新聞的提示框要求頁(yè)面每隔半小時(shí)彈出一次提示消息,下面有個(gè)不錯(cuò)的實(shí)現(xiàn)方法,感興趣的朋友可以參考下2013-11-11JS 用6N±1法求素?cái)?shù) 實(shí)例教程
顯然,當(dāng)N≥1時(shí),6N,6N+2,6N+3,6N+4都不是素?cái)?shù),只有形如6N+1和6N+5的自然數(shù)有可能是素?cái)?shù)。所以,除了2和3之外,所有的素?cái)?shù)都可以表示成6N±1的形式(N為自然數(shù))。2009-10-10