Js数组遍历全方位解析

一、基本概念

JavaScript中，数组遍历是常见操作之一，指逐个地访问数组中的元素。数组遍历可以是使用for循环、forEach()等常用方式，将数组中的每一个元素拿出来进行特定操作。

二、for循环遍历

在JavaScript中，使用for循环迭代数组的每个元素。for循环通过循环变量在数组上迭代，可以通过获取数组长度来限制循环次数，依次访问数组中的每个元素。在下面的示例中，我们展示了如何使用基本的for循环来遍历数组。

var numbers = [1, 2, 3, 4, 5];
for (var i = 0; i < numbers.length; i++) {
 console.log(numbers[i]);
}

在上面的例子中，循环从0开始，以 numbers.length 为界限，到达数组金额，每次将下标加一。通过在每个循环迭代时访问数组的下一个元素，可以依次处理数组中的所有元素。

三、forEach()函数

forEach()方法用于调用数组的每个元素，在函数作为参数时，forEach方法会为数组中的每个元素执行一次该函数，为每个元素执行相同的代码。

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number){
 console.log(number);
});

在上面的例子中，我们定义了一个简单的数组(仅包含5个数字)，并使用forEach()方法访问它。我们传递一个函数作为参数，该函数将每个数组元素作为参数传递给它，并在控制台上打印出相应的数字。这个函数会被执行5次，每次都会处理数组中的下一个元素。

四、for…in循环遍历对象的属性

for…in循环遍历对象的属性，而不是数组的元素。这个循环语句枚举了对象的属性列表，每次循环都访问一个属性名。

var object = {a: 1, b: 2, c: 3};
for (var property in object) {
 console.log(property + ': ' + object[property]);
}

在上面的例子中，我们定义了一个对象，并使用for…in循环遍历其所有属性。在循环的每个迭代中，变量property都被设置为当前枚举属性的名称，即 ‘a’, ‘b’, 和 ‘c’，这个语句将会打印出每个属性的值。

五、for…of循环遍历数组和字符串

ES6中提供了一个新的循环类型 for…of，它允许我们遍历数组和其他可迭代对象，如字符串、Map和Set。

var iterable = [1, 2, 3, 4, 5];
for (var value of iterable) {
 console.log(value);
}

在上面的例子中，我们定义了一个数组，并使用for…of遍历数组的所有元素。这个语句每次迭代将数组中的下一项返回，它将打印出这个迭代的值。

六、map()方法

map()方法是一个新的数组方法，它执行一个在数组的每个元素上执行的函数，并返回一个新的数组，该数组由函数返回的值组成。

var numbers = [1, 2, 3, 4, 5];
var squareNumbers = numbers.map(function(number){
 return number * number;
});
console.log(squareNumbers); //[1, 4, 9, 16, 25]

在上面的例子中，我们定义了一个数组，并使用map()方法来创建一个包含数组数字的平方的新数组。我们传递一个匿名函数给map()方法，这个函数将每个数字平方，并返回一个新的数字数组。

七、filter()方法

filter()方法是另一个新的数组方法，它返回一个新的数组，该数组中包含通过给定函数测试为真的所有元素。

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function(number){
 return number % 2 == 0;
});
console.log(evenNumbers); // [2, 4]

在上面的例子中，我们定义了一个数组，并使用filter()方法过滤出数组中的偶数。我们传递一个匿名函数给filter()方法，这个函数将每个数字与2取余，如果结果为0则说明数字是偶数，将数字添加到新数组中。

八、reduce()方法

reduce()方法是另一个新的数组方法，用于对数组中的元素执行函数，并将函数的结果累积到单个值中。

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(total, number){
 return total + number;
}, 0);
console.log(sum); // 15

在上面的例子中，我们定义了一个数组，并使用reduce()方法对数组中的数值求和。我们传递一个匿名函数给reduce()方法，这个函数将先将0作为total参数给出，迭代每个数组元素并添加到 total 变量中，最终得出数组数字之和。

九、find()方法

find()方法是另一个新的数组方法，用于返回数组中第一个满足给定条件的元素。

var numbers = [1, 2, 3, 4, 5];
var evenNumber = numbers.find(function(number){
 return number % 2 == 0;
});
console.log(evenNumber); // 2

在上面的例子中，我们定义了一个数组，并使用find()方法找到数组中的第一个偶数。我们传递一个匿名函数给find()方法，这个函数将每个数字与2取余，如果结果为0则说明数字是偶数，返回找到的第一个偶数。

十、every()方法与some()方法

every()方法和some()方法都用于检查数组中的元素是否满足给定条件，但它们返回的是布尔值。

var numbers = [1, 2, 3, 4, 5];
var allEvenNumbers = numbers.every(function(number){
 return number % 2 == 0;
});
console.log(allEvenNumbers); // false

var someEvenNumbers = numbers.some(function(number){
 return number % 2 == 0;
});
console.log(someEvenNumbers); // true

在上面的例子中，我们定义了一个数组，并使用every()方法检查数组中的元素是否都是偶数，以及使用some()方法检查数组中是否存在偶数。在使用every()方法时，只有当所有元素都是偶数时，该方法才会返回true。在使用some()方法时，只有当至少有一个元素是偶数时，该方法才会返回true。

总结

在JavaScript中，数组遍历是非常常见的操作。可以使用多种方式遍历数组，包括使用基本的for循环、forEach()、for…in循环、for…of循环、map()、filter()、reduce()、find()、every()和 some()等方法。这些方法有不同的用途和功能，可以满足不同的需求，让开发更加高效方便。

原创文章，作者：NSQHN，如若转载，请注明出处：https://www.506064.com/n/335066.html