巧妙的使用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浏览器是不支持的，所以呢，看您自己的项目需求吧，有什么需求用什么技术就行了。

巧妙的使用ES6的for...of迭代处理JS对象

猜你喜欢