JavaScript中的遍歷

1、對象遍歷

ES6一共有5種方法能夠遍歷對象的屬性。

1、for-in

在使用for-in循環時，返回的是全部可以經過對象訪問的、可枚舉的（enumerated）屬性，其中既包括存在於實例中的屬性，也包括存在於原型中的屬性，不含Symbol屬性。屏蔽了原型中不可枚舉屬性（即設置了[[DontEnum]]標記的屬性）的實例屬性也會在for-in循環中返回，由於規定，全部開發人員定義的屬性都是可枚舉的——只有IE除外。

2、Object.keys(obj)

Object.keys()方法取得對象上全部可枚舉的實例屬性。該方法接收一個對象爲參數，返回一個包含全部可枚舉屬性的字符串數組，不含Symbol屬性。

3、Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()獲得全部實例屬性，不管是否可枚舉，不含Symbol屬性。

4、Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)返回一個數組，包含對象自身的全部 Symbol 類型的屬性（不包括繼承的屬性）

5、Reflect.ownKeys(obj)

Reflect.ownKeys(obj)方法用於返回對象的全部實例屬性，基本等同於Object.getOwnPropertyNames與Object.getOwnPropertySymbols之和，包含Symbol屬性。

以上的5種方法遍歷對象的屬性，都遵照一樣的屬性遍歷的次序規則

l  首先遍歷全部屬性名爲數值的屬性，按照數字排序

l  其次遍歷全部屬性名爲字符串的屬性，按照生成時間排序

l  最後遍歷全部屬性名爲Symbol值的屬性，按照生成時間排序

 

2、數組遍歷

數組實際上也是一種對象，因此也可使用上面對象遍歷的任意一個方法（但要注意尺度），另外，數組還擁有其餘遍歷的方法。

l  最基本的 for 循環、while 循環遍歷（缺陷是多添加了一個計數變量）

l  ES6 引入：for…of 

 

1、數組內置的一些遍歷方法：

1.一、forEach()方法：對數組中的每一項運行給定函數。這個方法沒有返回值。

var numbers=[1,2,3,4,5];

    numbers.forEach(function(item,index,array){

    console.log("item:"+item+" index:"+index+" array:"+array);

});

 

結果：

 

 

1.二、map()方法：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組，原數組不變。

var numbers=[1,2,3,4,5];

    var result=numbers.map(function(item,index,array){

    return item*2;

});

console.log(numbers);

console.log(result);

結果：

 

 

2、一些有用的數組內置方法

　　2.一、every()方法：對數組中的每一項運行給定函數，若是該函數對每一項都返回true,則返回true。

　　2.二、filter()方法：對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。

　　2.三、some()方法：對數組中的每一項運行給定函數，若是該函數對任一項返回true,則返回true。

　　2.四、find()方法：返回第一個經過測試的元素

　　2.五、findIndex()方法： 返回第一個經過測試的元素的索引

　　2.六、reduce()方法： 習慣性稱之爲累加器函數，對數組的每一個元素執行回調函數，最後返回一個值（這個值是最後一次調用回調函數時返回的值）

　　　　這個函數的回調函數有 4 個參數

　　　　　　accumulator： 上一次調用回調函數返回的值

　　　　　　currentValue： 當前在處理的值

　　　　　　currentIndex： 當前在處理的值的索引

　　　　　　array

　　　　　　initialValue： 可選項，其值用於第一次調用 callback 的第一個參數

　　例子：

[1,10,5,3,8].reduce(function(accumulator,currentValue){

    return accumulator*currentValue;

});  // 1200

　　2.7、reduceRight()： 用法和上面的函數同樣，只不過遍歷方向正好相反。

 

3、Set遍歷操做

ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

Set 自己是一個構造函數，用來生成 Set 數據結構。

Set結構的實例有四個遍歷方法，能夠用於遍歷成員。

l  keys()：返回鍵名的遍歷器

l  values()：返回鍵值的遍歷器

l  entries()：返回鍵值對的遍歷器

l  forEach()：使用回調函數遍歷每一個成員

須要特別指出的是，set的遍歷順序就是插入順序。

一、keys方法、values方法、entries方法返回的都是遍歷器對象。因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和values方法的行爲徹底一致。

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

 

二、forEach()

Set結構的實例的forEach方法，用於對每一個成員執行某種操做，沒有返回值。

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

 

4、Map遍歷操做

Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object結構提供了「字符串—值」的對應，Map結構提供了「值—值」的對應，是一種更完善的Hash結構實現。若是你須要「鍵值對」的數據結構，Map比Object更合適。

Map原生提供三個遍歷器生成函數和一個遍歷方法。

l  keys()：返回鍵名的遍歷器。

l  values()：返回鍵值的遍歷器。

l  entries()：返回全部成員的遍歷器。

l  forEach()：遍歷Map的全部成員。

須要特別注意的是，Map的遍歷順序就是插入順序。

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同於使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}