자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요.

개발 언어를 배울 때 for 루프는 필수 구문이며 아마도 모든 개발자가 이를 사용할 것입니다. 모든 개발 언어에는 루프 구문의 버전이 하나 이상 포함되어 있을 정도로 매우 고전적입니다. 그러나 JavaScript에는 세 가지 다른 루프 구문이 포함되어 있습니다(자세히 살펴보면 4개로 계산될 수 있음).

사용 방법은 정확히 동일하지 않습니다. 예:

l 클래식 For 루프 구문

l For….of 및 For…in

l 좀 더 화려한 버전: .forEach

Next, I I 이 세 가지 구문을 사용할 때의 유사점과 차이점, 그리고 최상의 결과를 얻기 위해 이를 사용하는 시기와 방법을 소개하고 싶습니다. 좋아요, 시작해 보겠습니다.

Classic For Loop

for 루프에서는 내부 카운터를 정의하고 해당 인터럽트 조건과 유연한 스테핑 전략(일반적으로 증가 또는 감소)을 설정할 수 있습니다.

구문은 다음과 같습니다.

for([计数器定义];[中断条件];[步进策略]){
   //... 
    TODO
}

제 소개가 없더라도 이전에 다음과 같은 유사한 문장을 작성했을 것입니다.

for(let counter = 0; counter <p>Chrome에서 실행해 보겠습니다. 결과도 기대와 일치하지만 for는 다음과 같습니다. 루프 그게 다야? <br></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/758/933/751/1606383516520600.png" class="lazy" title="1606383516520600.png" alt="자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요."></p><p>for 루프를 세 개의 표현식으로 생각할 수 있습니다</p><pre class="brush:php;toolbar:false">for(
[在循环开始时只执行一次的表达式];
[其中每一个逻辑判断都需吻合的表达式];
[循环每一步都被执行的表达式]
)

이 표현식의 의미는 여러 카운터를 사용하여 for 루프를 실행하거나 카운터에 영향을 주지 않고 단계 표현식에서 실행할 수 있다는 것입니다. 코드 예를 들어

for(let a = 0, b = 0; a <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/347/470/968/1606383547622810.png" class="lazy" title="160638352246070자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요." alt="자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요."></p><p>한 단계 더 나아가 실제 애플리케이션 시나리오와 더욱 일관성을 유지할 수 있습니다. </p><pre class="brush:php;toolbar:false">for(let a = 0, b = 0; a <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/347/470/968/1606383547622810.png" class="lazy" title="160638352761244자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요." alt="자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요."></p><p>또한 중간 표현식을 다음으로 바꿀 수도 있습니다. 함수의 반환 값은 부울이거나 부울 값으로 변환될 수 있는 값이어야 한다는 점을 기억하는 한 함수 호출(예: </p><pre class="brush:php;toolbar:false">function isItDone(a) {
 console.log("函数被调用！")
 return a <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/347/470/968/1606383547622810.png" class="lazy" title="160638353227285자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요." alt="자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요."></p><p>) 따라서 비동기 코드를 처리하는 방법은 다음과 같습니다. 클래식 for 루프 모직 천? 비동기 함정에 빠지지 않도록 하려면 어떻게 해야 할까요? </p><p>새 친구를 소개합니다: async /await는 다음과 같은 비동기 코드를 처리할 때 더 쉽고 더 제어하기 쉽게 만들어줍니다: </p><pre class="brush:php;toolbar:false">const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

(async () => {
    let files = ['file1.json', 'file2.json']

    for(let i = 0; i <h2 id="For-in-및-For-of">For... in 및 For... of</h2><p>그들은 매우 유사해 보이지만 동일한 유형의 루프는 아닙니다. </p><p>가능한 한 간략하게 설명하겠습니다. </p><p>For…in은 객체의 열거 가능한 속성을 통해 루프를 돌립니다. 즉, 사용자 정의 객체가 해시 테이블이나 사전으로 사용되는 경우 For…in을 사용하여 반복합니다. 매우 단순해질 것입니다. </p><p>단, 순회 순서는 요소 순서대로 실행되므로 루프 순서에 의존하지 마세요. </p><pre class="brush:php;toolbar:false">let myMap {
  uno: 1,
  dos: 2,
  tres: 3
}
for(let key in myMap) {
  console.log(key, "=", myMap[key]);
}

매우 간단해 보이지만 For...in은 엔터티 개체만 순회할 수 있다는 점을 기억하세요. 문자열 순회와 같이 엔터티가 아닌 개체를 용이하게 하면 다음과 같은 일이 발생합니다.

for(let k in "Hello World!") {
   console.log(k)
}

From 결과에서 볼 수 있듯이 모든 문자가 순회되는 것은 아니지만 모든 속성이 순회되는 것을 볼 수 있듯이 순회된 숫자는 쓸모가 없습니다. 왜냐하면 "Hello World!"[1]도 해당 문자를 반환할 수 있기 때문입니다.

반대로 각 문자를 반복하려면 다른 변형을 사용해야 합니다. For…of

for(let char of "Hello World!") {
  console.log(char)
}

이 구문을 사용하기 때문에 동일한 사용 사례인 문자열 유형에 대해 이 반복 방법이 더 효율적으로 보입니다. , 요소에 해당 값을 반환할 수 있습니다. 따라서 우리는 위의 사용 사례를 통해 For...of가 통과한 콘텐츠가 객체의 값이라는 것을 알 수 있습니다.

위의 예에서 그 중 하나는 속성을 탐색하고 다른 하나는 값을 탐색하는 것을 볼 수 있습니다. 그러면 항목 방법을 사용하여 얻을 수 있는 방법이 있습니까? 속성과 값을 동시에 처리합니다.

let myArr = ["hello", "world"]
for([idx, value] of myArr.entries()) {
    console.log(idx, '=', value)
}

마지막으로 비동기 코드를 처리할 때는 어떤 모습일까요? 대답은 물론 for 루프와 동일합니다.

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}



(async () => {
    let files = ['file2.json', 'file2.json']

    for(fname of files) {
        let fcontent = await read(fname)
        console.log(fcontent)
        console.log("-------")
    }

    for(idx in files) {
        let fcontent = await read(files[idx])
        console.log(fcontent)
        console.log("-------")
    }
})()

마지막으로 For…in과 For…of

For…in - 트래버스 속성

For…of - 트래버스 값

.forEach 루프

이것은 가능합니다: 내가 가장 좋아하는 것은 선언적 구문이나 명령형을 통해 코드를 작성하는 선언적 방식을 정말 좋아하기 때문입니다.

또한 위의 루프 구문도 매우 유용하고 둘 다 좋은 사용 사례가 있지만 forEach는 데이터 자체에 집중해야 할 때 매우 유용합니다.

不管怎样，先撇开哲学上的争论不谈，.foreach方法是for循环的另一个版本，但是这个方法是数组对象的一部分，它的目的是接收一个函数和一个额外的可选参数，以便在执行函数时重新定义该函数的上下文。

对于数组中的每个元素，我们的函数都将被执行，并且它将收到三个参数（是的，就是三个，而不是一个，因为您已经习惯了使用它）。它们分别是：

• 正在处理的当前元素。

• 元素的索引，这已经简化了我们试图用for…of循环实现的任务

• 正在处理的实际数组。以防万一你需要做点什么。

那么，让我们看一个简单的示例：

a = ["hello", "world"]

a.forEach ( (elem, idx, arr) => {
   console.log(elem, "at: ", idx, "inside: ", arr)
})

更快更简单，不是吗？

但是你可以看到我们如何在函数中很容易地使用所有属性。下面是一个您希望在foreach方法上使用第二个可选参数的示例：

class Person {
    constructor(name)  {
        this.name = name
    }
}

function greet(person) {
    console.log(this.greeting.replace("$", person.name))
}

let english = {
    greeting: "Hello there, $"
}
let spanish = {
    greeting: "Hola $, ¿cómo estás?"
}

let people = [new Person("Fernando"), new Person("Federico"), new Person("Felipe")]


people.forEach( greet, english)
people.forEach( greet, spanish)

通过重写被调用函数greet的上下文，我可以在不影响其代码的情况下更改其行为。

最后，显示此方法也可以与异步代码一起使用，下面是示例：

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

let files = ['file1.json', 'file2.json']

files.forEach( async fname => {
    let fcontent = await read(fname)
    console.log(fcontent)
    console.log("-------")
})

结论

这就是我想要分享的关于JavaScript中关于循环的全部内容，我希望现在您对它们有了更清晰的理解，并且可以根据这些知识和我们当前的实际需求来选择您喜欢的循环。

原文地址：https://blog.bitsrc.io/3-flavors-of-the-for-loop-in-javascript-and-when-to-use-them-f0fb5501bdf3

更多编程相关知识，请访问：编程学习网站！！

위 내용은 자바스크립트의 3가지 for 루프 스타일과 이를 언제 사용해야 하는지 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!