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，

詳細可以通過[這里了解](https://github.com/getify/You-Dont-Know-JS/blob/1ed-zh-CN/this %26 object prototypes/ch3.md)，

方法三：陣列方法

為了適應不同方式的遍歷，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 還是字串，也不管是否可列舉，

由于使用不多，這里了解一下即可，

最后，整理了不同物件遍歷方法的特點，

吾兒濱濱

標籤：JavaScript

上一篇：vuex知識筆記，及與localStorage和sessionStorage的區別

下一篇：正則運算式驗證IP地址(絕對正確)