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
廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com
物件的遍歷方法
物件的遍歷相對麻煩一些。
有兩種方式可以實現物件的遍歷,一種是直接使用 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 還是字串,也不管是否可列舉。