1、forEach()
forEach() 方法指定數(shù)組的每項元素都執(zhí)行一次傳入的函數(shù),返回值為undefined。
語法:arr.forEach(fn, thisArg);
fn表示在數(shù)組每一項上執(zhí)行的函數(shù)function(value, index, array),接受三個參數(shù):
- value 當(dāng)前正在被處理的元素的值
- index 當(dāng)前元素的數(shù)組索引
- array 數(shù)組本身
thisArg可選谁撼,用來當(dāng)做fn函數(shù)內(nèi)的this對象。
forEach 將為數(shù)組中每一項執(zhí)行一次 fn 函數(shù)滋饲,那些已刪除厉碟,新增或者從未賦值的項將被跳過(但不包括值為 undefined 的項)。
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
array[index] = value * value;
console.log(this.name); // cc被打印了三次
},obj);
console.log(array); // [1, 9, 25], 可見原數(shù)組改變了
console.log(sReturn); // undefined, 可見返回值為undefined
得益于鴨式辨型屠缭,雖然forEach不能直接遍歷對象箍鼓,但它可以通過call方式遍歷類數(shù)組對象。如下:
var o = {0:1, 1:3, 2:5, length:3};
Array.prototype.forEach.call(o,function(value, index, obj){
console.log(value,index,obj);
obj[index] = value * value;
},o);
// 1 0 Object {0: 1, 1: 3, 2: 5, length: 3}
// 3 1 Object {0: 1, 1: 3, 2: 5, length: 3}
// 5 2 Object {0: 1, 1: 9, 2: 5, length: 3}
console.log(o); // Object {0: 1, 1: 9, 2: 25, length: 3}
注意:forEach無法直接退出循環(huán)呵曹,只能使用return 來達(dá)到for循環(huán)中continue的效果款咖,并且forEach不能在低版本IE(6~8)中使用
2何暮、map()
map() 方法遍歷數(shù)組,使用傳入函數(shù)處理每個元素铐殃,并返回函數(shù)的返回值組成的新數(shù)組海洼。
語法:arr.map(fn, thisArg)
fn和thisArg同forEach()
var arr = [1,2,3,4];
arr.map((value,index,array) => {
return item*10 //新數(shù)組為10,20,30,40
})
//map遍歷數(shù)組,返回一個新數(shù)組富腊,不改變原數(shù)組的值坏逢。
3、filter()
filter() 方法使用傳入的函數(shù)測試所有元素赘被,并返回所有通過測試的元素組成的新數(shù)組是整。它就好比一個過濾器,篩掉不符合條件的元素民假。
語法:arr.filter(fn, thisArg)
fn和thisArg同forEach()
var arr = [1,2,3,4];
arr.filter((value,index,array) => {
return value > 2 //新數(shù)組為[3,4]
})
//filter過濾掉數(shù)組中不滿足條件的值浮入,返回一個新數(shù)組,不改變原數(shù)組的值阳欲。
4舵盈、reduce()
reduce() 方法接收一個方法作為累加器陋率,數(shù)組中的每個值(從左至右) 開始合并球化,最終為一個值。
語法:arr.reduce(fn, initialValue)
fn 表示在數(shù)組每一項上執(zhí)行的函數(shù)瓦糟,接受四個參數(shù):
- previousValue 上一次調(diào)用回調(diào)返回的值筒愚,或者是提供的初始值
- value 數(shù)組中當(dāng)前被處理元素的值
- index 當(dāng)前元素在數(shù)組中的索引
- array 數(shù)組自身
var arr = [1,2,3,4];
arr.reduce((previousValue,value,index,array) => {
console.log(previousValue) // 1 3 6 previousValue為上次一計算的結(jié)果
console.log(value) // 2 3 4
console.log(index) // 1 2 3
return previousValue+value //最終結(jié)果為10
})
//reduce 讓數(shù)組的前后兩項進(jìn)行某種計算。然后返回其值菩浙,并繼續(xù)計算巢掺。
//不改變原數(shù)組,返回計算的最終結(jié)果劲蜻,從數(shù)組的第二項開始遍歷陆淀。
5、every()
every() 方法使用傳入的函數(shù)測試所有元素先嬉,只要其中有一個函數(shù)返回值為 false轧苫,那么該方法的結(jié)果為 false;如果全部返回 true疫蔓,那么該方法的結(jié)果才為 true含懊。因此 every 方法存在如下規(guī)律:
- 若需檢測數(shù)組中存在元素大于100 (即 one > 100),那么我們需要在傳入的函數(shù)中構(gòu)造 “false” 返回值 (即返回 item <= 100)衅胀,同時整個方法結(jié)果為 false 才表示數(shù)組存在元素滿足條件岔乔;(簡單理解為:若是單項判斷,可用 one false ===> false)
- 若需檢測數(shù)組中是否所有元素都大于100 (即all > 100)那么我們需要在傳入的函數(shù)中構(gòu)造 “true” 返回值 (即返回 item > 100)滚躯,同時整個方法結(jié)果為 true 才表示數(shù)組所有元素均滿足條件雏门。(簡單理解為:若是全部判斷嘿歌,可用 all true ===> true)
var arr = [1,2,3,4];
arr.every((value,index,array) => {
return value> 1 //結(jié)果為false
})
//遍歷數(shù)組每一項,每一項返回true,則最終結(jié)果為true茁影。
//當(dāng)任何一項返回false時搅幅,停止遍歷,返回false呼胚。不改變原數(shù)組
以下是鴨式辨型的寫法:
var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){
return value >= 8;
},o);
console.log(bool); // true
6茄唐、some()
some() 方法剛好同 every() 方法相反,some 測試數(shù)組元素時蝇更,只要有一個函數(shù)返回值為 true沪编,則該方法返回 true,若全部返回 false年扩,則該方法返回 false蚁廓。some 方法存在如下規(guī)律:
- 若需檢測數(shù)組中存在元素大于100 (即 one > 100),那么我們需要在傳入的函數(shù)中構(gòu)造 “true” 返回值 (即返回 item > 100)厨幻,同時整個方法結(jié)果為 true 才表示數(shù)組存在元素滿足條件相嵌;(簡單理解為:若是單項判斷,可用 one true ===> true)
- 若需檢測數(shù)組中是否所有元素都大于100(即 all > 100)况脆,那么我們需要在傳入的函數(shù)中構(gòu)造 “false” 返回值 (即返回 item <= 100)饭宾,同時整個方法結(jié)果為 false 才表示數(shù)組所有元素均滿足條件。(簡單理解為:若是全部判斷格了,可用 all false ===> false)
some方法與includes方法有著異曲同工之妙看铆,他們都是探測數(shù)組中是否擁有滿足條件的元素,一旦找到盛末,便返回true弹惦。
some 的鴨式辨型寫法可以參照every,同樣它也不能在低版本IE(6~8)中使用
var arr = [1,2,3,4];
arr.some((value,index,array) => {
return value> 3 //結(jié)果為true
})
//遍歷數(shù)組每一項悄但,只要有一個函數(shù)返回值為 true棠隐,結(jié)果返回true。
//若全部返回 false檐嚣,則該方法返回 false助泽。
//不改變原數(shù)組