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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6几个比较常用的方法总结

    看到了一篇总结的ES6的,感觉不错,这里转载一下,这是原文地址,由于博主有自己的照片,所以我不方便直接转:

    何处锦绣不灰堆
  • 几种常见的获取页面元素数据的方法

    页面之所以是动态的,其实不仅仅是因为他是具有js的动态效果的,还有一部分是因为他的数据是动态的,所以页面才会显得很有活性,但是很多的时候获取数据是一个很恶心的事...

    何处锦绣不灰堆
  • js和object的常见操作,持续更新中...

    何处锦绣不灰堆
  • 关于JS中的循环

    for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 ...

    mafeifan
  • 对抗性攻击研究:图片中可被操纵的细微特征会欺骗AI

    对抗性攻击对于AI来说可能是致命的,最近研究发现,在停车标志上放置一个贴纸实际上可以欺骗AI,使其对标志进行错误分类,这可能会导致自动驾驶汽车不会停下。

    AiTechYun
  • Paxos协议学习小结

    一直对Paxos协议比较感兴趣,之前对这个算法 有耳闻 但只是了解皮毛,最近在学Zookeeper,趁着这股新鲜劲,就花时间研究了下Zookeeper的选举算法...

    用户1263954
  • ES6新特性

    由于ES6在一些低版本的浏览器上无法运行,需转成ES5之前的版本兼容,以下有几种方案可以自动转换

    jinghong
  • 带你入门 JavaScript ES6 (二)

    上一篇学习下一代 JavaScript 语法: ES6 (一),我们学习了关于块作用域变量或常量声明 let 和 const 语法、新的字符串拼接语法模版字面量...

    柳公子
  • AI一分钟 | 贾跃亭FF 91售价或超200万元;广东“AI医生”登上《细胞》封面

    整理 | 氧氟沙星 一分钟AI 北京商报记者从接近FF的合作伙伴获悉,FF 91将于2018年底交付第一批车,在国内售价预计超过200万元。 三星在Galaxy...

    AI科技大本营
  • 为什么要从PHP转向Go,及满足于使用MySQL

    ? 左:ElePHPant(Vincent Pontier),右:Gophers (golang.org)。此二者分别是PHP和Golang的吉祥物 【译者注...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券