还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 1. `for` 循环
- 2. `for...of` 循环 (ES6+)
- 3. `forEach()` 方法
- 4. `map()` 方法
- 5. `filter()` 方法
- 6. `reduce()` 方法
- 7. `entries()`, `keys()`, `values()` 结合 `for...of` (ES6+)
- 8. `find()` 方法
- 9. `findIndex()` 方法
- 10. `some()` 方法
- 11. `every()` 方法
JavaScript中遍历数组的有哪些方法呢? 下面列出11种方法,包括语法、注意事项、示例代码等。
1. for
循环
语法:
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
注意事项:
- 通常配合数组的
.length
属性使用。 - 索引从0开始,需要注意边界问题。
代码示例:
let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
2. for...of
循环 (ES6+)
语法:
for (let item of array) {
console.log(item);
}
注意事项:
- 用于遍历可迭代对象(如数组)的值,不提供索引。
- 不适用于需要索引的操作。
代码示例:
let colors = ['red', 'green', 'blue'];
for (let color of colors) {
console.log(color);
}
3. forEach()
方法
语法:
array.forEach(function(currentValue, index, array) {
// 你的代码
}, thisArg);
注意事项:
- 不返回值,主要用于无返回值的遍历操作。
- 提供了元素值、索引和数组本身的引用,但无法中断循环。
代码示例:
let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, idx) => {
console.log(`${idx}: ${num}`);
});
4. map()
方法
语法:
let newArray = array.map(function(currentValue, index, array) {
return /* 新值 */;
}, thisArg);
注意事项:
- 创建并返回一个新数组,其中的元素是原数组元素经过回调函数处理后的结果。
- 不会改变原数组。
代码示例:
let squares = [1, 2, 3].map(n => n * n);
console.log(squares); // 输出: [1, 4, 9]
5. filter()
方法
语法:
let filteredArray = array.filter(function(currentValue, index, array) {
return /* 返回布尔值决定当前元素是否应保留在新数组中 */;
}, thisArg);
注意事项:
- 创建并返回一个新数组,其中包含了原数组中满足条件的元素。
- 不会改变原数组。
代码示例:
let evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]
6. reduce()
方法
语法:
let result = array.reduce(function(accumulator, currentValue, index, array) {
return /* 更新 accumulator 的值 */;
}, initialValue);
注意事项:
- 将数组元素累积计算成一个单一的返回值。
- 需要一个初始值,如果不提供,则默认取数组的第一项和第二项开始计算。
代码示例:
let sum = [1, 2, 3, 4, 5].reduce((total, num) => total + num, 0);
console.log(sum); // 输出: 15
7. entries()
, keys()
, values()
结合 for...of
(ES6+)
语法:
for (let [index, value] of array.entries()) { /*...*/ }
for (let key of array.keys()) { /*...*/ }
for (let value of array.values()) { /*...*/ }
注意事项:
entries()
遍历索引和值。keys()
遍历索引。values()
遍历值。
代码示例:
let array = ['a', 'b', 'c'];
for (let [index, value] of array.entries()) {
console.log(`Index: ${index}, Value: ${value}`);
}
8. find()
方法
语法:
let foundValue = array.find(function(currentValue, index, array) {
return /* 条件判断 */;
}, thisArg);
注意事项:
- 查找数组中第一个满足条件的元素,并返回该元素的值,如果没有找到符合条件的元素,则返回
undefined
。 - 不改变原数组。
代码示例:
let array = [1, 2, 3, 4, 5];
let foundNum = array.find(n => n > 3);
console.log(foundNum); // 输出: 4
9. findIndex()
方法
语法:
let foundIndex = array.findIndex(function(currentValue, index, array) {
return /* 条件判断 */;
}, thisArg);
注意事项:
- 查找数组中第一个满足条件的元素的索引,如果没有找到符合条件的元素,则返回
-1
。 - 不改变原数组。
代码示例:
let array = [1, 2, 3, 4, 5];
let index = array.findIndex(n => n === 3);
console.log(index); // 输出: 2
10. some()
方法
语法:
let isSomeTrue = array.some(function(currentValue, index, array) {
return /* 条件判断 */;
}, thisArg);
注意事项:
- 检查数组中是否存在至少一个满足条件的元素,存在则返回
true
,否则返回false
。 - 不改变原数组。
代码示例:
let array = [1, 2, 3, 4, 5];
let hasEven = array.some(n => n % 2 === 0);
console.log(hasEven); // 输出: true
11. every()
方法
语法:
let isAllTrue = array.every(function(currentValue, index, array) {
return /* 条件判断 */;
}, thisArg);
注意事项:
- 检查数组中所有元素是否都满足条件,全部满足则返回
true
,否则返回false
。 - 不改变原数组。
代码示例:
let array = [1, 2, 3, 4, 5];
let allLessThan6 = array.every(n => n < 6);
console.log(allLessThan6); // 输出: true
综上所述,JavaScript提供了多种遍历数组的方式,可以根据具体需求选择合适的方法。