JavaScript中，數組和對象的遍歷方法總結

循環遍歷是寫程序很頻繁的操做，JavaScript 提供了不少方法來實現。

這篇文章將分別總結數組和對象的遍歷方法，新手能夠經過本文串聯起學過的知識。

數組遍歷

方法一：for 循環

for 循環是使用最多，也是性能優化最好的一種遍歷方式。

var arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
// a b c

一樣常規的循環類型還有 while 循環和 do/while 循環。

它們之間的區別在於，for 循環預先知道循環次數，while 循環不知道循環次數，do/while 至少會循環次數。

方法二：for-of 遍歷

for-of 是 ES6 新增的語法。它直接遍歷值，而不是數組下標（或對象屬性）。

var arr = ["a", "b", "c"];
for (let item of arr) {
  console.log(item);
}
// a b c

實際上，for-of 語句不只能夠循環遍歷數組對象。

還能夠迭代 Array、Map、Set、String 等對象。

// 遍歷String
let str = "Hello";
for (let value of str) {
  console.log(value)
}
// H e l l o

// 遍歷Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for-of 的工做原理是，向循環對象請求一個迭代器對象，而後經過迭代器對象的next()方法來得到返回值。

數組內置了 @@iterator，@@iterator不是迭代器，而是返回一個迭代器對象的函數。

var arr = ["a", "b","c"];
var it = arr[Symbol.iterator]();
console.log(it.next());  // { value: 'a', done: false }
console.log(it.next());  // { value: 'b', done: false }
console.log(it.next());  // { value: 'c', done: false }
console.log(it.next());  // { value: undefined, done: true }

上面代碼中，value 表示當前遍歷值，done 是布爾值，表示是否還有能夠遍歷的值。

須要注意的是，普通對象沒有內置@@iterator，因此沒法使用 for-of 遍歷。

這麼作的緣由很複雜，簡單來講，就是爲了不影響將來的對象類型。

不過，咱們能夠經過Object.defineProperty(...)給對象定義@@iterator。

詳細能夠經過這裏瞭解。

方法三：數組方法

爲了適應不一樣方式的遍歷，JavaScript 內置了許多的數組方法。

例如比較經常使用的forEach()方法，寫起來，可讓代碼更簡潔。

var arr = ["a", "b", "c"];
arr.forEach((index, item) => {
  console.log(index, item)
})
// a 0
// b 1
// c 2

map()方法

var arr = [1, 2, 3];
var newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr);  // [2, 4, 6]

filter()方法

var arr = [1, 2, 3];
var newArr = arr.filter(item => {
  return item > 1;
});
console.log(newArr); // [2, 3]

reduce()方法是 ES5 新增，專爲下面這種累加操做的設計的。

實際能作的事情遠比這要豐富，本文只是簡單介紹基本用法，詳細能夠查看本文。

var arr = [1, 2, 3];
var sum = arr.reduce((pre, cur) => {
  return pre + cur;
});
console.log(sum); // 6

every()方法用於檢測數組元素是否所有符合指定條件。

它一般和下面的some()方法放在一塊兒理解。

var arr = [1, 2, 3];
var bool = arr.every(item => {
  return item < 5;
});
console.log(bool); // true

some()方法用於檢測數組是否存在一個符合指定條件的元素。

下面的例子是檢測數組元素是否存在 Number 類型。

var arr = ["a", 1, "b"];
var bool = arr.some(item => {
  return typeof item === "number";
});
console.log(bool);  // true

對象的遍歷方法

對象的遍歷相對麻煩一些。

有兩種方式能夠實現對象的遍歷，一種是直接使用 for-in 循環；另外一方式，是將對象轉換成數組，再進行遍歷。

方法一：for-in 循環

for-in 專門用於遍歷對象的可枚舉屬性，包括 prototype 原型鏈上的屬性，所以性能會比較差。

什麼是可枚舉屬性？

從名字上能夠看出，就是該屬性會出如今對象的迭代（枚舉）中，好比 for-in 循環中。

var obj = { a: 2, b: 4, c: 6 };
for (let key in obj) {
  console.log(key);
}
// a b c

方法二：Object.keys() 和 Object.getOwnPropertyNames()

Object.key()會返回一個數組，包含全部可枚舉屬性；Object.getOwnPropertyNames()也會返回一個數組，包含全部元素，不論是否可枚舉。

須要說明的是，二者都只查找對象的自定義屬性。

var obj = { a: 2, b: 4, c: 6 };
// Object.keys()
Object.keys(obj).forEach(key => {
  console.log(key);
})
// a b c

// Object.getOwnPrepertyNames()
Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key);
})
// a b c

此外，還能夠經過Reflect.ownKeys(obj)方法來遍歷。

它返回一個數組，包含對象自定義的屬性，無論屬性名是 Symbol 仍是字符串，也不論是否可枚舉。

因爲使用很少，這裏瞭解一下便可。

最後，整理了不一樣對象遍歷方法的特色。

方式	查找原型鏈屬性	查找自定義屬性	查找不可枚舉屬性
for-in	✅	✅	✅
Object.keys(..)	❌	✅	❌
Object.getOwnpropertyNames(..)	❌	✅	✅

---

@吾兒濱濱 - 之前的產品，如今的前端，歡迎找我玩。微信：abcmeegojellow：吾兒濱濱