講一下for…of

for...of 是 JavaScript 的一種循環(huán)語法，用于遍歷可迭代對(duì)象 （如數(shù)組、字符串、Set、Map 等） 中的元素。它提供了一種簡潔的方式來遍歷集合中的元素，而無需使用傳統(tǒng)的索引迭代方式。

以下是 for...of 循環(huán)的基本語法：

for (variable of iterable) {
  // 在每次迭代中執(zhí)行的代碼
  // 學(xué)習(xí)一下單詞 statement 語句
  // outline 提綱;目錄
}

• variable：變量，用于存儲(chǔ)當(dāng)前迭代的值。在每次循環(huán)迭代時(shí)，將會(huì)自動(dòng)賦值為可迭代對(duì)象中的當(dāng)前元素。
• iterable：可迭代對(duì)象，即要遍歷的集合。它可以是數(shù)組、字符串、Set、Map 等實(shí)現(xiàn)了迭代器接口的對(duì)象。

在每次迭代時(shí)，for...of 語句會(huì)將 iterable 中的下一個(gè)元素賦值給 variable，直到遍歷完所有元素為止。

以下是使用 for...of 循環(huán)遍歷數(shù)組的示例：

var colors = ['red', 'green', 'blue'];

for (var color of colors) {
  console.log(color);
}

在上述示例中，for...of 循環(huán)會(huì)依次遍歷數(shù)組 colors 中的每個(gè)元素，并將當(dāng)前元素賦值給變量 color。然后，在循環(huán)體中，可以對(duì) color 進(jìn)行操作，比如打印它的值。

for...of 循環(huán)的優(yōu)點(diǎn)包括：

• 簡潔：無需處理索引或使用額外的計(jì)數(shù)器變量。
• 自動(dòng)迭代：根據(jù)迭代對(duì)象的特性，它會(huì)自動(dòng)迭代元素并賦值給變量。
• 適用于可迭代對(duì)象：可以用于遍歷各種可迭代對(duì)象，而不僅限于數(shù)組。

需要注意的是，for...of 循環(huán)不適用于普通對(duì)象（Plain Object），因?yàn)槠胀▽?duì)象不是可迭代對(duì)象。若需要遍歷普通對(duì)象的屬性，可以使用 for...in 循環(huán)。

總結(jié)：for...of 是 JavaScript 中一種用于遍歷可迭代對(duì)象的循環(huán)語法。它提供了一種簡潔、直觀的方式來遍歷集合中的元素，而無需使用索引。它適用于數(shù)組、字符串、Set、Map 等實(shí)現(xiàn)了迭代器接口的對(duì)象。

可迭代是什么意思

可迭代對(duì)象（iterable）是指實(shí)現(xiàn)了迭代器協(xié)議的對(duì)象，即實(shí)現(xiàn)了 Symbol.iterator 方法的對(duì)象。迭代器協(xié)議定義了一種標(biāo)準(zhǔn)的方式，使得對(duì)象可以被迭代，也就是說可以用 for...of 循環(huán)遍歷。

一些內(nèi)置對(duì)象，例如 Array、String、Map 和 Set 等都是可迭代對(duì)象，因?yàn)樗鼈兌紝?shí)現(xiàn)了 Symbol.iterator 方法。同時(shí)，我們也可以自己實(shí)現(xiàn)一個(gè)可迭代對(duì)象，只需要在對(duì)象上定義一個(gè) Symbol.iterator 方法，該方法返回一個(gè)迭代器（iterator）對(duì)象，該對(duì)象必須實(shí)現(xiàn)一個(gè) next() 方法，以便迭代器可以按順序訪問該對(duì)象的所有元素。

講一下for…in

for...in 是 JavaScript 的一種循環(huán)語法，用于遍歷對(duì)象的可枚舉屬性 (Enumerable===true)。它提供了一種遍歷對(duì)象屬性的簡潔方式，可以用于遍歷普通對(duì)象和數(shù)組等。

以下是 for...in 循環(huán)的基本語法：

for (variable in object) {
  // 在每次迭代中執(zhí)行的代碼
}

• variable：變量，用于存儲(chǔ)當(dāng)前迭代的屬性名。在每次循環(huán)迭代時(shí)，將會(huì)自動(dòng)賦值為對(duì)象的一個(gè)可枚舉屬性名。
• object：對(duì)象，即要遍歷的對(duì)象。

以下是使用 for...in 循環(huán)遍歷對(duì)象的示例：

var person = {
  name: 'Alice',
  age: 30,
  profession: 'Engineer'
};

for (var key in person) {
  console.log(key + ': ' + person[key]);
}

在上述示例中，for...in 循環(huán)會(huì)遍歷對(duì)象 person 中的每個(gè)可枚舉屬性，并將當(dāng)前屬性名賦值給變量 key。然后，在循環(huán)體中，可以通過 person[key] 來訪問該屬性的值。

需要注意的是，for...in 循環(huán)遍歷的是對(duì)象的可枚舉屬性，包括對(duì)象自身的屬性以及從原型鏈繼承的屬性。若只需遍歷對(duì)象自身的屬性而不包括繼承的屬性，可以使用 hasOwnProperty() 方法進(jìn)行過濾：

var person = new Object({
    name: "Alice",
    age: 30,
    profession: "Engineer",
});

Object.prototype.height = 185; // 定義在原型鏈上

for (var key in person) {
    if (person.hasOwnProperty(key)) { // 這里如果沒有hasOwnProperty判斷，會(huì)打印height鍵值
        console.log(key + ": " + person[key]);
    }
}

此外，for...in 循環(huán)也可用于遍歷數(shù)組的索引或?qū)ο髮傩缘膭?dòng)態(tài)訪問。

總結(jié)：for...in 是 JavaScript 中一種用于遍歷對(duì)象可枚舉屬性的循環(huán)語法。它提供了一種簡潔的方式來遍歷對(duì)象的屬性，可以用于遍歷普通對(duì)象和數(shù)組等。需要注意的是，它會(huì)遍歷對(duì)象自身的屬性以及從原型鏈繼承的屬性。

for...of和for...in的區(qū)別

• for...of 循環(huán)：

  • 遍歷的是可迭代對(duì)象（iterable），例如數(shù)組、字符串、Set、Map 等。

  • 迭代的是對(duì)象的值而不是鍵。

  • 遍歷順序是按照對(duì)象的迭代順序進(jìn)行的，如數(shù)組的索引順序或字符串的字符順序。

  • 不支持遍歷普通對(duì)象（plain objects），因?yàn)槠胀▽?duì)象不是可迭代對(duì)象。

var arr = [1, 2, 3];

for (var value of arr) {
  console.log(value);
}

//輸出結(jié)果：
1
2
3

for...in 循環(huán)：

• 遍歷的是對(duì)象的可枚舉屬性。

• 迭代的是對(duì)象的鍵而不是值。

• 遍歷順序是不確定的，可能不會(huì)按照對(duì)象屬性的順序進(jìn)行遍歷。

• 可以遍歷普通對(duì)象的可枚舉屬性，也可以遍歷數(shù)組等對(duì)象的非索引屬性。

var obj = { a: 1, b: 2, c: 3 };

for (var key in obj) {
  console.log(key + ': ' + obj[key]);
}

//輸出結(jié)果：
a: 1
b: 2
c: 3

講一下forEach

forEach() 是 JavaScript 數(shù)組對(duì)象的一個(gè)內(nèi)置方法，用于遍歷數(shù)組中的每個(gè)元素，并對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)。（在原數(shù)組上進(jìn)行操作且沒有返回值）

正常情況下，應(yīng)該避免在 forEach() 方法中修改原始數(shù)組的元素，因?yàn)樗闹饕康氖?strong>遍歷數(shù)組而不是修改數(shù)組。如果需要對(duì)每個(gè)元素進(jìn)行轉(zhuǎn)換或操作，并生成一個(gè)新的數(shù)組，可以使用 map() 方法。

forEach() 方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在數(shù)組的每個(gè)元素上被調(diào)用。回調(diào)函數(shù)會(huì)接收三個(gè)參數(shù)：當(dāng)前元素的值、當(dāng)前元素的索引和被遍歷的數(shù)組本身。

以下是 forEach() 方法的基本語法：

array.forEach(callback(currentValue, index, array), thisArg)

• callback：回調(diào)函數(shù)，用于對(duì)數(shù)組的每個(gè)元素進(jìn)行操作。它可以接受三個(gè)參數(shù)：
  • currentValue：當(dāng)前遍歷到的元素的值。
  • index：當(dāng)前遍歷到的元素的索引。
  • array（可選）：原始數(shù)組。
• thisArg（可選）：回調(diào)函數(shù)中的 this 值。

下面是一個(gè)示例，展示了如何使用 forEach() 方法對(duì)數(shù)組中的每個(gè)元素進(jìn)行打印操作：

var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(element, index) {
  console.log(`當(dāng)前元素是 ${element}，索引是 ${index}`);
});
// 盡管回調(diào)函數(shù)在代碼中定義了三個(gè)參數(shù)，但只使用了前兩個(gè)參數(shù)。第三個(gè)參數(shù) arr 是可選的，可以選擇在回調(diào)函數(shù)的實(shí)現(xiàn)中忽略它。

在上述示例中，回調(diào)函數(shù)會(huì)在數(shù)組 numbers 的每個(gè)元素上被調(diào)用。它會(huì)打印出當(dāng)前元素的值和索引。循環(huán)會(huì)依次遍歷數(shù)組中的每個(gè)元素，對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)。

forEach() 方法遍歷數(shù)組時(shí)，會(huì)自動(dòng)跳過稀疏數(shù)組中的空位（undefined）。它會(huì)按照數(shù)組元素的順序依次執(zhí)行回調(diào)函數(shù)，直到遍歷完所有元素為止。

需要注意的是，forEach() 方法沒有返回值，它只是對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)。如果需要生成一個(gè)新的數(shù)組，可以使用 map() 方法。

總結(jié)：forEach() 方法用于遍歷數(shù)組中的每個(gè)元素，并對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)。它沒有返回值，只是對(duì)原數(shù)組元素進(jìn)行操作。通過回調(diào)函數(shù)，可以訪問當(dāng)前元素的值和索引，以及原始數(shù)組。

講一下map()

在 JavaScript 中，map() 是數(shù)組對(duì)象的一個(gè)內(nèi)置方法，用于對(duì)數(shù)組中的每個(gè)元素進(jìn)行操作，并返回一個(gè)新的數(shù)組。它會(huì)遍歷原始數(shù)組中的每個(gè)元素，對(duì)每個(gè)元素應(yīng)用回調(diào)函數(shù)，并將回調(diào)函數(shù)的返回值組成一個(gè)新的數(shù)組。（不會(huì)修改原數(shù)組內(nèi)容）

map() 方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在數(shù)組的每個(gè)元素上被調(diào)用，并返回新數(shù)組中的對(duì)應(yīng)元素。

以下是 map() 方法的基本語法：

array.map(callback(element, index, array), thisArg)

• callback：回調(diào)函數(shù)，用于對(duì)數(shù)組的每個(gè)元素進(jìn)行操作。它可以接受三個(gè)參數(shù)：
  • element：當(dāng)前遍歷到的元素。
  • index：當(dāng)前遍歷到的元素的索引。
  • array：原始數(shù)組。
• thisArg（可選）：回調(diào)函數(shù)中的 this 值。

下面是一個(gè)示例，展示了如何使用 map() 方法將數(shù)組中的每個(gè)元素乘以 2，并生成一個(gè)新的數(shù)組：

var numbers = [1, 2, 3, 4, 5];

var doubledNumbers = numbers.map(function(element) {
  return element * 2;
});

console.log(doubledNumbers);  // 輸出：[2, 4, 6, 8, 10]

在上述示例中，回調(diào)函數(shù)將每個(gè)元素乘以 2，并將結(jié)果作為新數(shù)組中的對(duì)應(yīng)元素。因此，doubledNumbers 數(shù)組包含了原始數(shù)組中的每個(gè)元素乘以 2 的結(jié)果。

需要注意的是，map() 方法不會(huì)修改原始數(shù)組，而是返回一個(gè)新的數(shù)組。因此，它是一種純函數(shù)，不會(huì)產(chǎn)生副作用。

另外，如果數(shù)組中的元素是對(duì)象，map() 方法僅對(duì)對(duì)象的引用進(jìn)行操作，不會(huì)進(jìn)行深層復(fù)制。所以在對(duì)對(duì)象數(shù)組進(jìn)行 map() 操作時(shí)，需要注意對(duì)原始對(duì)象的引用和副本的處理。

總結(jié)：map() 方法是數(shù)組的內(nèi)置方法，用于對(duì)數(shù)組中的每個(gè)元素進(jìn)行操作，并返回一個(gè)新的數(shù)組。它通過應(yīng)用回調(diào)函數(shù)對(duì)每個(gè)元素進(jìn)行轉(zhuǎn)換來生成新的數(shù)組。

map()跟foreach有什么區(qū)別

• map()
  • 返回一個(gè)回調(diào)函數(shù)處理后的新數(shù)組
  • 對(duì)原數(shù)組沒有影響
  • 目的：處理數(shù)組數(shù)據(jù)
• forEach
  • 沒有返回值，不會(huì)生成新數(shù)組
  • 可能對(duì)原數(shù)組有影響
  • 目的：遍歷數(shù)組

講一下every()

Array.prototype.every() 方法，它可以用于檢查數(shù)組中的所有元素是否滿足特定條件。

every() 方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在數(shù)組的每個(gè)元素上被調(diào)用，并根據(jù)返回值判斷是否繼續(xù)遍歷數(shù)組。如果回調(diào)函數(shù)對(duì)于每個(gè)元素都返回 true，則 every() 方法返回 true。如果回調(diào)函數(shù)對(duì)于任何一個(gè)元素返回 false，則 every() 方法立即返回 false，不再繼續(xù)遍歷剩余的元素。

以下是 every() 方法的基本語法：

array.every(callback(element, index, array), thisArg)

• callback：回調(diào)函數(shù)，用于對(duì)數(shù)組的每個(gè)元素進(jìn)行操作。它可以接受三個(gè)參數(shù)：
  • element：當(dāng)前遍歷到的元素。
  • index：當(dāng)前遍歷到的元素的索引。
  • array：原始數(shù)組。
• thisArg（可選）：回調(diào)函數(shù)中的 this 值。

下面是一個(gè)示例，展示了如何使用 every() 方法檢查數(shù)組中的所有元素是否為偶數(shù)：

var numbers = [2, 4, 6, 8, 10];

var allEven = numbers.every(function(element) {
  return element % 2 === 0;
});

console.log(allEven);  // 輸出：true

在上述示例中，回調(diào)函數(shù)檢查每個(gè)元素是否為偶數(shù)。由于數(shù)組中的所有元素都是偶數(shù)，所以 every() 方法返回 true。

需要注意的是，如果數(shù)組為空，every() 方法將始終返回 true，因?yàn)闆]有元素不滿足條件。此外，every() 方法只要找到一個(gè)不滿足條件的元素就會(huì)立即停止遍歷剩余的元素。

講一下reduce()

reduce() 是數(shù)組方法之一，用于對(duì)數(shù)組的元素進(jìn)行累積計(jì)算。它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，并可以傳遞一個(gè)初始值。這個(gè)回調(diào)函數(shù)會(huì)被應(yīng)用到數(shù)組的每個(gè)元素上，從左到右進(jìn)行迭代，將前一個(gè)回調(diào)函數(shù)的返回值作為下一個(gè)回調(diào)函數(shù)的輸入，最終得到一個(gè)累積的結(jié)果。

reduce() 方法的語法如下：

array.reduce(callback, initialValue)

• callback 是一個(gè)回調(diào)函數(shù)，它可以接受四個(gè)參數(shù)：
  • accumulator：累積器，用于保存計(jì)算的中間結(jié)果。
  • currentValue：當(dāng)前元素的值。
  • currentIndex：當(dāng)前元素的索引（可選）。
  • array：被迭代的數(shù)組（可選）。 回調(diào)函數(shù)應(yīng)該返回一個(gè)新的累積值，它將作為下一次迭代的 accumulator 值。
• initialValue 是可選的，用于指定累積的初始值。如果沒有提供初始值，則將使用數(shù)組的第一個(gè)元素作為初始值，并從第二個(gè)元素開始進(jìn)行迭代。

reduce() 方法的使用示例：

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
// 這里傳入的實(shí)參0是可選參數(shù)initialValue，用于指定累積的初始值
// 如果沒有提供初始值，則將使用數(shù)組的第一個(gè)元素作為初始值，并從第二個(gè)元素開始進(jìn)行迭代。
// 所以不寫也是OK的，結(jié)果相同

console.log(sum); // 輸出 15

在上述示例中，reduce() 方法對(duì)數(shù)組 array 中的元素進(jìn)行累加求和，初始值設(shè)置為 0。回調(diào)函數(shù)接受兩個(gè)參數(shù)，accumulator 為累加器，currentValue 為當(dāng)前元素的值。每次迭代時(shí)，回調(diào)函數(shù)將當(dāng)前元素的值加到累加器上，并返回新的累加值。最終得到的結(jié)果是數(shù)組元素的總和，即 15。

講一下set

在 JavaScript 中，Set 是一種集合數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)唯一的值，即集合中的每個(gè)元素都是唯一的，不會(huì)重復(fù)。它是 ES6（ECMAScript 2015）引入的一種數(shù)據(jù)結(jié)構(gòu)，提供了一組方法用于管理集合中的元素。

以下是 Set 的基本特點(diǎn)和用法：

• 存儲(chǔ)唯一值：Set 中的元素是唯一的，不會(huì)重復(fù)。如果嘗試向集合中添加重復(fù)的值，將被忽略。
• 任意類型的值：Set 可以存儲(chǔ)任意類型的值，包括原始類型（如數(shù)字、字符串、布爾值）、對(duì)象、函數(shù)等。
• 迭代器：Set 是可迭代的，可以使用 for...of 循環(huán)或 forEach() 方法遍歷集合中的元素。
• 添加和刪除元素：
  • 添加元素：使用 add(value) 方法向集合中添加新元素。
  • 刪除元素：使用 delete(value) 方法從集合中刪除指定的元素。
  • 清空集合：使用 clear() 方法清空集合中的所有元素。
• 判斷元素是否存在：
  • 使用 has(value) 方法可以檢查集合中是否存在指定的元素。返回值為布爾類型。

下面是一個(gè)使用 Set 的示例：

var set = new Set();

set.add(1);      // 添加元素
set.add(2);
set.add(3);
set.add(2);      // 重復(fù)的元素將被忽略

console.log(set.size);  // 輸出：3

set.delete(2);   // 刪除元素

console.log(set.size);  // 輸出：2
console.log(set.has(3)); // 輸出：true

set.forEach(function(value) {
  console.log(value);  // 依次輸出：1, 3
});

需要注意的是，Set 中的值是根據(jù)嚴(yán)格相等性（===）來進(jìn)行比較的，因此對(duì)于對(duì)象等引用類型的值，判斷是否相等需要引用相同的對(duì)象。

總結(jié)：Set 是一種集合數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)唯一的值。它提供了添加、刪除和判斷元素是否存在的方法，以及迭代集合中的元素。Set 在需要存儲(chǔ)唯一值且不關(guān)心順序的情況下非常有用，可以幫助我們處理集合數(shù)據(jù)。

js中set會(huì)把元素按大小進(jìn)行排序嗎

在 JavaScript 的 Set 中，元素的順序是根據(jù)插入順序確定的，而不是按照大小進(jìn)行排序。當(dāng)你向 Set 添加元素時(shí)，它們將按照添加的順序排列。

Set 的迭代順序與元素的插入順序相同。這意味著當(dāng)你使用 for...of 循環(huán)或 forEach() 方法迭代 Set 時(shí)，元素的順序?qū)⑴c添加它們的順序保持一致。

以下是一個(gè)示例：

var set = new Set();

set.add(3);
set.add(1);
set.add(2);

set.forEach(function(value) {
  console.log(value);
});

輸出的順序?qū)⑹?nbsp;3, 1, 2，與添加元素的順序一致。

如果你需要按照某種特定順序?qū)υ剡M(jìn)行排序，你可以將 Set 轉(zhuǎn)換為數(shù)組，然后使用數(shù)組的排序方法對(duì)元素進(jìn)行排序。例如：

var set = new Set();

set.add(3);
set.add(1);
set.add(2);

var sortedArray = Array.from(set).sort();

console.log(sortedArray);  // 輸出: [1, 2, 3]

在上述示例中，首先使用 Array.from() 方法將 Set 轉(zhuǎn)換為數(shù)組，然后使用數(shù)組的 sort() 方法對(duì)元素進(jìn)行排序。這樣，你可以獲得一個(gè)按照元素大小排序的數(shù)組。

總結(jié)：Set 不會(huì)根據(jù)元素的大小進(jìn)行排序，而是根據(jù)插入順序進(jìn)行排列。如果你需要對(duì)元素進(jìn)行排序，可以將 Set 轉(zhuǎn)換為數(shù)組，然后使用數(shù)組的排序方法。

#include <iostream>
#include <set>
using namespace std;

int main(){
	set<int> s;
	s.insert(3);
	s.insert(1);
	s.insert(2);
	for(set<int>::iterator i=s.begin();i!=s.end();i++){
		cout<<*i<<" "; // 結(jié)果：1 2 3
	}
	// 小結(jié)：c++的set容器會(huì)對(duì)插入的元素值的大小進(jìn)行排序
	// 而JS則是按照插入的順序進(jìn)行排序 
	return 0;
} 

以上就是一文講清JS中for循環(huán)的所有用法的詳細(xì)內(nèi)容，更多關(guān)于JS中for循環(huán)用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論