1. 程式人生 > >巧妙的使用ES6的for...of迭代處理JS物件

巧妙的使用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瀏覽器是不支援的,所以呢,看您自己的專案需求吧,有什麼需求用什麼技術就行了。

謝謝閱讀