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

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了[学习笔记] ES6的数组遍历方式 for, forEach,for...in, for...of脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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...

脚本宝典总结

以上是脚本宝典为你收集整理的[学习笔记] ES6的数组遍历方式 for, forEach,for...in, for...of全部内容,希望文章能够帮你解决[学习笔记] ES6的数组遍历方式 for, forEach,for...in, for...of所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。