1. 程式人生 > >js中我最常用的幾種遍歷處理資料的方法梳理

js中我最常用的幾種遍歷處理資料的方法梳理

forEach,Object.keys,map,for in ,for of,reduce,every

1,forEach 用於遍歷【陣列】

data.forEach(( item, index ) => {
    console.log('元素:', item ,';下標:', index)
})

2, Object.keys() 和 forEach() 結合遍歷【物件】

Object.keys返回一個數組,陣列元素是輸入物件所有的鍵名的集合

Object.keys(testData).forEach((key)=>{   
    console.log(key) //鍵
    console.log(testData[key]) //值
}) 

注意:Object.keys出來的順序不一定是物件屬性原來的順序,順序和for..in相同。

另外Object.keys還有一個妙用就是獲取物件的長度,在js中陣列長度可用length得到,物件長度用length獲取的結果是undefined,使用Object.keys(obj).length就可以得到物件長度了。

3,for...of  (es6)用於遍歷【陣列】內的【元素】,不包括原型屬性和索引名

let myArray = [1,2,4,11,6,7]
for (let value of myArray) {
    console.log(value)  //一次輸出元素1、2、4、11、6、7
}

4,for...in  (es5)用於遍歷【物件/陣列】內的【鍵名】,包括原型屬性  (所以慎用!)

let myArray = ['a',123,{a:'1',b:'2'}] //或為物件myArray = {a:'1',b:'2'}
for(let index in myArray){
    console.log(index,myArray[index]) //輸出鍵名 和 元素值
}

注意1for..in會把某個型別的原型(prototype)中的方法與屬性遍歷出來,用程式碼解釋如下:
let obj = {a: {aa: '123', b: {1,2,3} } }
Object.prototype.test = () => { console.log('123') }
for (let value in obj) {
    console.log(value)  //a, b,  test
}

不想遍歷原型方法和屬性的話,可以在迴圈內部使用hasOwnPropery方法可以判斷某屬性是否是該物件的例項屬性
if(!array.hasOwnProperty(i)){
    continue;
}

注意2:for..in遍歷物件{}時出來的順序不一定是物件屬性原來的順序,順序和Object.keys相同。

5,map 用於遍歷【陣列】產生一個新的元素值,返回一個新陣列為這些新值的集合




6,reduce 用於遍歷【陣列】進行累計計算,返回結果是一個計算後最終的值



其實玩法很多,完整引數如下:
myArray.reduce((countOrFirst,curr,currindex,arr) => {
    console.log('第一個值/上次計算結果',countOrFirst,  '當前要計算的值',curr,  '當前元素的索引',currindex)
    console.log('當前元素所屬的陣列物件',arr)
    return countOrFirst + curr
}, firstValue)

7,every 用於遍歷【陣列】並且為陣列元素呼叫callbackfn,返回結果是boolean值

當每一次callbackfn返回true時every返回true,否則false



相關推薦

js常用處理資料方法梳理

forEach,Object.keys,map,for in ,for of,reduce,every1,forEach 用於遍歷【陣列】data.forEach(( item, index ) => {    console.log('元素:', item ,';下標

java map的方法

http://blog.csdn.net/bluejoe2000/article/details/39521405 現在定義一個map型別 map<String, Integer>, 需要對其進行遍歷,為方便記憶,可寫如下方法進行遍歷: Map<Stri

SQL Server方式比較

不同 .com font size 常用 分享 分享圖片 遊標 inf SQL遍歷解析   在SQL的存儲過程,函數中,經常需要使用遍歷(遍歷table),其中遊標、臨時表等遍歷方法很常用。面對小數據量,這幾種遍歷方法均可行,但是面臨大數據量時,就需要擇優選擇,不同的遍歷方

陣列的常用方法

1.最傳統方法 for迴圈 var arr = ["first","second","third","fourth",3,5,8]; for(var i = 0; i < arr.length;i++){ console.log(arr[i]); } /

JS方式比較

數組 不能 left fff 支持 clas ffffff padding for in 幾種遍歷方式比較 for of 循環不僅支持數組、大多數偽數組對象,也支持字符串遍歷,此外還支持 Map 和 Set 對象遍歷。 for in 循環可以遍歷字符串、

js建立物件的方式

前言 不管是哪門語言,千變萬化不離其宗,深入理解其本質,方能應用自如。對應到js,閉包,原型,函式,物件等是需要花費大功夫思考、理解的。本文穿插了js原型和函式的相關知識,討論了批量建立物件的幾種方式以及它們的優缺點。 正文 說起建立物件,最容易想

JS 深拷貝的實現方法

property 沒有 http article pcl 方式 sar ext javascrip JS 中深拷貝的幾種實現方法1、使用遞歸的方式實現深拷貝 //使用遞歸的方式實現數組、對象的深拷貝 function deepClone1(obj) { //判斷拷

今天來給大家分析jsthis的指向情況?

        之前在寫程式碼時遇到this時,總是在考慮應不應該用,原因是當時分不清楚,後來把this的所有情況分析了一遍,其實超級簡單,而且他的使用場景很好,下面我來把他的幾種情況分析一下,如果this分佈太清得小夥伴們可以參考哈~希望對你們有幫助!        與其他

jquery常用方式

1、找class為  otherIdentifier 下 class為form-control 的input   如果input 值為空 則 disable $(document).ready(function(){  $(".otherIdentifier").find(

checkbox的方法

clas 屬性 first undefined define true 方法 第一個 tro <div> <input type="checkbox" name="ckb" value="1" />1

map的方法

IT col nbsp cti 集合 pos post value body private Hashtable<String, String> emails = new Hashtable<String, String>(); //方法一:

Java Map的方法

Map key重複則會出現最後一次put的value //HashMap TreeMap 遍歷Map Map<Object, Object> map = new HashMap<Object, Object>(); 1.老版本遍歷,泛型1.5以上 ,

Map的取值方式

今天心情不好,上午花了一點時間來寫Demo,到網上逛了逛,也算整理了一下基礎知識,未來的路還有很長,這樣的Demo也會有很多。 import org.junit.Test; import java.util.*; public class test { @Test publ

js兩個陣列的迴圈操作

最近需要這樣一個需求,例如 <script type="text/javascript"> var ceshi = ["主臥","次臥","客廳"]; var ceshi2 = [{ tag:0, name:"客廳", isShow:false

二叉樹方式之間的轉換

寫在前面 二叉樹的遍歷方式,基本可以歸結為四種:前序遍歷、中序遍歷、後序遍歷、層次遍歷 先序遍歷順序:根,左兒子,右兒子 中序遍歷順序:左兒子,根,右兒子 後序遍歷順序:左兒子,右兒子,根 層次遍歷順序:根據每一層的順序,由左向右依次輸出 遍歷順序及轉換  &n

Java基礎及提高 之 陣列,List,Set,Map的方式

一,陣列的遍歷方式 陣列有兩種遍歷方式: public class ArrayXunhuan { public static void main(String[] args) { int[

JS陣列實現(倒序陣列,陣列連線字串)

// =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; va

圖的方式

1.圖的遍歷方式大概也就兩種吧,DFS和BFS。但是有不同的實現方式,上次聽說我在遞迴轉非遞迴演算法中實現了二叉樹的遞迴轉非遞迴,然後有人說那圖的呢?其實圖的DFS轉成非遞迴還要簡單一些。 2.首先是BFS,BFS其實很簡單了。使用佇列來儲存與當前節點相鄰的所有節點,然後用這些節點作為基礎繼續拓

list的方式及其效率,ArrayList和LinkedList的結構

話不多說,上程式碼:  @Test public void testListSeq(){ List<String> list = new ArrayList<String>(); // List<String> list = ne

關於二叉樹的方法

轉載請註明出處 http://blog.csdn.net/pony_maggie/article/details/38390513 作者:小馬 一 二叉樹的一些概念 二叉樹就是每個結點最多有兩個子樹的樹形儲存結構。先上圖,方便後面分析。 1 滿二叉樹和完全二