js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach，map與each方法】
本文實(shí)例講述了js/jquery遍歷對(duì)象和數(shù)組的方法。分享給大家供大家參考，具體如下：
JS forEach方法
arr[].forEach(function(value,index,array){
//do something
})
- 參數(shù)：value數(shù)組中的當(dāng)前項(xiàng),index當(dāng)前項(xiàng)的索引,array原始數(shù)組；
- 數(shù)組中有幾項(xiàng)，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次；
- 理論上這個(gè)方法是沒有返回值的，僅僅是遍歷數(shù)組中的每一項(xiàng)，不對(duì)原來(lái)數(shù)組進(jìn)行修改；但是可以自己通過(guò)數(shù)組的索引來(lái)修改原來(lái)的數(shù)組；
var arr = [12,23,24,42,1];
var res = arr.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->[120,230,240,420,10]; 通過(guò)數(shù)組索引改變了原數(shù)組
JS map方法
arr[].map(function(value,index,array){
//do something
})
- 參數(shù)：value數(shù)組中的當(dāng)前項(xiàng),index當(dāng)前項(xiàng)的索引,array原始數(shù)組；
- 區(qū)別：map的回調(diào)函數(shù)中支持return返回值；return的是啥，相當(dāng)于把數(shù)組中的這一項(xiàng)變?yōu)樯叮ú⒉挥绊懺瓉?lái)的數(shù)組，只是相當(dāng)于把原數(shù)組克隆一份，把克隆的這一份的數(shù)組中的對(duì)應(yīng)項(xiàng)改變了）；
var arr = [12,23,24,42,1];
var res = arr.map(function (item,index,input) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10]; 原數(shù)組拷貝了一份，并進(jìn)行了修改
console.log(ary);//-->[12,23,24,42,1]; 原數(shù)組并未發(fā)生變化
jQuery $.each方法
$.each(arr, function(index,value){
//do something
})
- 參數(shù)：arr要遍歷的數(shù)組,index當(dāng)前項(xiàng)的索引,value數(shù)組中的當(dāng)前項(xiàng)
- 第1個(gè)和第2個(gè)參數(shù)正好和以上兩個(gè)函數(shù)是相反的，注意不要記錯(cuò)了
var arr = [12,23,24,42,1];
$.each(arr, function (index,item) {
console.log(index) // 0 1 2 3 4
console.log(item) // 12 23 24 42 1
})
參考：
http://www.fzitv.net/article/81955.htm
http://www.fzitv.net/article/84609.htm
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
PS：這里再為大家推薦一款JS數(shù)組遍歷方式分析對(duì)比工具供大家參考：
在線JS常見遍歷方式性能分析比較工具：http://tools.jb51.net/aideddesign/js_bianli
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 細(xì)說(shuō)JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)
- javaScript遍歷對(duì)象和數(shù)組的方法總結(jié)
- JS中數(shù)組實(shí)現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
- JavaScript遍歷查找數(shù)組中最大值與最小值的方法示例
- JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
- JavaScript 數(shù)組遍歷的五種方法
- JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)
- JS中的常見數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?every)
相關(guān)文章
這篇文章主要介紹了JavaScript 變量、作用域及內(nèi)存,需要的朋友可以參考下2015-04-04
JS用最簡(jiǎn)單的方法實(shí)現(xiàn)四舍五入
在本篇文章里小編給大家整理的是關(guān)于JS用最簡(jiǎn)單的方法實(shí)現(xiàn)四舍五入的實(shí)例內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽的詳細(xì)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
TypeScript中使用getElementXXX()的示例代碼
這篇文章主要介紹了TypeScript中使用getElementXXX()的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
這篇文章主要介紹了JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法，有需要的朋友可以參考一下2014-01-01
在javascript中實(shí)現(xiàn)函數(shù)數(shù)組的方法
js不進(jìn)行類型檢查，數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢，下面就為大家詳細(xì)介紹下2013-12-12
javascript自定義滾動(dòng)條實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript自定義滾動(dòng)條實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
momentjs獲取上周、上月、前三個(gè)月的起始和結(jié)束時(shí)間(附完整代碼)
這篇文章主要給大家介紹了關(guān)于momentjs獲取上周、上月、前三個(gè)月的起始和結(jié)束時(shí)間的相關(guān)資料,在需要你進(jìn)行日期處理的地方,必然少不了moment.js的使用,需要的朋友可以參考下2023-07-07
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能【兼容IE6】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09