淺談javascript 迭代方法
ECMAScript5為數(shù)組定義了5個(gè)迭代方法。每個(gè)方法都接收兩個(gè)參數(shù):要在每一項(xiàng)上運(yùn)行的函數(shù)和(可選的)運(yùn)行該函數(shù)的作用域?qū)ο螅从绊憈his的值)。傳入這些方法中的函數(shù)會(huì)接收三個(gè)參數(shù):數(shù)組項(xiàng)的值、該項(xiàng)在數(shù)組中的位置和數(shù)組對(duì)象本身。根據(jù)使用方法的不同,這個(gè)函數(shù)執(zhí)行后的返回值可能會(huì)也可能不會(huì)影響方法的返回值。這5個(gè)迭代方法是:
五個(gè)迭代方法 都接受兩個(gè)參數(shù):要在每一項(xiàng)上運(yùn)行的函數(shù) 和 運(yùn)行該函數(shù)的作用域(可選)
every():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。如果函數(shù)對(duì)每一項(xiàng)都返回true,則返回true。
filter():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組。
forEach():對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)。該函數(shù)沒(méi)有返回值。
map():對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)。返回每次函數(shù)調(diào)用的結(jié)果組成的函數(shù)。
some():對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)。如果函數(shù)對(duì) 任一項(xiàng)返回true,則返回true
以上所有的方法都不會(huì)修改數(shù)組中包含的值。
在上面的方法中,every()和some()非常相似,它們都用于查詢(xún)數(shù)組中的項(xiàng)是否滿(mǎn)足某個(gè)條件。對(duì)于every()方法來(lái)說(shuō),傳入的函數(shù)必須對(duì)每一項(xiàng)都返回true,這個(gè)方法才返回true。否則,它就返回false。而some()方法則是只要傳入的函數(shù)對(duì)數(shù)組的某一項(xiàng)返回true,就會(huì)返回true。例如:
var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.every(function(item, index, array){
return (item > 2);
})
console.info(result);
上面的代碼會(huì)在控制臺(tái)中打印false。
var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.some(function(item, index, array){
return (item > 2);
})
console.info(result);
上面的代碼會(huì)在控制臺(tái)中打印true。
下面是一個(gè)filter()函數(shù)的例子,它利用指定的函數(shù)確定是否存在返回的數(shù)組中包含某一項(xiàng)。例如,要返回一個(gè)所有數(shù)值都大于2的數(shù)組,可以使用下面的代碼:
var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.filter(function(item, index, array){
return (item > 2);
})
console.info(result); // [3,4,5,4,3]
上面的代碼通過(guò)調(diào)用filter()方法返回包含3,4,5,4,3的數(shù)組。這個(gè)方法對(duì)于查詢(xún)符合某些條件的所有數(shù)組非常有用。
map()方法也返回一個(gè)數(shù)組,而這個(gè)數(shù)組的每一項(xiàng)都是在原始數(shù)組中的對(duì)應(yīng)項(xiàng)上運(yùn)行傳入函數(shù)的結(jié)果。例如,可以給數(shù)組中的每一項(xiàng)都乘以2,然后返回這些乘積組成的數(shù)組:
var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.map(function(item, index, array){
return item * 2;
})
console.info(result); // [2,4,6,8,10,8,6,4,2]
map()方法適合用于創(chuàng)建包含的項(xiàng)于另一個(gè)數(shù)組一一對(duì)應(yīng)的數(shù)組。
最后一個(gè)是forEach()方法,它只是對(duì)數(shù)組中的每一項(xiàng)運(yùn)行傳入的函數(shù)。這個(gè)方法沒(méi)有返回值,本質(zhì)上于使用for循環(huán)迭代數(shù)組是一樣的。看下面的例子:
var nums = [1,2,3,4,5,4,3,2,1];
nums.forEach(function(item, index, array){
//執(zhí)行需要的操作
})
js中的這些數(shù)組方法通過(guò)執(zhí)行不同的操作,可以大大的方便處理數(shù)組的任務(wù)。
支持這些迭代方法的瀏覽器有:IE9+,F(xiàn)irefox2+,Safari3+,Opera9.5+和Chrome。
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
//every()和some()最相似
//every() item:當(dāng)前遍歷項(xiàng),index:當(dāng)前項(xiàng)索引,array:數(shù)組對(duì)象本身
var everyResult = numbers.every(function (item, index, array) {
return item > 2;
});
alert(everyResult);//false
//some()
var someResult = numbers.some(function (item, index, array) {
return item > 2;
});
alert(someResult);//true
//filter
var filterResult = numbers.filter(function (item, index, array) {
return item > 2;
});
alert(filterResult);//[3,4,5,4,3]
//map()
var mapResult = numbers.map(function (item, index, array) {
return (item * 2);
});
alert(mapResult);//[2,4,6,8,10,8,6,4,2]
//forEach 本質(zhì)上和for循環(huán)沒(méi)有區(qū)別
var forEachResult=numbers.forEach(function(item,index,array){
alert(item)
});
以上就是本文的全部?jī)?nèi)容了,希望能給大家一些提示,能夠更好的理解javascript迭代方法。
- js中遞歸函數(shù)的使用介紹
- JavaScript的遞歸之遞歸與循環(huán)示例介紹
- JS 樹(shù)形遞歸實(shí)例代碼
- JavaScript Array Flatten 與遞歸使用介紹
- JavaScript 語(yǔ)言的遞歸編程
- JS中遞歸函數(shù)
- 總結(jié)javascript中的六種迭代器
- js數(shù)組的五種迭代方法及兩種歸并方法(推薦)
- javaScript數(shù)組迭代方法詳解
- JS的數(shù)組迭代方法
- JavaScript中的迭代器和生成器詳解
- js 數(shù)組實(shí)現(xiàn)一個(gè)類(lèi)似ruby的迭代器
- Javascript 高性能之遞歸,迭代,查表法詳解及實(shí)例
相關(guān)文章
javascript使用window.open提示“已經(jīng)計(jì)劃系統(tǒng)關(guān)機(jī)”的原因
這篇文章主要介紹了javascript使用window.open提示“已經(jīng)計(jì)劃系統(tǒng)關(guān)機(jī)”的原因,本文得出結(jié)論是安裝了系統(tǒng)更新或其它原因,要把系統(tǒng)重啟時(shí)才會(huì)提示這個(gè)問(wèn)題,所以,遇到這個(gè)問(wèn)題,重啟你的電腦吧2014-08-08
如何讓頁(yè)面在打開(kāi)時(shí)自動(dòng)刷新一次讓圖片全部顯示
我的網(wǎng)頁(yè)的圖片較多,而服務(wù)器也不是很好,所以每次打開(kāi)網(wǎng)頁(yè)后總有一、兩幅圖片無(wú)法顯示,但刷新一遍后又全部可顯示了,這種問(wèn)題相信每個(gè)人都遇到過(guò),接下來(lái)介紹詳細(xì)解決方法2012-12-12
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記13 ECMAScript5新特性
通常而言,JavaScript由ECMAScript核心、BOM和DOM三部分構(gòu)成,前面的文章將ECMAScript核心部分粗略的過(guò)了一篇2012-10-10
JavaScript mapreduce工作原理簡(jiǎn)析
MapReduce是一個(gè)編程模型,用于作業(yè)調(diào)度,也是一個(gè)處理和生成超大數(shù)據(jù)集的算法模型的相關(guān)實(shí)現(xiàn),本文將詳細(xì)介紹JavaScript mapreduce工作原理,需要的朋友可以參考下2012-11-11
深入探討JavaScript的最基本部分之執(zhí)行上下文
今天小編就為大家分享一篇關(guān)于深入探討JavaScript的最基本部分之執(zhí)行上下文,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02

