html弹窗中遍历数组,js遍历数组的方法

有的东西看着挺常见的，但是如果不去归纳总结一下，一时半会还真未必就能全想起来。就像有时一个很熟悉的人，甚至熟得不能再熟了，突然想给别人介绍他的名字的时候，却突然想不起来他叫什么名字呢？！

在这里，我们来总结下，js遍历数组都有些什么方法吧。

我们先声明一个数组，用于测试，如下：

let arrTest=[1,543,6,34,342,424,2435,5];

一、for循环，也是最常见的，如下：

for(let i=0,len=arrTest.length;i

console.log(arrTest[i]);

}

二、forEach:数组每个元素都执行一次回调函数。兼容ie9及以上浏览器，返回值不会改变原数组，而且在回调函数里面，返回值也没有被使用。如下：

let eachReturn=arrTest.forEach(function(currentValue,index,arr){

console.log(currentValue,index,arr);

return currentValue*2;

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(eachReturn);

undefined

三、map:通过指定函数处理数组的每个元素，并返回处理后的数组。兼容ie9及以上浏览器，返回值不会改变原数组，返回一个新数组。如下：

let mapArr=arrTest.map(function(currentValue,index,arr){

console.log(currentValue,index,arr);

return currentValue*2;

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(mapArr);

Array(8) [ 2, 1086, 12, 68, 684, 848, 4870, 10 ]

四、filter:检测数值元素，并返回符合条件所有元素的数组。兼容ie9及以上浏览器，返回值不会改变原数组，返回一个新数组。如下：

let filterArr=arrTest.filter(function(currentValue,index,arr){

console.log(currentValue,index,arr);

if(currentValue>100){

return currentValue*2;

}

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(filterArr);

Array(4) [ 543, 342, 424, 2435 ]

五、some:检测数组元素中是否有元素符合指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。兼容ie9及以上浏览器，返回值不会改变原数组，返回一个布尔值。如下：

let someReturn=arrTest.some(function(currentValue,index,arr){

console.log(currentValue,index,arr);

if(currentValue>100){

return currentValue*2;

}

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(someReturn);

true//虽然我们在回调函数内返回的是一个数字，但是最终some返回的是一个布尔值。

六、every:检测数组元素是否所有元素都符合指定条件，如果有一个元素不满足条件，则表达式返回false, 剩余的元素不会再执行检测；如果所有元素都满足条件，则返回 true。兼容ie9及以上浏览器，返回值不会改变原数组，返回一个布尔值。如下：

let everyReturn=arrTest.every(function(currentValue,index,arr){

console.log(currentValue,index,arr);

if(currentValue>100){

return currentValue*2;

}

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(everyReturn);

false//虽然我们在回调函数内返回的是一个数字，但是最终some返回的是一个布尔值。

七、reduce:接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。对于空数组是不会执行回调函数的。兼容ie9及以上浏览器，返回值不会改变原数组。如下：

let reduceReturn=arrTest.reduce(function(total,currentValue, index,arr){

console.log(currentValue,index,arr);

let _newTotal=total+currentValue;

if(_newTotal>500){

return _newTotal;

}else{

return total;

}

},0);

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(reduceReturn);

3789

八、reduceRight:功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加，最终计算为一个值。对于空数组是不会执行回调函数的。兼容ie9及以上浏览器，返回值不会改变原数组。如下：

let reduceRightReturn=arrTest.reduceRight(function(total,currentValue, index,arr){

console.log(currentValue,index,arr);

let _newTotal=total+currentValue;

if(_newTotal>500){

return _newTotal;

}else{

return total;

}

},0);

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(reduceRightReturn);

3785

九、find:返回通过测试(函数内判断)的数组的第一个元素的值，当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数；如果没有符合条件的元素返回 undefined 。兼容ie12及以上浏览器，返回值不会改变原数组。如下：

let findReturn=arrTest.find(function(currentValue,index,arr){

console.log(currentValue,index,arr);

if(currentValue>100){

return currentValue*2;

}

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(findReturn);

543

十、findIndex:方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。兼容ie12及以上浏览器，返回值不会改变原数组。如下：

let findIndexReturn=arrTest.findIndex(function(currentValue,index,arr){

console.log(currentValue,index,arr);

if(currentValue>100){

return currentValue*2;

}

});

console.log(arrTest);

Array(8) [ 1, 543, 6, 34, 342, 424, 2435, 5 ]

console.log(findIndexReturn);

1

十一、for…of:遍历所有可迭代iterable的对象。兼容ie12及以上浏览器。如下：

for(let value of arrTest){

console.log(value);

}

其他：像while、do…while循环虽然也可以用来循环数组，不过很少用到，因为数组知道长度，所以用for循环相对更常见。for…in也可以遍历数组，不过他还会把数组自身和继承的可枚举的属性和方法给遍历出来，因为他本来是用来遍历对象的，而在js里面数组也是一个对象。