淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總結(jié)
1.map
有返回值，返回一個新的數(shù)組，每個元素為調(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
有返回值，返回一個符合func條件的元素數(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
對數(shù)組中的每一個元素進(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
返回一個boolean，判斷是否有元素符合func條件，如果有一個元素符合func條件，則循環(huán)會終止。
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
對數(shù)組中的每一個元素進(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
返回一個boolean，判斷每個元素是否符合func條件，有一個元素不滿足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
對數(shù)組中的每一個元素進(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
沒有返回值，只針對每個元素調(diào)用func。
優(yōu)點：代碼簡介。
缺點：無法使用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)實際是為循環(huán)”enumerable“對象而設(shè)計的，for in也可以循環(huán)數(shù)組，但是不推薦這樣使用，for–in是用來循環(huán)帶有字符串key的對象的方法。
缺點：只能獲得對象的鍵名，不能直接獲取鍵值。
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)遍歷它的成員。也就是說，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ù)組的對象（比如arguments對象、DOM NodeList對象）、后文的Generator對象，以及字符串。
有些數(shù)據(jù)結(jié)構(gòu)是在現(xiàn)有數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)上，計算生成的。比如，ES6的數(shù)組、Set、Map都部署了以下三個方法，調(diào)用后都返回遍歷器對象。
entries
entries() 返回一個遍歷器對象，用來遍歷[鍵名, 鍵值]組成的數(shù)組。對于數(shù)組，鍵名就是索引值；對于Set，鍵名與鍵值相同。Map結(jié)構(gòu)的iterator接口，默認(rèn)就是調(diào)用entries方法。
keys
keys() 返回一個遍歷器對象，用來遍歷所有的鍵名。
values
values() 返回一個遍歷器對象，用來遍歷所有的鍵值。
這三個方法調(diào)用后生成的遍歷器對象，所遍歷的都是計算生成的數(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
// 遍歷對象
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
說明：對于普通的對象，for...in循環(huán)可以遍歷鍵名，for...of循環(huán)會報錯。
一種解決方法是，使用Object.keys方法將對象的鍵名生成一個數(shù)組，然后遍歷這個數(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é)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Layui組件Table綁定行點擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點擊事件和獲取行數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在Html中使用Requirejs進(jìn)行模塊化開發(fā)實例詳解
在前端模塊化的時候，不僅僅是js需要進(jìn)行模塊化管理，html有時候也需要模塊化管理。這里就介紹下如何通過requirejs，實現(xiàn)html代碼的模塊化開發(fā)2016-04-04
類似QQ新聞的提示框要求頁面每隔半小時彈出一次提示消息，下面有個不錯的實現(xiàn)方法，感興趣的朋友可以參考下2013-11-11
alert(3)就這么段程序，沒有寫在function中，想啊想，怎么終止js呢？jfslk也能達(dá)到一樣的效果(終止js程序)2013-05-05
可能很多朋友認(rèn)為undefined是在js中未定義變量時才會提示的錯誤,其實不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關(guān)于js中undefined該怎么判斷的相關(guān)資料,需要的朋友可以參考下2023-04-04
顯然，當(dāng)N≥1時，6N，6N+2，6N+3，6N+4都不是素數(shù)，只有形如6N+1和6N+5的自然數(shù)有可能是素數(shù)。所以，除了2和3之外，所有的素數(shù)都可以表示成6N±1的形式(N為自然數(shù))。2009-10-10
由于網(wǎng)絡(luò)、瀏覽器問題、緩存等原因執(zhí)行js的時候會拋出異常接下來分享一個想法，基本上涉及到兩步：收集和使用，感興趣的你可以參考下哈，希望對你有所幫助2013-03-03
這篇文章主要介紹了分析JavaScript中this引發(fā)的bug以及相關(guān)的處理方法分析，一起學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了js中延遲加載和預(yù)加載的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01