JS中數(shù)組與對象的遍歷方法實(shí)例小結(jié)
本文實(shí)例講述了JS中數(shù)組與對象的遍歷方法。分享給大家供大家參考，具體如下：
一、數(shù)組的遍歷：
首先定義一個數(shù)組
arr=['snow','bran','king','nightking'];
1、for循環(huán)，需要知道數(shù)組的長度;
2、foreach，沒有返回值，可以不知道數(shù)組長度；
arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})
3、map函數(shù)，遍歷數(shù)組每個元素，并回調(diào)操作，需要返回值，返回值組成新數(shù)組，原數(shù)組不變；
var newarr=arr.map(function(i){
return "hello "+i
});
console.log(newarr)
4、filter函數(shù)：過濾通過條件的元素組成一個新數(shù)組，原數(shù)組不變；
var newarr=arr.filter(function(i){
return i == "bran"
});
console.log(newarr)
5、some函數(shù)，遍歷數(shù)組中是否有符合條件的函數(shù)，返回布爾值；
var yy=arr.some(function(i){
return i.length>4
});
console.log(yy) //true
6、every函數(shù)，遍歷數(shù)組是否每個元素都符合條件，返回布爾值；
var xx=arr.every(function(i){
return i.length>4
});
console.log(xx) //false
7、reduce函數(shù)，為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)
語法：
arr.reduce(callback, initialValue)
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
callback:執(zhí)行數(shù)組中每個值的函數(shù)，包括四個參數(shù)；
- previousValue：上一次調(diào)用回調(diào)返回的值，或者是提供的初始值(initialValue)；
- currentValue:當(dāng)前被處理的值；
- index：當(dāng)前元素在數(shù)組中的索引；
- array：調(diào)用reduce的數(shù)組；
- initialValue：作為第一次調(diào)用callback的第一個參數(shù)；
例如：
var total = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
});
// total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]
要提供initialValue的話：
var total = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
},4);
console.log(total); //10
二、對象的遍歷
var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
console.log(i+','+obj[i])
}
in也可以用來遍歷數(shù)組，不過i對應(yīng)于數(shù)組的key值：
for(let i in arr){
console.log(i+','+arr[i])
}
PS：這里再為大家推薦一款JS數(shù)組遍歷方式分析對比工具供大家參考：
在線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錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
FireFox與IE 下js兼容觸發(fā)click事件的代碼
FireFox與IE 下js兼容觸發(fā)click事件 ,對于需要兼容這兩者的朋友，就需要參考下下面的代碼了2008-11-11
今天小編就為大家分享一篇解決layer彈層遮罩擋住窗體的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Javascript數(shù)組常用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
es6這個String對象倒是擴(kuò)展了不少方法,但是很多都是跟字符編碼相關(guān),下面這篇文章主要給大家介紹了關(guān)于ES6字符串?dāng)U展的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本篇文章主要是對JS 屏蔽按鍵效果與改變按鍵效果的示例代碼進(jìn)行了進(jìn)行，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Bootstrap每天必學(xué)之基礎(chǔ)排版，排版是學(xué)習(xí)的最基礎(chǔ)環(huán)節(jié)，相當(dāng)于地基，所以大家一定要認(rèn)真對待，認(rèn)真學(xué)習(xí)本文內(nèi)容。2015-11-11
這篇文章主要介紹了淺談webpack對樣式的處理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
JS格式化字符串的兩種方法(反引號與String.prototype)
本文一共介紹了兩種實(shí)現(xiàn)方式,使用反引號或自定義方法實(shí)現(xiàn),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了js 概率計算(簡單版),需要的朋友可以參考下2017-09-09
javascript語言是網(wǎng)頁中廣泛使用的一種腳本語言，通過本文給大家介紹javascript基本語法，需要的朋友可以參考下本文2016-01-01