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

发表评论

提供最优质的资源集合

立即查看 了解详情