JS의 for...of 루프에 대해 자세히 알아보세요.

이 글은 JavaScript의 for...of 루프에 대한 심층적인 이해를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

for...of 문으로 생성된 루프는 객체를 순회할 수 있습니다. ES6에 도입된 for...of는 다른 두 개의 루프 문 for...in과 forEach()를 대체할 수 있으며, 이 새로운 루프 문은 새로운 반복 프로토콜을 지원합니다. for...of를 사용하면 배열, 문자열, 맵, 세트 등과 같은 반복 가능한 데이터 구조를 반복할 수 있습니다.

Syntax

for (variable of iterable) {
    statement
}

• variable: 각 반복의 속성 값은 변수

• iterable: 열거 가능한 속성을 갖고

에 대해 반복될 수 있는 객체입니다. 몇 가지 예를 사용하여 설명해 보겠습니다.

Arrays

배열은 객체처럼 보이는 간단한 목록입니다. 배열 프로토타입에는 순회와 같은 작업을 수행할 수 있는 다양한 메서드가 있습니다. 다음 예제에서는 for...of를 사용하여 배열을 탐색합니다.

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
    console.log(value);
}

// Output:
// => mini
// => mani
// => mo

결과는 iterable 배열의 각 값을 인쇄하는 것입니다. iterable数组中的每一个值。

Map

Map对象持有key-value对。对象和原始值可以当作一个key或value。Map对象根据插入的方式遍历元素。换句话说，for...of在每次迭代中返回一个kay-value对的数组。

const iterable = new Map([['one', 1], ['two', 2]]);

for (const [key, value] of iterable) {
    console.log(`Key: ${key} and Value: ${value}`);
}

// Output:
// => Key: one and Value: 1
// => Key: two and Value: 2

Set

Set对象允许你存储任何类型的唯一值，这些值可以是原始值或对象。Set对象只是值的集合。Set元素的迭代是基于插入顺序，每个值只能发生一次。如果你创建一个具有相同元素不止一次的Set，那么它仍然被认为是单个元素。

const iterable = new Set([1, 1, 2, 2, 1]);

for (const value of iterable) {
    console.log(value);
}

// Output:
// => 1
// => 2

尽管我们创建的Set有多个1和2，但遍历输出的只有1和2。

String

字符串用于以文本形式存储数据。

const iterable = 'javascript';

for (const value of iterable) {
    console.log(value);
}

// Output:
// => "j"
// => "a"
// => "v"
// => "a"
// => "s"
// => "c"
// => "r"
// => "i"
// => "p"
// => "t"

在这里，对字符串执行迭代，并打印出每个索引上(index)的字符。

Arguments Object

把一个参数对象看作是一个类似数组的对象，与传递给函数的参数相对应。这是一个用例：

function args() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

args('a', 'b', 'c');

// Output:
// => a
// => b
// => c

你可能在想，到底发生了什么？正如我前面说过的，当调用函数时，参数会接收传入args()函数的任何参数。因此，如果我们将20个参数传递给args()函数，我们将输出20个参数。

在上面的示例基础上做一些调整，比如给args()函数，传入一个对象、数组和函数：

function fn(){
return 'functions';
}

args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());

// Output:
// => "a"
// => "w3cplus"
// => "c"
// => Object {
// =>     "name": "airen"
// => }
// => Array [
// =>    "a",
// =>    1,
// =>    3
// => ]
// => "functions"

Generators

生成器是一个函数，它可以退出函数，稍后重新进入函数。

function* generator(){ 
    yield 1; 
    yield 2; 
    yield 3; 
};

for (const g of generator()) { 
    console.log(g); 
}

// Output:
// => 1
// => 2
// => 3

function* 定义一个生成器函数，该函数返回生成器对象。更多关于生成器相关的信息，可以点击这里。

关闭迭代器

JavaScript中提供了四种已知的终止循环的方法：break、continue、return和throw。来看一个示例：

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
console.log(value);
break;
}

// Output:
// => mini

在这个例子中，我们使用break关键词来终止一个循环，并且只打印出一个mini。

普通对象不可迭代

for...of循环只能和迭代一起工作。但普通对象是不可迭代的。让我们看看：

const obj = { fname: 'foo', lname: 'bar' };

for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

在这里，我们定义了一个普通对象obj，当我们尝试for...of给obj进行操作时，会报错：TypeError: obj[Symbol.iterator] is not a function。

我们可以把一个类似数组的对象转找成一个数组。对象将具有length属性，它的元素可以被索引。来看一个示例：

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
const array = Array.from(obj);
for (const value of array) { 
    console.log(value);
}
// Output:
// => foo
// => bar
// => baz

Array.from()方法从类似数组（Array-lik）或迭代对象中创建了一个新的数组实例。

<span style="font-size: 20px;">for...of</span> vs. for...in

for...in在循环中将遍历对象中所有可枚举属性。

Array.prototype.newArr = () => {};
Array.prototype.anotherNewArr = () => {};
const array = ['foo', 'bar', 'baz'];
for (const value in array) { 
    console.log(value);
}
// Outcome:
// => 0
// => 1
// => 2
// => newArr
// => anotherNewArr

for...in不仅可以枚举数组里声明的值，它还可以从构造函数的原型中寻找继承的非枚举属性，比如上例中的newArr和anotherNewArr

🎜Map🎜
🎜🎜Map 객체는 키-값 쌍을 보유합니다. 객체와 기본 값은 키 또는 값으로 처리될 수 있습니다. Map 객체는 삽입 방법에 따라 요소를 순회합니다. 즉, for...of는 각 반복에서 kay-값 쌍의 배열을 반환합니다. 🎜

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

🎜🎜Set🎜🎜🎜Set 개체를 사용하면 기본 값이나 개체일 수 있는 모든 유형의 고유한 값을 저장할 수 있습니다. Set 개체는 단순히 값의 모음입니다. Set 요소의 반복은 삽입 순서를 기반으로 하며 각 값에 대해 한 번만 발생할 수 있습니다. 동일한 요소로 세트를 두 번 이상 생성하는 경우에도 여전히 단일 요소로 간주됩니다. 🎜rrreee🎜우리가 만든 Set에는 1과 2가 여러 개 있지만 순회 출력은 1과 2. 🎜🎜🎜String🎜🎜🎜String은 데이터를 텍스트 형식으로 저장하는 데 사용됩니다. 🎜rrreee🎜여기서 문자열을 반복하고 각 인덱스(index)의 문자를 인쇄합니다. 🎜🎜🎜인수 개체🎜🎜🎜인수 개체를 함수에 전달된 인수에 해당하는 배열과 같은 개체로 생각하세요. 사용 사례는 다음과 같습니다. 🎜rrreee🎜대체 무슨 일이 일어나고 있는 걸까요? 앞서 말했듯이 함수가 호출되면 인수는 args() 함수에 전달된 모든 인수를 받습니다. 따라서 20 인수를 args() 함수에 전달하면 20 인수가 출력됩니다. 🎜🎜위의 예를 기반으로 개체, 배열 및 함수를 args() 함수에 전달하는 등 몇 가지 조정을 수행합니다. 🎜rrreee🎜🎜Generators🎜🎜🎜A 생성기는 함수입니다. 기능을 종료하고 나중에 다시 시작할 수 있습니다. 🎜rrreee🎜function*은 생성기 객체를 반환하는 생성기 함수를 정의합니다. 생성기에 대한 자세한 내용을 보려면 여기를 클릭하세요. 🎜🎜🎜반복자 닫기🎜🎜🎜JavaScript는 루프를 종료하는 네 가지 알려진 메서드( break, continue, return))를 제공합니다. 그리고 던지기. 예를 살펴보겠습니다. 🎜rrreee🎜이 예에서는 break 키워드를 사용하여 루프를 종료하고 mini만 인쇄합니다. 🎜🎜🎜일반 객체는 반복 가능하지 않습니다🎜🎜🎜for...of루프는 반복에서만 작동할 수 있습니다. 그러나 일반 객체는 반복 가능하지 않습니다. 🎜rrreee🎜여기서 for...of를 obj로 시도할 때 일반 객체 obj를 정의합니다. 오류가 보고됩니다: TypeError: obj[Symbol.iterator]는 함수가 아닙니다. 🎜🎜배열과 유사한 객체를 배열로 변환할 수 있습니다. 객체에는 length 속성이 있으며 해당 요소는 색인화될 수 있습니다. 예를 살펴보겠습니다. 🎜rrreee🎜 Array.from() 메서드는 유사 배열(Array-lik) 또는 반복 가능한 객체에서 새 배열 인스턴스를 생성합니다. 🎜🎜🎜for...of🎜🎜 대 for...in🎜🎜🎜for...in루프에서는 개체의 열거 가능한 모든 속성이 순회됩니다. 🎜rrreee🎜<code>for...in은 배열에 선언된 값을 열거할 수 있을 뿐만 아니라 와 같이 생성자의 프로토타입에서 상속된 비열거 속성을 찾을 수도 있습니다. 위의 예제 newArr 및 anotherNewArr를 인쇄해 보세요. 🎜

for...of可以对数组和对象等做更具体的操作，但并不表示包括所有对象。

注意：任何具有Symbol.iterator属性的元素都是可迭代的。

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

总结

理解for...of循环在开发过程中的用法，可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐！

相关免费学习推荐：js视频教程

위 내용은 JS의 for...of 루프에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!