一、js遍歷方法

二、數(shù)組遍歷方法詳解

2.1、for 循環(huán)

使用最基本的 for 循環(huán)可以遍歷數(shù)組。

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語句用來遍歷可迭代對象（包括數(shù)組、Set、Map、字符串等），它可以替代傳統(tǒng)的 for 循環(huán)和 forEach 方法。for...of循環(huán)每次迭代都將返回一個值，而不是索引。

const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
  console.log(num);
}

輸出結(jié)果為：

1
2
3
4
5

for...of 循環(huán)還可以遍歷字符串，并且能夠正確處理 Unicode 字符。

const str = 'hello??world';
for (const char of str) {
  console.log(char);
}

輸出結(jié)果為：

h
e
l
l
o
??
w
o
r
l
d

需要注意的是:
for...of 循環(huán)不能遍歷普通對象，因?yàn)樗鼈儾皇强傻鷮ο蟆?br> 對于普通對象，可以使用 for...in 循環(huán)來遍歷對象的屬性。

2.3、for in

for...in語句用來遍歷對象的可枚舉屬性，包括自身的屬性和繼承的屬性。語法如下：

for (variable in object) {
  // code to be executed
}

其中，variable 表示屬性名，object 表示要遍歷的對象。在每次循環(huán)中，variable 都會被設(shè)置為一個屬性名，然后可以通過該屬性名來訪問對象的屬性值。

const person = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

輸出結(jié)果為：

name: Alice
age: 30
email: alice@example.com

需要注意的是，for...in循環(huán)遍歷的是對象的可枚舉屬性，不包括不可枚舉屬性和符號屬性。如果要遍歷對象的所有屬性，可以使用 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 方法來獲取對象的所有屬性名。同時，為了避免遍歷到繼承的屬性，可以使用 Object.hasOwnProperty() 方法判斷屬性是否是對象自身的屬性。

2.4、forEach()

forEach()方法接收一個回調(diào)函數(shù)作為參數(shù)，用于遍歷數(shù)組中的每一個元素。

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
  console.log(item);
});

2.5、map()

map() 方法也接收一個回調(diào)函數(shù)作為參數(shù)，用于遍歷數(shù)組中的每一個元素，并返回一個新的數(shù)組。

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(function(item) {
  return item * 2;
});
console.log(arr2);

2.6、filter()

filter()方法也接收一個回調(diào)函數(shù)作為參數(shù)，用于遍歷數(shù)組中的每一個元素，并返回滿足條件的元素，組成一個新的數(shù)組。

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.filter(function(item) {
  return item > 2;
});
console.log(arr2);

2.7、find()

find()方法接收一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會遍歷數(shù)組中的每一個元素，并返回一個布爾值。當(dāng)找到第一個滿足條件的元素時，find() 方法會立即返回該元素，不再繼續(xù)遍歷數(shù)組。如果數(shù)組中沒有滿足條件的元素，則返回 undefined。

find()方法的語法如下：

參數(shù)說明：

item：當(dāng)前遍歷到的元素。
index：當(dāng)前遍歷到的元素的下標(biāo)。
array：要遍歷的數(shù)組。

下面是一個簡單的示例，使用 find() 方法查找數(shù)組中第一個大于 3 的元素：

const arr = [1, 2, 3, 4, 5];
const result = arr.find(function(item) {
  return item > 3;
});
console.log(result); // 輸出：4

如果數(shù)組中沒有滿足條件的元素，則返回 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() 方法類似，不同的是它返回的是第一個滿足條件的索引值，而不是對應(yīng)的元素值。

findIndex() 方法也接收一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會遍歷數(shù)組中的每一個元素，并返回一個布爾值。當(dāng)找到第一個滿足條件的元素時，findIndex() 方法會立即返回該元素的索引值，不再繼續(xù)遍歷數(shù)組。

findIndex() 方法的語法如下：

array.findIndex(function(item, index, array) {
  // 滿足條件的邏輯代碼
});

參數(shù)說明：

item：當(dāng)前遍歷到的元素。
index：當(dāng)前遍歷到的元素的下標(biāo)。
array：要遍歷的數(shù)組。

下面是一個示例，使用 findIndex() 方法查找數(shù)組中第一個大于 3 的元素的索引值：

const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(function(item) {
  return item > 3;
});
console.log(result); // 輸出：3

如果數(shù)組中沒有滿足條件的元素，則返回 -1：

const arr = [1, 2, 3];
const result = arr.findIndex(function(item) {
  return item > 3;
});
console.log(result); // 輸出：-1

2.9、some()

JavaScript 中的some()?方法是用于判斷數(shù)組中是否至少有一個元素滿足指定的條件，如果是則返回true，否則返回false。

some()?方法接受一個回調(diào)函數(shù)作為參數(shù)，該函數(shù)接受三個參數(shù)：

當(dāng)前處理的數(shù)組元素。
當(dāng)前處理的數(shù)組元素的索引。
當(dāng)前的數(shù)組對象。

回調(diào)函數(shù)必須返回一個布爾值。如果數(shù)組中至少有一個元素滿足該函數(shù)的條件，則some()?返回 true，否則返回 false。

下面是 some() 方法的語法：

array.some(function(currentValue, index, arr), thisValue)

其中，thisValue 參數(shù)可選，用于設(shè)置回調(diào)函數(shù)中 this 關(guān)鍵字的值。

以下是使用 some() 方法的一個例子，判斷數(shù)組 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() 方法用于檢查數(shù)組中是否包含任何滿足指定條件的元素。如果有，則返回 true；否則返回 false。

const arr = [1, 2, 3, 4, 5];
const result = arr.any((num) => num > 3);
console.log(result); // true

在上面的代碼中，any() 方法用于檢查數(shù)組 arr 中是否包含任何一個數(shù)大于 3 的元素，由于數(shù)組中有 4 和 5 兩個數(shù)大于 3，因此方法返回 true。

需要注意的是，該方法只能用于數(shù)組類型。如果想要在其他類型中使用類似的功能，可以使用 some() 方法。

2.11、every()

every() 方法接收一個回調(diào)函數(shù)作為參數(shù)，用于遍歷數(shù)組中的每一個元素，并返回一個布爾值，表示是否所有元素都滿足條件。

const arr = [1, 2, 3, 4, 5];
const allEven = arr.every(function(item) {
  return item % 2 === 0;
});
console.log(allEven);

2.12、reduce()

reduce() 方法也接收一個回調(diào)函數(shù)作為參數(shù)，用于遍歷數(shù)組中的每一個元素，并返回一個累加值。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(prev, curr) {
  return prev + curr;
});
console.log(sum);

三、過程記錄

3.1、foreach 和 map 都是用于遍歷數(shù)組或集合的函數(shù)，但它們的用途不同

foreach 方法的目的是對數(shù)組或集合進(jìn)行迭代，并執(zhí)行操作。
foreach 方法執(zhí)行代碼塊，但不會生成一個新的數(shù)組或集合。因此，它對于不需要生成新數(shù)據(jù)結(jié)構(gòu)的操作很有用，比如打印數(shù)組中的元素或更改集合中的元素。

map 方法返回一個新的數(shù)組或集合，其中每個元素都是經(jīng)過函數(shù)處理的原始元素。
map 方法不會更改原始數(shù)組或集合，而是基于它們創(chuàng)建新的數(shù)據(jù)結(jié)構(gòu)。因此，map 方法很適合需要生成新集合或數(shù)組的操作。

例如，假設(shè)有一個存儲數(shù)字的數(shù)字?jǐn)?shù)組。要將所有數(shù)字加倍并打印結(jié)果，可以使用 foreach 方法，如下所示：

let arr = [1, 2, 3, 4, 5];
arr.forEach((num) => {
    console.log(num * 2);
});

要生成一個新的數(shù)組，其中包含原始數(shù)組的每個元素的兩倍，請使用 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 取決于您的需求。如果您需要執(zhí)行操作并不需要生成新的數(shù)組或集合，請使用 foreach。如果您需要生成一個新的數(shù)組或集合，請使用 map。

四、歡迎交流指正，關(guān)注我，一起學(xué)習(xí)。

參考鏈接：

JS 5種遍歷對象的方式_超級切圖仔的博客-CSDN博客_js遍歷對象文章來源地址http://www.zghlxwxcb.cn/news/detail-706921.html

到了這里，關(guān)于JavaScript：js數(shù)組/對象遍歷方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！