[学习笔记] ES6的数组遍历方式 for, forEach，for...in, for...of

rozbo 发布于2019-08-21 16:43 / 1123人阅读

摘要：有如果要遍历一个数组，我们有多个方式可以进行。循环循环的问题在于遍历的时候获得的是指针，要获取元素需要的方式取到。另外迭代的是对象所有的属性或函数都会被迭代。选用可以根据自己的实际需求。

javascript ES6有如果要遍历一个数组，我们有多个方式可以进行。
下面我们来分析一下各自的利弊。

for循环

const langs = ["java", "php", "c++", "python"]

    for (let i = 0; i < langs.length; i++) {
        console.log(langs[i])
    }

for循环的问题在于遍历的时候获得的是指针，要获取元素需要 langs[i]的方式取到。

forEach

    langs.forEach(function (lang, index, arr) {
        console.log(lang)
        console.log(index)
        console.log(arr)
    }, this);

    lang.forEach((lang, index) => {
        console.log(lang)
        console.log(index)
    })

forEach循环我们可以直接取到元素，同时也可以取到index值。
但是forEach也有一些局限，比如我们不能在循环内break或者continue.

for...in 循环

for-in is for inspecting object properties. It works on any object, and it always loops over the names of the object"s enumerable properties.

const langs = ["java", "php", "c++", "python"]
langs.description = "This is a language set"
langs.func = ()=>(2)
    
for (var key in langs) {
  console.log(langs[key])
}

for...in 迭代获取到的也是key而不是数值。另外for...in迭代的是对象所有的属性或函数都会被迭代。
选用for...in可以根据自己的实际需求。

for...of

for-of is for looping over data. It only works on iterable objects; that is, objects with a suitable [iterator] method.

const langs = ["java", "php", "c++", "python"]

 for (let lang of langs) {
        console.log(lang)
    }

for...of支持break continue

如何在for...of循环中获取到index值呢？

    for (let [index, lang] of langs.entries()) {
        console.log(`${index} - ${lang}`)
    }

for...of还有其他的用处

for...of用于arguments

for...of用于字符串遍历

for...of用于DOM节点的遍历

文章为学习笔记，内容参考codecasts的视频课程https://www.codecasts.com/ser...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88632.html

《深入理解ES6》笔记——Set集合与Map集合（7）

摘要：常被用来检查对象中是否存在某个键名，集合常被用来获取已存的信息。返回一个布尔值，表示该值在中存在与否。集合存放对象的弱引用，当该对象的其他强引用被清除时，集合中的弱引用也会自动被垃圾回收机制回收，追踪成组的对象是该集合最好的使用方式。 Map和Set都叫做集合，但是他们也有所不同。Set常被用来检查对象中是否存在某个键名，Map集合常被用来获取已存的信息。 Set Set是有序列表，含...

Charlie_Jade 2019-08-21 16:03 评论0 收藏0
学习笔记一基础语法

摘要：需要注意的是字符串有三个截取方法和和方法用于操作尾部元素，和方法用于操作头部元素。语法它用于删除并添加元素，也可以只删除不添加。对象操作符可以判断对象是否含有某个属性，但是无法判断这个属性是它自己的，还是继承来的。 1.关于ECMAScript ECMA-262经历了多个版本的更新迭代，需要了解一下五个版本： ES5：2009年12月 ES5.1：2011年6月 ES6/ECM...

Songlcy 2019-08-22 15:59 评论0 收藏0
《廖雪峰JavaScript-快速入门》笔记

摘要：文章内容来源廖雪峰快速入门赋值注释数据类型不区分整数和浮点数，统一用表示。条件判断使用来进行条件判断。最新的规范引入了新的数据类型，是一组键值对的结构，具有极快的查找速度。一个数组实际上也是一个对象，它的每个元素的索引被视为一个属性。文章内容来源：廖雪峰JavaScript-快速入门赋值 var x = 1; 注释 // comment /* comment */ 数据类型 Num...

caozhijian 2019-08-23 16:54 评论0 收藏0
JavaScript：遍历

摘要：中可以实现遍历的数据类型主要是对象，其中包括普通对象与数组。遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。实例五遍历器对象实例五是的遍历过程，通过手动调用其对象的方法实现信息获取。为每个数组元素执行函数。前言将依据自身痛点学习，计划对原生JavaScript写一个系统，本文为第一篇，感兴趣的同学可以关注个人公众号：ZeroToOneMe，或者github博客，将持续...

ThinkSNS 2019-08-23 17:51 评论0 收藏0