JS中陣列與物件的遍歷方法例項

前端攻城小牛啊發表於2018-11-19
JS陣列物件

一、陣列的遍歷：

JS中陣列與物件的遍歷方法例項

首先定義一個陣列

arr=['snow','bran','king','nightking'];
複製程式碼

1、for迴圈，需要知道陣列的長度; 2、foreach，沒有返回值，可以不知道陣列長度；

arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})
複製程式碼

3、map函式，遍歷陣列每個元素，並回撥操作，需要返回值，返回值組成新陣列，原陣列不變；

var newarr=arr.map(function(i){
  return "hello "+i
});//歡迎加入全棧開發交流圈一起學習交流：864305860
console.log(newarr)
複製程式碼

4、filter函式：過濾通過條件的元素組成一個新陣列，原陣列不變；

var newarr=arr.filter(function(i){
  return i == "bran"
});
console.log(newarr)
複製程式碼

5、some函式，遍歷陣列中是否有符合條件的函式，返回布林值；

var yy=arr.some(function(i){
  return i.length>4
});
console.log(yy)       //true
複製程式碼

6、every函式，遍歷陣列是否每個元素都符合條件，返回布林值；

var xx=arr.every(function(i){
  return i.length>4
});//歡迎加入全棧開發交流圈一起學習交流：864305860
console.log(xx)       //false
複製程式碼

7、reduce函式，為陣列中的每一個元素依次執行回撥函式 語法：

arr.reduce(callback, initialValue)
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});//歡迎加入全棧開發交流圈一起學習交流：864305860
複製程式碼

callback:執行陣列中每個值的函式，包括四個引數； previousValue：上一次呼叫回撥返回的值，或者是提供的初始值(initialValue)； currentValue:當前被處理的值； index：當前元素在陣列中的索引； array：呼叫reduce的陣列； initialValue：作為第一次呼叫callback的第一個引數； 例如：

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);//歡迎加入全棧開發交流圈一起學習交流：864305860
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也可以用來遍歷陣列，不過i對應於陣列的key值：

for(let i in arr){
  console.log(i+','+arr[i])
}//歡迎加入全棧開發交流圈一起學習交流：864305860
複製程式碼

結語

感謝您的觀看，如有不足之處，歡迎批評指正。 本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

相關文章