写在前面
我没事的时候喜欢看一下大牛的博客和论坛,最近看了张鑫旭大哥关于介绍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浏览器是不支持的,所以呢,看您自己的项目需求吧,有什么需求用什么技术就行了。