103

for () 루프와 .forEach가있는 Javascript의 2017 년 현재 표준은 무엇입니까?

나는 현재 Udemy에 콜트 제철 "웹 데브 부트 캠프"를 통해 내 방식대로하고 있어요 그는 호의 forEach를 통해 for그의 가르침에. 나는, 그러나, 물론 작업의 일환으로 운동을하는 동안 여러 가지 검색하고 난 점점 더 많은 권고 용도 찾을 for보다는 -loop을 forEach. 대부분의 사람들은 for 루프가 더 효율적이라고 말하는 것 같습니다.

이 과정이 작성된 이후 (2015 년 경) 변경된 것입니까, 아니면 각각에 대한 장단점이며 더 많은 경험을 통해 배울 것입니다.

어떤 조언이라도 대단히 감사하겠습니다.

— 토니 로빈스
소스

2017 년 표준에 대한 누군가의 주관적인 아이디어에 자신을 묶는 이유는 무엇입니까? 엔지니어는 특정 성능 문제가있을 때 성능을 최적화 한 후 매우 효율적 가장 일반적으로 사용되는 구조를 만들기 위해 노력하고 있는지 알고, 청소, 유지 보수 코드를 작성처럼, 시대를 초월한 표준 채택

네이티브 for는 순수한 속도로 이기기가 어렵습니다. forEach()각 반복에 대해 콜백을 호출합니다. 그래서 그것은 분명히 약간의 오버 헤드를 동반합니다.

— canon

내가 거의 사용하지 않거나 거의 사용하지 않는 개발자이기 때문에 대부분의 작업은 맵, 필터링 또는 축소 방법으로 수행됩니다.

— AT

@AT는 map순전히 반복을 위해 사용 하고 생성하는 새 배열을 버리는 사람들 중 하나가 아닌 한 . 이 사이트에서만 특정 기능 선택에 대해 얼마나 많은 사람들을 수정해야했는지 모르겠습니다.

— canon

@canon은 동의했습니다. 루프 선택은 중요하며 선택하는 동안 이러한 방법의 출력과 잔여 물을 염두에 두어야합니다. 가독성을 위해 일반 "for 루프"는 피해야한다고 생각합니다.

— AT

200

...에 대한

for루프가 훨씬 더 효율적입니다. 조건이 true 인 동안 반복하도록 특별히 설계된 반복 구조이며 동시에 스테핑 메커니즘을 제공합니다 (일반적으로 반복자를 증가시키기 위해). 예:

for (var i=0, n=arr.length; i < n; ++i ) {
   ...
}

이것은 for 루프가 항상 더 효율적이라는 것을 암시하는 것은 아닙니다 . 단지 JS 엔진과 브라우저가이를 최적화했기 때문입니다. 수년에 걸쳐 어떤 루핑 구조가 더 효율적인지 (for, while, reduce, reverse-while 등)에 대한 타협이있었습니다. 다른 브라우저와 JS 엔진은 동일한 결과를 생성하는 다른 방법론을 제공하는 자체 구현을 가지고 있습니다. 브라우저가 성능 요구 사항을 충족하기 위해 더욱 최적화됨에 따라 이론적으로 [].forEach더 빠르거나 for.

혜택:

실력 있는
조기 루프 종료 (명예 break및 continue)
조건 제어 ( i<n무엇이든 가능하며 배열의 크기에 바인딩되지 않음)
변수 범위 지정 ( var i잎 i루프 종료 후 가능)

각각

.forEach주로 배열 ( Map및 Set객체 와 같은 다른 열거 가능)을 반복하는 메서드입니다 . 그들은 더 새롭고 주관적으로 읽기 쉬운 코드를 제공합니다. 예:

[].forEach((val, index)=>{
   ...
});

혜택:

변수 설정을 포함하지 않음 (배열의 각 요소에 대해 반복)
functions / arrow-functions는 변수를 블록으로 범위 지정
위의 예 val에서 새로 생성 된 함수의 매개 변수가됩니다. 따라서 val루프 이전에 호출 된 모든 변수는 종료 후 해당 값을 보유합니다.
코드가 수행하는 작업을 식별하는 것이 더 쉬울 수 있으므로 주관적으로 유지 관리가 더 쉽습니다.-열거 형을 반복합니다. for 루프는 여러 루핑 체계에 사용할 수 있습니다.

공연

성능은 까다로운 주제이며 일반적으로 미리 생각하거나 접근 할 때 약간의 경험이 필요합니다. 얼마나 많은 최적화가 필요할 수 있는지 미리 결정하기 위해 (개발하는 동안) 프로그래머는 문제 사례에 대한 과거 경험과 잠재적 솔루션에 대한 좋은 이해를 가지고 있어야합니다.

어떤 경우에는 jQuery를 사용하는 것이 너무 느릴 수 있지만 (숙련 된 개발자는이를 알고있을 수 있음) 다른 경우에는 문제가되지 않을 수 있습니다.이 경우 라이브러리의 브라우저 간 호환성 및 다른 기능 수행 용이성 (예 : AJAX, 이벤트 처리)는 개발 (및 유지 관리) 시간을 절약 할 가치가 있습니다.

또 다른 예는 성능과 최적화가 전부라면 기계 나 어셈블리 외에 다른 코드가 없다는 것입니다. 각각 고유 한 장단점이있는 다양한 고수준 및 저수준 언어가 있기 때문에 분명히 그렇지 않습니다. 이러한 트레이드 오프에는 전문화, 개발 용이성 및 속도, 유지 보수 용이성 및 속도, 최적화 된 코드, 오류없는 코드 등이 포함되며 이에 국한되지 않습니다.

접근하다

최적화 된 코드가 필요한지 잘 이해하지 못한 경우 일반적으로 유지 관리 가능한 코드를 먼저 작성하는 것이 좋습니다. 거기에서 필요할 때 더 많은주의가 필요한 항목을 테스트하고 정확히 찾아 낼 수 있습니다.

즉, 특정 명백한 최적화는 일반적인 관행의 일부 여야하며 생각할 필요가 없습니다. 예를 들어, 다음 루프를 고려하십시오.

for (var i=0; i < arr.length; ++i ){}

루프가 반복 될 때마다 JavaScript는 arr.length각주기의 키 조회 비용 계산 작업 인을 검색합니다. 이렇게해서는 안되는 이유가 없습니다.

for (var i=0, n=arr.length; i < n; ++i){}

이것은 동일한 작업을 수행하지만 arr.length한 번만 검색 하여 변수를 캐싱하고 코드를 최적화합니다.

— Vol7ron
소스

단일 시점, 구현 또는 마이크로 벤치 마크 테스트에 얽매이지 않는 탁월하고 철저하며 주제없는 답변입니다.

완벽합니다. 바로 제가 찾던 것이었고 비디오보다 훨씬 더 깊이를 제공합니다. 나는 이것을 정말로 고맙게 생각합니다. 새로 배우는 것이 너무 많으며 미래에 당신을 방해 할 이유없이 다른 하나를 선호함으로써 건너 뛰기 쉬운 것들입니다. 감사합니다!

— tonyrobbins 2017 년

for-loop는 종종 디버깅 측면에서 이점이 있습니다. 단계적으로 들어가고, 중단 점을 만들고, 검사하는 것이 삼중합니다. forEach ()를 사용하면 추가 콜백 수준이 상황을 약간 복잡하게 만들 수 있습니다.

— Eric Grange

@FelipeBuccioni 감사합니다. 엔진이 이제 길이가 캐시되었는지 확인하기 위해 배열이 변형되는지 확인한다고 생각하므로 실제로 조사하려고했습니다. 하지만 레거시 목적으로 최적화 엔진은 그다지 관대하지 않았고 길이는 각 반복에서 성능 저하를 가져 왔습니다. 나는 당신의 기사를보고 내가 시간이있을 때 그것을 대답에 통합 할 것이다. 그렇지 않으면 커뮤니티의 뛰어난 구성원이 나를 위해 편집으로 수정 해 줄 것이다. :)

— vol7ron

나는이 대답과 문구에있는 설명을 정말로 즐긴다 [...], if performance and optimization was everything, there would be no other code than machine or assembly.. 내가 가진 믿을 let블록 범위 지역 변수를 선언하는 성명의 두 번째 장점은 forEach더 이상보다 이점입니다 for지원하지 않는 환경에서 루프 let.

— user7393973 apr

자바 스크립트 효율성 : 'for'대 'forEach'[닫힌]

...에 대한

혜택:

각각

혜택:

공연

접근하다