[学习笔记] 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...