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

2024-06-04 11:45:49

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相关推荐

JS几种数组遍历方式以及性能分析对比
前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
js中遍历数组加到新数组_JS几种数组遍历方式总结
JS数组遍历的几种方式 S数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一 ...
JS几种数组遍历方式总结
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
TS学习笔记04 JS创建对象的方式
TS学习笔记04 JS创建对象的方式首先我们回顾下JS中创建对象的方式比如说我按照下面的创建了两个对象分别为stu1和stu2,比如说我现在想给这两个对象都添加一个新的方法,但是这两个对象 ...
学习笔记_使用二进制的方式修改图片
学习笔记_使用二进制的方式修改图片 1.学习目标 2.学习工具 3.开始操作 3.1 了解图片是怎样用二进制表示的 3.2 开始操作 4.参考文档 1.学习目标掌握使用二进制的方式修改图片了解BM ...
Flutter学习笔记之-圆形头像实现方式
Flutter学习笔记之-圆形头像实现方式开发中如何实现类似圆形图片 Container+BoxDecoration来实现圆角图像 class DemoWidget extends Stateles ...
数组遍历 map()、forEach() 及字符串切割 split() / 字符串截取 slice()、substring()、substr()...
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
Web学习笔记——ES6（下）
ES6学习笔记(下) 六.对象的扩展 1.对象字面量属性的简洁表示法方法的简洁表示法属性名表达式 2.对象的扩展运算符 3.对象的新增方法 Object.is Object.assign 七.S ...
【JavaSE阶段学习笔记一】数组以及数组之前的知识点
文章目录 JavaEE知识总结前言一.计算机的基础知识(了解即可) 二.常见的DOS指令 1.进入DOS命令 2.常见的DOS命令(熟练使用) 三.Java语言的历史四.Java语言的平台版本 ...

最新文章

热门文章