24个JavaScript循环遍历方法，你都知道吗？

大家好，我是 CUGGZ。,JavaScript 提供了很多循环遍历方法，下面就来详细看看这些方法都是怎么用的以及使用时的注意事项：,,forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。其语法如下：,该方法的第一个参数为回调函数，是必传的，它有三个参数：,该方法还可以有第二个参数，用来绑定回调函数内部this变量（前提是回调函数不能是箭头函数，因为箭头函数没有this）：,注意：,map() 方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。其语法如下：,该方法的第一个参数为回调函数，是必传的，它有三个参数：,该方法的第二个参数用来绑定参数函数内部的this变量，是可选的：,该方法还可以进行链式调用：,注意：,for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。其语法如下：,该方法有两个参数：,该方法可以获取数组的每一项：,注意：,filter()方法用于过滤数组，满足条件的元素会被返回。它的参数是一个回调函数，所有数组元素依次执行该函数，返回结果为true的元素会被返回，如果没有符合条件的元素，则返回空数组。其语法如下：,该方法的第一个参数为回调函数，是必传的，它有三个参数：,同样，它也有第二个参数，用来绑定参数函数内部的this变量。,可以使用filter()方法来移除数组中的undefined、null、NAN等值：,注意：,some() 方法会对数组中的每一项进行遍历，只要有一个元素符合条件，就返回true，且剩余的元素不会再进行检测，否则就返回false。,every() 方法会对数组中的每一项进行遍历，只有所有元素都符合条件时，才返回true，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。其语法如下：,两者的语法如下：,两个方法的第一个参数为回调函数，是必传的，它有三个参数：,注意：,reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。其语法如下：,reduce 方法会为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，回调函数接受四个参数：,该方法的第二个参数是 initialValue，表示传递给函数的初始值 （作为第一次调用 callback 的第一个参数）：,输出结果：,再来加一个初始值试试：,输出结果：,由此可以得出结论：如果没有提供初始值initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供了初始值initialValue，从索引0开始执行,reduceRight() 方法和的reduce()用法几乎一致，只是该方法是对数组进行倒序遍历的，而reduce()方法是正序遍历的。,输出结果：,注意：,find() 方法返回通过函数内判断的数组的第一个元素的值。当数组中的元素在测试条件时返回 true 时， find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。,findIndex() 方法返回传入一个测试函数符合条件的数组第一个元素位置（索引）。当数组中的元素在函数条件时返回 true 时， findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。,两个方法的语法如下：,两个方法的第一个参数为回调函数，是必传的，它有三个参数：,find()和findIndex()两个方法几乎一样，只是返回结果不同：,注意：,三个方法都返回一个数组的迭代对象，对象的内容不太相同：,三个方法的语法如下：,这三个方法都没有参数：,总结：,for…in 主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。其语法如下：,其中两个参数：,输出结果：,注意：,这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和Symbol属性）组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，这个三个元素返回的值分别如下：,注意,Object.getOwnPropertyNames()方法与Object.keys()类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。,这两个方法都可以用来计算对象中属性的个数：,Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性：,Reflect.ownKeys() 返回一个数组，包含对象自身的所有属性。它和Object.keys()类似，Object.keys()返回属性key，但不包括不可枚举的属性，而Reflect.ownKeys()会返回所有属性key：,注意：,总结：,for循环是应该是最常见的循环方式了，它由三个表达式组成，分别是声明循环变量、判断循环条件、更新循环变量。这三个表达式用分号分隔。可以使用临时变量将数组的长度缓存起来，避免重复获取数组长度，当数组较大时优化效果会比较明显。,在执行的时候，会先判断执行条件，再执行。for循环可以用来遍历数组，字符串，类数组，DOM节点等。可以改变原数组。,while循环中的结束条件可以是各种类型，但是最终都会转为布尔值，转换规则如下。,while和for一样，都是先判断，再执行。只要指定条件为 true，循环就可以一直执行代码。,该方法会先执行再判断，即使初始条件不成立，do/while循环也至少会执行一次。,不建议使用do / while来遍历数组。,for await…of方法被称为异步迭代器，该方法是主要用来遍历异步对象。它是ES2018中引入的方法。,for await…of 语句会在异步或者同步可迭代对象上创建一个迭代循环，包括 String，Array，类数组，Map， Set和自定义的异步或者同步可迭代对象。这个语句只能在 async function内使用：,输出结果：,,