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