js-数组遍历⽅法的总结与辨析（强烈推荐every与some）
js-数组遍历⽅法的总结与辨析（强烈推荐every与some）
javascript中除了forEach等基础的遍历⽅法外，还有很多在遍历的同时做判断或修改数组的原⽣⽅法。这⾥记录⼀下常见⽅法的总结和相近⽅法的辨析。
⼀、⼀般的遍历所有元素
1.for
for (语句 1; 语句 2; 语句 3)
{
被执⾏的代码块
}
语句 1 （代码块）开始前执⾏
语句 2 定义运⾏循环（代码块）的条件
语句 3 在循环（代码块）已被执⾏之后执⾏
var arr=[1,2,3,4];
for(var i=0; i<arr.length; i++){
document.write(arr[i]+"<br>");
}
for(var i=0; i<=3; i++){
document.write(arr[i]+"<br>");
}
//这两段的结果都是输出1⾄4
注意，语句 2会在代码块开始前判断，⽽语句 3 是在代码块执⾏后
2.for in
⽤for in不仅可以对数组，也可以对enumerable对象操作。是的，数组就是特殊的对象，索引就是从0开始有顺序的key。
var arr=[1,2,3,4];
for(let index in arr){
console.log(arr[index]);
};
对对象操作时参数为属性名【包含对象⾃⾝的和继承⾃原型链的可枚举（enumerable）属性，不含 Symbol 属性】。
var A={a:1,b:"hello world"};
for(let k in A){
console.log(k,A[k]);
}
3.forEach
array.forEach(function(value, index, arr),thisValue)：⽤于调⽤数组每个元素，并将元素传递给回调函数（注意没有办法跳出或终⽌forEach语句，除⾮抛出异常）。
注意：forEach 遍历的index第⼀次调⽤ callback 前就会确定。⼀次循环中添加到数组中的项在下⼀次循环才会被访问到。如果已经存在的值被改变，则传递给callback 的值是 forEach 遍历到它们那⼀刻的值。已删除的项不会被遍历到。
返回值：undefined。注意⾥⾯即便有return语句，依然返回undefined。
array.forEach((v，index)=>{
console.log(v);
});
array.forEach（function(v，index){
console.log(v);
});
4.for of
在ES6中，增加了⼀个for of循环，也可以⽤于字符串。
let s ="helloabc";
for(let c of s){
console.log(c);
}
⼆、拼接所有元素为字符串
arrayObject.join(separator)：
⽤于把数组中的所有元素放⼊⼀个字符串。
参数：
arrayObject -其内元素为⼀般对象时⽆法完整展⽰，数组、数字、字符串可以；
separator（可省略）-指定分隔符进⾏分隔；如果省略该参数，则使⽤逗号作为分隔符。
返回值：⼀个字符串。
实际上，对于元素全为字符串的数组，String和array.join()有类似效果。
var a={b:2,c:"3"};
var e=["Apple"]
var d=["Banana","Orange",e];
var fruits =[a, d,123,"Mango"];
var ElementById("demo");
var ElementById("demo2");
console.log(fruits.join());
console.log(JSON.stringify(fruits));
console.String());
三、拼接两个数组
1.任⼀遍历⽅法 + push
2.使⽤apply劫持数组的push⽅法(不常⽤，⽅法略)
3.使⽤es6中的 ‘…’ 扩展运算符。
var arr =[1,2,3];
var arr2 =[4,5];
arr.push(...arr2);
console.log(arr)
4.（⾮循环）concat
注意concat()⽅法⽣成了⼀个新的数组，并不改变原来的数组。
四、在循环中寻特定值
1.includes（ES6)
arr.includes(searchElement, fromIndex)斜体样式:⽤来判断⼀个数组是否包含⼀个指定的值，如果是返回 true。
参数：
searchElement 必须。需要查的元素值。
fromIndex 可选。从该索引处开始查 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
如果fromIndex ⼤于等于数组长度，则返回 false 。该数组不会被搜索；如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引⼩于 0，则整个数组都会被搜索。
注意: IE 13 及更早版本不⽀持 includes() ⽅法。
2.find（ES6)
array.find(function(currentItem, index, arr),thisValue) ：返回通过测试的数组的第⼀个元素的值，
在第⼀次调⽤ callback 函数时会确定元素的索引范围，因此在 find ⽅法开始执⾏之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中⼀个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
参数：value：必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，⼀般⽤this值，如果这个参数为空，undefined会传递给this值
返回值：返回符合测试条件的第⼀个数组元素的值，如果没有符合条件的则返回undefined。
注意: IE 11 及更早版本不⽀持 find() ⽅法。
3.findIndex（ES6)
array.findIndex(function(currentItem, index, arr),thisValue) ：返回通过测试的数组的第⼀个元素的位置。
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调⽤执⾏函数。
如果没有符合条件的元素返回 -1。
注意: findIndex() 对于空数组，函数是不会执⾏的。
注意: findIndex() 并没有改变数组的原始值。
注意: IE 11 及更早版本不⽀持 findIndex() ⽅法。
五、基于旧数组⽣成新数组
1.filter
array.filter(function(currentItem, index, arr),thisValue): 创建⼀个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter 遍历的元素范围在第⼀次调⽤ callback 之前就已经确定了。在调⽤ filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传⼊ callback 的值是 filter 遍历到它们那⼀刻的值。被删除或从来未被赋值的元素不会被遍历到。
参数：
function(必选)-根据return的布尔值判断是否符合条件
thisValue(可选)-对象作为该执⾏回调时使⽤，传递给函数，⽤作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
返回值：返回数组，包含了符合条件的所有元素，如果没有符合条件的则返回空数组。
注意： filter() 不会对空数组进⾏检测。
注意： filter() 不会改变原始数组。
实例: 输出数组 ages 中所有元素都⼤于 18 的元素:
var ages =[32,33,16,40];
function checkAdult(age){
return age >=18;
}
function myFunction(){
console.log( ages.filter(checkAdult));
}
2.map
array.map(callback(value, index, arr),thisValue)：返回⼀个新数组，数组中的元素为原始数组元素调⽤函数处理后的值
map⽅法会给原数组中的每个元素都按顺序调⽤⼀次callback函数，callback每次执⾏后的返回值（包括undefined）组合起来形成⼀个新数组。callback函数只会在有值的索引上被调⽤，那些从来没被赋过值或者使⽤delete删除的索引则不会被调⽤。使⽤map⽅法处理数组时，数组元素的范围是在callba
ck⽅法第⼀次调⽤之前就已经确定了。在map⽅法执⾏的过程中，原数组中新增加的元素将不会被callback 访问到，若已经存在的元素被改变或删除了，则他们传递到callback的值是map⽅法遍历到他们的那⼀刻的值，⽽被删除的元素将不会被访问到。
返回值：返回⼀个新数组，数组中的元素为原始数组元素调⽤函数处理后的值。
注意：map不会改变原始数组;map()⽅法按照原始数组元素顺序依次处理元素
3.forEach与map异同
array.forEach(function(currentValue, index, arr), thisValue)【thisValue为可选，⽤作 “this” 的值；如果这个参数为空，“undefined” 会传递给 “this” 值】: 针对每⼀个元素执⾏提供的函数。
array.map(function(currentValue,index,arr), thisValue) 【thisValue为可选，对象作为该执⾏回调时使⽤，传递给函数，⽤作“this” 的值】: 创建⼀个新的数组，其中每⼀个元素由调⽤数组中的每⼀个元素执⾏提供的函数得来。
相同：两者都不会对空数组进⾏检测（但原始对象不是数组会报错）；
不同：返回值、是否修改原数组。
forEach()⽅法不会返回执⾏结果、⽽是undefined，⽽且会修改原来的数组。⽽map()⽅法会得到⼀个新的数组并返回。
六、循环判断
1.every
array.every(function(currentValue,index,arr), thisValue) ： 如果数组中检测到有⼀个元素不满⾜，则整个表达式返回 false ，且剩余的元素不会再进⾏检测。
返回值：如果所有元素都满⾜条件，则返回 true。(A&B&)
2.some
array.some(function(currentValue,index,arr),thisValue) ：如果有⼀个元素满⾜条件，则表达式返回true , 剩余的元素不会再执⾏检测。
返回值：如果没有满⾜条件的元素，则返回false。
3.every与some异同
相同：两者都不会对空数组进⾏检测，不会改变原始数组。
不同：
every()是对数组中每⼀项运⾏给定函数，如果该函数对每⼀项返回true，则返回true。  (A&B&)js数组方法总结
some()是对数组中每⼀项运⾏给定函数，如果该函数对任⼀项返回true，则返回true。 (A || B || C...)
注意：
当判断条件为”不满⾜某条件“时，注意范围界定，因为等价的是 ! (A&B&C) 和 (!A || !B || !C)。以下两段代码中的myFunction是等价的：
var ages =[32,33,16,40];
function checkAdult(age){
return age >=18;
}
function myFunction(){
return ages.every(checkAdult)
}
var ages =[32,33,16,40];
function checkNotAdult(age){
return age <18;
}
function myFunction(){
return!ages.some(checkNotAdult)
}
七、不完全遍历
1.forEach等遍历⽅法+内嵌 if 判断；
2.for (语句 1; 语句 2; 语句 3)：利⽤某变量+语句2+语句3做控制；
3.当循环需要在”第⼀个满⾜某条件的元素“中终⽌时，可以利⽤every/some（推荐） 或 find/findIndex（仅ES6）做控制。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。