JS中數(shù)組與對(duì)象的遍歷方法實(shí)例小結(jié)

本文實(shí)例講述了JS中數(shù)組與對(duì)象的遍歷方法。分享給大家供大家參考，具體如下：

一、數(shù)組的遍歷：

首先定義一個(gè)數(shù)組

arr=['snow','bran','king','nightking'];

1、for循環(huán)，需要知道數(shù)組的長(zhǎng)度;

2、foreach，沒有返回值，可以不知道數(shù)組長(zhǎng)度；

arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})

3、map函數(shù)，遍歷數(shù)組每個(gè)元素，并回調(diào)操作，需要返回值，返回值組成新數(shù)組，原數(shù)組不變；

var newarr=arr.map(function(i){
  return "hello "+i
});
console.log(newarr)

4、filter函數(shù)：過濾通過條件的元素組成一個(gè)新數(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ù)組是否每個(gè)元素都符合條件，返回布爾值；

var xx=arr.every(function(i){
  return i.length>4
});
console.log(xx)       //false

7、reduce函數(shù)，為數(shù)組中的每一個(gè)元素依次執(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ù)組中每個(gè)值的函數(shù)，包括四個(gè)參數(shù)；

• previousValue：上一次調(diào)用回調(diào)返回的值，或者是提供的初始值(initialValue)；
• currentValue:當(dāng)前被處理的值；
• index：當(dāng)前元素在數(shù)組中的索引；
• array：調(diào)用reduce的數(shù)組；
• initialValue：作為第一次調(diào)用callback的第一個(gè)參數(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

二、對(duì)象的遍歷

var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
  console.log(i+','+obj[i])
}

in也可以用來遍歷數(shù)組，不過i對(duì)應(yīng)于數(shù)組的key值：

for(let i in arr){
  console.log(i+','+arr[i])
}

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ì)有所幫助。