巧妙的使用ES6的for...of迭代處理JS物件
寫在前面
我沒事的時候喜歡看一下大牛的部落格和論壇,最近看了張鑫旭大哥關於介紹for...of的部落格,這裡簡單的總結一下,給自己一個記憶理解的過程,同時分享給那些一直關注我喜歡技術的人。鄙人能力有限,寫的不妥,多多指教。
什麼叫做物件?
沒寫之前首先解釋一下什麼叫做“物件”,為什麼要解釋呢?因為我發現很多人不管是什麼層次的人,在學習的過程中啊,都有一些概念傻傻分不清,所以我覺得還是有必要解釋一波,這裡的物件不是象棋裡面的那物件,而是我們說的JS裡面的物件,如果非要給物件一個解釋的話,我只能說萬物皆物件,像我們常常使用的字串、數字、陣列、日期等等都是物件,怎麼判斷是不是物件呢?物件是擁有自己的屬性和方法。或者說擁有自己的屬性和方法的都可以叫做物件。
什麼是for-of?
呃...今天的主題呢是使用for-of處理JS物件,我們都知道一般情況下呢for迴圈是用來處理陣列的,這個話題我在之前也是不止一次的說過,怎麼遍歷怎麼實現都寫過,感興趣的可以翻翻之前的部落格看一下,這裡就不贅述了,至於什麼是for-of啊,這裡說一下,其實呢他和for-in應該不同時間的雙胞胎姐妹...(別罵我,你是個zz吧,雙胞胎哪有不同時間的),好吧,說的不恰當,其實是ES6新出的一個可以遍歷物件的辦法,有多厲害呢?下面我們認識一下:
迭代陣列:
var arr = [3, 5, 7]; for (var i of arr) { console.log(i); } // 結果是: // 3 // 5 // 7
迭代陣列的索引:
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = [3, 5, 7];
arr.foo = 'hello';
for (var i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(i);
}
}
// 結果是:
// 0
// 1
// 2
// foo
還有一種情況就是我們在使用for..in的時候啊,經常會希望可以按照我們自己的想法中斷遍歷,例如這樣:
var arr = [3, 5, 7]; arr.forEach(function (value) { console.log(value); if (value == 5) { return false; } }); // 結果是: // 3 // 5 // 7
但是奈何for...in實現不了,他是不可以直接break跳出迴圈的,但是在es6的for of中就解決了這個問題:
var arr = [3, 5, 7];
for (let value of arr) {
console.log(value);
if (value == 5) {
break;
}
}
// 結果是:
// 3
// 5
我們一直說for...of很強大,下面看看強大到什麼地步,迭代字串,“what fuck?”
let str = 'boo';
for (let value of str) {
console.log(value);
}
// 結果是:
// "b"
// "o"
// "o"
還可以迭代argument型別的陣列:
(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3);
// 結果是:
// 1
// 2
// 3
迭代NodeList類的DOM集合:
let elements = document.querySelectorAll('body');
for (let element of elements) {
console.log(element.tagName);
}
// 結果是:
// "BODY"
迭代型別陣列:
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
console.log(value);
}
// 結果是:
// 0
// 255
迭代map:
let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of mapData) {
console.log(value);
}
// 結果是:
// 1
// 2
// 3
迭代set:
let setData = new Set([1, 1, 2, 2, 3, 3]);
for (let value of setData) {
console.log(value);
}
// 結果是:
// 1
// 2
// 3
......
看了這麼多的好處是不是心動了,其實吧他也有缺點,由於他是ES6的新特性,所以他的相容性還是不是那麼的強大,IE瀏覽器是不支援的,所以呢,看您自己的專案需求吧,有什麼需求用什麼技術就行了。