JavaScript数组的循环和迭代

时间:2022-12-30 12:25:04

JavaScript数组的循环和迭代

循环

for循环

普通版for循环

var arr = ["a","b","c","d"];

for (let i = 0; i < arr.length; i++){
console.log(arr[i]); .
//a b c d
}

优化版for循环

var arr = ["a","b","c","d"];

for (let i = 0; len = arr.length;i < len; i++){
console.log(arr[i]); .
//a b c d
}

for in 循环

var arr = ["a","b","c","d"];

for (let i in arr ){
console.log(arr[i]); .
//a b c d
}

for of 循环

var arr = ["a","b","c","d"];

for (let item of arr){
console.log(item); .
//a b c d
}

说明

  1. for-in 是遍历集合对象的键名, for-of 是直接遍历集合对象的键值。
  2.  for-of 的遍历方式性能要高于 for-in ,但仍比不不上普通的 for 循环。
  3. for-of 不仅支持数组的遍历,还支持大多数类数组对象。同时也支持 ES6 里新增的 Map 和 Set 对象

数组迭代

forEach()

描述:按顺序让数组中每一项依次执行某种相同的操作。

var arr = [10, 11, 12,13, 14];

arr.forEach(function(item, index){
console.log( item);
//10 11 12 13 14
console.log( index); //0 1 2 3 4
})

说明:

  1. 数组自带的 forEach 循环,使用频率较高,但实际上性能比普通 for 循环弱。 

forEach 不能使用 continue 和 break 语句句中断循环,也不能使用 return 语句句返回到外层函 数。

map()

描述:按顺序让数组中每一项依次执行某种相同的操作,然后返回一个新数组

var arr = [10, 11, 12,13, 14];

var newArr = arr.map(function(item, index){
return item * 2;
})
console.log( newArr);
//[20, 22, 24, 26,28]

filter()

描述:按顺序让数组中每一项依次执行某种相同的操作,然后筛选出符合条件的元素,组成新数组并返回。

var arr = [10, 11, 12,13, 14];

var newArr = arr.filter(function(item, index){
return item % 2 == 0;
})
console.log( newArr);
//[10, 12, 14]

feduce()

描述:按顺序让数组中的前项和后项做某种计算,并累计返回最终值。

var arr = [10, 11, 12,13, 14];

var result = arr.reduce(function(prev, next){
return prev + next;
})
console.log( result);
// 60

every()

描述:按顺序让数组中每一项依次执行某种相同的操作,用来检测数组中每一项是否都符合条件。

var arr = [10, 11, 12,13, 14];

var result = arr.every(function(item, index){
return item % 2 == 0;
})
console.log( result);
// false

说明:检测的元素中,如果全部都满足条件,返回 true ,只要有一项不满足条件,则返回 false 。即 一假必假。

some()

描述:按顺序让数组中每一项依次执行某种相同的操作,用来检测数组中某一项是否都符合条件。

var arr = [10, 11, 12,13, 14];

var result = arr.some(function(item, index){
return item % 2 == 0;
})
console.log( result);
// true

说明:检测的元素中,只要有一项符合条件,就返回结果 true ,如果全部都不满足条件,则返回结 果 false 。即一真必真。