一、js遍历方法
序号 | 方法 | 描述 |
1 | for | 使用最基本的for循环可以遍历数组 |
2 | for of | for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 |
3 | for in | for...in语句用来遍历对象的可枚举属性,包括自身的属性和继承的属性。 |
4 | forEach() | forEach()方法接收一个回调函数作为参数,用于遍历数组中的每一个元素,可修改原数组。 |
5 | map() | map()方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个新的数组。 |
6 | filter() | filter()方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回满足条件的元素,组成一个新的数组。 |
7 | find() | find()方法接收一个回调函数作为参数,该回调函数会遍历数组中的每一个元素,并返回一个布尔值。当找到第一个满足条件的元素时,find()方法会立即返回该元素,不再继续遍历数组。如果数组中没有满足条件的元素,则返回 undefined 。
|
8 | findIndex() | findIndex()方法也接收一个回调函数作为参数,该回调函数会遍历数组中的每一个元素,并返回一个布尔值。当找到第一个满足条件的元素时,findIndex()方法会立即返回该元素的索引值,不再继续遍历数组。 |
9 | some() | some()方法接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个布尔值,表示是否有至少一个元素满足条件。 |
10 | any() | any() 方法用于检查数组中是否包含任何满足指定条件的元素。如果有,则返回 true;否则返回 false。 |
11 | every() | every()方法接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个布尔值,表示是否所有元素都满足条件。 |
12 | reduce() | reduce()方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个累加值。 |
二、数组遍历方法详解
2.1、for 循环
使用最基本的 for
循环可以遍历数组。
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
2.2、for of
for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的 for
循环和 forEach
方法。for...of循环每次迭代都将返回一个值,而不是索引。
const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
console.log(num);
}
输出结果为:
1
2
3
4
5
for...of
循环还可以遍历字符串,并且能够正确处理 Unicode 字符。
const str = 'hello😀world';
for (const char of str) {
console.log(char);
}
输出结果为:
h
e
l
l
o
😀
w
o
r
l
d
需要注意的是:
for...of 循环不能遍历普通对象,因为它们不是可迭代对象。
对于普通对象,可以使用 for...in
循环来遍历对象的属性。
2.3、for in
for...in语句用来遍历对象的可枚举属性,包括自身的属性和继承的属性。语法如下:
for (variable in object) {
// code to be executed
}
其中,variable
表示属性名,object
表示要遍历的对象。在每次循环中,variable
都会被设置为一个属性名,然后可以通过该属性名来访问对象的属性值。
const person = {
name: 'Alice',
age: 30,
email: 'alice@example.com'
};
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
输出结果为:
name: Alice
age: 30
email: alice@example.com
需要注意的是,for...in循环遍历的是对象的可枚举属性,不包括不可枚举属性和符号属性。如果要遍历对象的所有属性,可以使用 Object.getOwnPropertyNames()
、Object.getOwnPropertySymbols()
和 Reflect.ownKeys()
方法来获取对象的所有属性名。同时,为了避免遍历到继承的属性,可以使用 Object.hasOwnProperty()
方法判断属性是否是对象自身的属性。
2.4、forEach()
forEach()
方法接收一个回调函数作为参数,用于遍历数组中的每一个元素。
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
console.log(item);
});
2.5、map()
map()
方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个新的数组。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(function(item) {
return item * 2;
});
console.log(arr2);
2.6、filter()
filter()
方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回满足条件的元素,组成一个新的数组。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.filter(function(item) {
return item > 2;
});
console.log(arr2);
2.7、find()
find()方法接收一个回调函数作为参数,该回调函数会遍历数组中的每一个元素,并返回一个布尔值。当找到第一个满足条件的元素时,find()
方法会立即返回该元素,不再继续遍历数组。如果数组中没有满足条件的元素,则返回 undefined
。
find()方法的语法如下:
参数说明:
item
:当前遍历到的元素。index
:当前遍历到的元素的下标。array
:要遍历的数组。
下面是一个简单的示例,使用 find()
方法查找数组中第一个大于 3 的元素:
const arr = [1, 2, 3, 4, 5];
const result = arr.find(function(item) {
return item > 3;
});
console.log(result); // 输出:4
如果数组中没有满足条件的元素,则返回 undefined
:
const arr = [1, 2, 3];
const result = arr.find(function(item) {
return item > 3;
});
console.log(result); // 输出:undefined
2.8、findIndex()
JavaScript 中的 findIndex()
方法和 find()
方法类似,不同的是它返回的是第一个满足条件的索引值,而不是对应的元素值。
findIndex()
方法也接收一个回调函数作为参数,该回调函数会遍历数组中的每一个元素,并返回一个布尔值。当找到第一个满足条件的元素时,findIndex()
方法会立即返回该元素的索引值,不再继续遍历数组。
findIndex()
方法的语法如下:
array.findIndex(function(item, index, array) {
// 满足条件的逻辑代码
});
参数说明:
item
:当前遍历到的元素。index
:当前遍历到的元素的下标。array
:要遍历的数组。
下面是一个示例,使用 findIndex()
方法查找数组中第一个大于 3 的元素的索引值:
const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(function(item) {
return item > 3;
});
console.log(result); // 输出:3
如果数组中没有满足条件的元素,则返回 -1
:
const arr = [1, 2, 3];
const result = arr.findIndex(function(item) {
return item > 3;
});
console.log(result); // 输出:-1
2.9、some()
JavaScript 中的some() 方法是用于判断数组中是否至少有一个元素满足指定的条件,如果是则返回true,否则返回false。
some() 方法接受一个回调函数作为参数,该函数接受三个参数:
当前处理的数组元素。
当前处理的数组元素的索引。
当前的数组对象。
回调函数必须返回一个布尔值。如果数组中至少有一个元素满足该函数的条件,则some() 返回 true
,否则返回 false
。
下面是 some()
方法的语法:
array.some(function(currentValue, index, arr), thisValue)
其中,thisValue
参数可选,用于设置回调函数中 this
关键字的值。
以下是使用 some()
方法的一个例子,判断数组 arr
中是否包含值为 5 的元素:
let arr = [1, 3, 5, 7, 9];
let hasFive = arr.some(function(num) {
return num === 5;
});
console.log(hasFive); // true
2.10、any()
Array.prototype.any() 方法用于检查数组中是否包含任何满足指定条件的元素。如果有,则返回 true;否则返回 false。
const arr = [1, 2, 3, 4, 5];
const result = arr.any((num) => num > 3);
console.log(result); // true
在上面的代码中,any() 方法用于检查数组 arr 中是否包含任何一个数大于 3 的元素,由于数组中有 4 和 5 两个数大于 3,因此方法返回 true。
需要注意的是,该方法只能用于数组类型。如果想要在其他类型中使用类似的功能,可以使用 some() 方法。
2.11、every()
every()
方法接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个布尔值,表示是否所有元素都满足条件。
const arr = [1, 2, 3, 4, 5];
const allEven = arr.every(function(item) {
return item % 2 === 0;
});
console.log(allEven);
2.12、reduce()
reduce()
方法也接收一个回调函数作为参数,用于遍历数组中的每一个元素,并返回一个累加值。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(prev, curr) {
return prev + curr;
});
console.log(sum);
三、过程记录
3.1、foreach 和 map 都是用于遍历数组或集合的函数,但它们的用途不同
foreach
方法的目的是对数组或集合进行迭代,并执行操作。foreach
方法执行代码块,但不会生成一个新的数组或集合。因此,它对于不需要生成新数据结构的操作很有用,比如打印数组中的元素或更改集合中的元素。
map
方法返回一个新的数组或集合,其中每个元素都是经过函数处理的原始元素。map
方法不会更改原始数组或集合,而是基于它们创建新的数据结构。因此,map
方法很适合需要生成新集合或数组的操作。
例如,假设有一个存储数字的数字数组。要将所有数字加倍并打印结果,可以使用 foreach
方法,如下所示:
let arr = [1, 2, 3, 4, 5];
arr.forEach((num) => {
console.log(num * 2);
});
要生成一个新的数组,其中包含原始数组的每个元素的两倍,请使用 map
方法,如下所示:
let arr = [1, 2, 3, 4, 5];
let doubledArr = arr.map((num) => {
return num * 2;
});
console.log(doubledArr); // Output: [2, 4, 6, 8, 10]
因此,使用 foreach
和 map
取决于您的需求。如果您需要执行操作并不需要生成新的数组或集合,请使用 foreach
。如果您需要生成一个新的数组或集合,请使用 map
。
四、欢迎交流指正,关注我,一起学习。
参考链接:文章来源:https://www.toymoban.com/news/detail-706921.html
JS 5种遍历对象的方式_超级切图仔的博客-CSDN博客_js遍历对象文章来源地址https://www.toymoban.com/news/detail-706921.html
到了这里,关于JavaScript:js数组/对象遍历方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!