js数组遍历方法

• for循环：使用评率最高，也是最基本的一种遍历方式

let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);       //  0 1 2 3 4
    console.log(arr[i]);  //a b c d e
}

• forEach()循环：forEach中传入要执行的回调函数，函数有三个参数。第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
    console.log(item);   // a b c d e
    console.log(index);  // 0 1 2 3 4
    console.log(arr);    // ['a','b','c','d','e']
})

• $.each( object, callback )

参数 描述
object Object类型 指定需要遍历的对象或数组。
callback Function类型 指定的用于循环执行的函数。
jquery 的 each 方法中如果 return true 相当于是 continue，而 return false 相当于是 break。

var arr = [ "one", "two", "three", "four", "five" ];

	$.each( arr, function( i, val ) {
		$( "#" + val ).text( "我的是 " + val + "." );
		// 在 "three" 之后将停止运行
		return ( val !== "three" );
	});

• map循环：map()中传入要执行的回调函数，函数有三个参数。第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

var arr = [
    {name:'a',age:'18'},
    {name:'b',age:'19'},
    {name:'c',age:'20'}
];
arr.map(function(item,index) {
    if(item.name == 'b') {
        console.log(index)  // 1
    }
})

• for…in循环：for…in循环可用于循环对象和数组

let arr = ['a','b','c','d','e'];
for(var key in arr) {
    console.log(key);  //  0 1 2 3 4 返回数组索引
    console.log(arr[key]) //  a b c d e
}

• for…of循环：可循环数组和对象，推荐用于遍历数组。
  for…of提供了三个新方法：

1. key()是对键名的遍历；
2. value()是对键值的遍历；
3. entries()是对键值对的遍历；

let arr = ['1 ', '2 ', '3 '];
for (let item of arr) {
  console.log(item); //  1  2  3
}
// 输出数组索引
for (let item of arr.keys()) {
  console.log(item);  // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
  console.log(item + ':' + val); //  0:1  1：2  2：3 
}

• filter()
  filter() 方法创建一个包含通过测试的数组元素的新数组。
  这个例子用值大于 18 的元素创建一个新数组：
  实例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

• reduce()
  reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
  reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。
  reduce() 方法不会减少原始数组。
  这个例子确定数组中所有数字的总和：
  实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

请注意此函数接受 4 个参数：
总数（初始值/先前返回的值）
项目值
项目索引
数组本身
reduce() 方法能够接受一个初始值：
实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

• every()
  every() 方法检查所有数组值是否通过测试。通过返回true
  every()当内部return false时跳出整个循环
  这个例子检查所有数组值是否大于 18：
  实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

• some()
  some() 方法检查某些数组值是否通过了测试。
  some()当内部return true时跳出整个循环：
  这个例子检查某些数组值是否大于 18：
  实例

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

• indexOf()
  indexOf() 方法在数组中搜索元素值并返回其位置。
  注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。
  返回第一个匹配的下标，没有则返回-1
  实例
  检索数组中的项目 “Apple”：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

• find()
  find() 方法返回通过测试函数的第一个数组元素的值。
  这个例子查找（返回）大于 18 的第一个元素的值：
  实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

• findIndex()
  findIndex() 方法返回通过测试函数的第一个数组元素的索引。
  这个例子查找大于 18 的第一个元素的索引：
  实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

forEach、map、filter、reduce、every、some 都会有 break 和 continue 不生效的问题，因为是在function中，可以用try-catch抛出错误对象来终止循环，要使用 break、continue 可以使用 for、for…in、for…of、while。