> 웹 프론트엔드 > JS 튜토리얼 > js 배열 루프 및 반복에 대한 심층 설명

js 배열 루프 및 반복에 대한 심층 설명

迷茫
풀어 주다: 2017-03-26 17:12:22
원래의
1432명이 탐색했습니다.

1. 첫 번째 방법은 for() 루프

for( varindex = 0; index < array.length; i ++){}
로그인 후 복사

이 방법은 매우 일반적이고 다양한 언어로 존재하므로 여기서는 자세히 설명하지 않겠습니다.

2.es5의 새로운 반복 방법(every, filter, forEach, map, some)

이러한 메소드는 모두 두 개의 매개변수, 1) 각 항목에 대해 실행될 수 있는 함수(전달된 함수는 세 개의 매개변수를 받습니다: a. 배열 항목의 값 b. 항목의 위치) c. 배열 자체) 2) (선택 사항) 함수가 실행되는 범위는 이 값에 영향을 미칩니다.

구문: forEach를 예로 들면 나머지는

array.forEach(callback [, thisArg])
로그인 후 복사
rrree

1) Every() 메서드와 유사합니다.

배열의 모든 요소가 지정된 함수가 있는 경우 항목이 false를 반환하면 false를 반환합니다.

모든 메서드는 요소의 각 요소에 대해 한 번씩 콜백 함수를 실행합니다(에는 특정 메서드에 의해 삭제되거나 정의되지 않은 항목은 포함되지 않습니다). , 값이 정의되지 않음으로 정의된 항목은 제외) 콜백이 false(false로 변환될 수 있는 값)를 반환하도록 하는 값을 찾을 때까지 반복에서 벗어나 false를 반환합니다. 그렇지 않으면 true를 반환합니다(모든 요소에 대해 true).

Every 메소드가 순회하는 요소는 첫 번째 콜백의 값이며, 이후에 추가된 값은 액세스되지 않습니다.

nums = [3, 2, 3, 4
로그인 후 복사
rrree

2) 필터() 메서드:

지정된 함수를 사용하여 모든 요소를 ​​테스트하고, 테스트를 통과한 모든 요소가 포함된 새 배열을 생성 및 반환합니다.

필터는 다음과 같습니다. 배열의 각 요소에 대해 한 번씩 콜백을 호출하고(에는 특정 메서드를 통해 삭제되거나 정의되지 않은 항목이 포함되지 않습니다. 단, 값이 정의되지 않은 으로 정의된 항목은 제외) 모든 콜백을 사용하여 true 또는 true와 동등한 요소를 반환합니다. 새 배열을 만듭니다. 콜백 테스트에 실패한 요소는 건너뛰고 새 배열에 포함되지 않습니다.

function isBigEnough(elemen) {  
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
로그인 후 복사

3) forEach() 메소드:

forEach는 배열의 알려진 각 항목에 대해 오름차순으로 콜백 함수 를 실행합니다(특정 메소드를 통한 삭제 또는 정의되지 않은 항목 제외). 값은 정의되지 않음)

forEach가 통과하는 범위는 콜백이 처음 호출되기 전에 결정됩니다. forEach를 호출한 후 배열에 추가된 항목은 콜백에서 액세스되지 않습니다. 기존 값이 변경되면 콜백에 전달되는 값은 forEach가 이를 순회하는 순간의 값입니다. 삭제된 항목은 순회되지 않습니다. 반복 중에 방문한 요소가 삭제되면(예: shift() 사용) 후속 요소를 건너뜁니다. 항상 정의되지 않은 값을 반환하며 체인에서 호출할 수 없습니다.

예외를 발생시키는 것 외에는 forEach 루프를 중단하거나 중단할 수 있는 방법이 없습니다. 이것이 필요한 경우 forEach() 메서드를 사용하는 것이 잘못되었습니다. 대신 간단한 루프를 사용할 수 있습니다

var a = [1, 2, 3,, 4].every (function(value){
console.log(value)   return value       
})//1,2,3,4console.log(a)
//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)   return value       
})
//1,2,3,undefind
console.log(a)
//false
로그인 후 복사

 반복하는 동안 배열이 수정되면 다른 요소가 건너뛰게 됩니다.

다음 예에서는 "one", "two", "four"를 출력합니다. 값 "2"를 포함하는 항목에 도달하면 전체 배열의 첫 번째 항목이 제거되어 나머지 모든 항목이 한 위치 위로 이동됩니다. 이제 요소 "4"가 배열의 앞에 있으므로 "3"은 건너뜁니다. forEach()반복하기 전에 배열의 복사본을 생성하지 않습니다.


var a = [1, 2, 3, 7,4].filter(function(value){   
    return value > 4      
})
console.log(a)
//[7]
로그인 후 복사

4) map() 메서드:

배열의 각 항목에 대해(에는 특정 메서드로 삭제된 항목이나 정의되지 않은 항목은 포함되지 않습니다. 값이 정의되지 않은 항목 제외 ) 지정된 함수를 실행하고 새 배열을 반환하며 각 요소는 콜백 함수의 결과입니다

map 메소드를 사용하여 처리할 때 배열, 배열 요소의 범위는 콜백 메서드가 처음 호출되기 전에 결정됩니다. map 메소드 실행 중: 원래 배열에 새로 추가된 요소는 콜백에 의해 액세스되지 않습니다. 기존 요소가 변경되거나 삭제되면 콜백에 전달된 해당 값은 에 의해 전달된 값입니다. 삭제된 요소에 대한 순간의 값은 액세스되지 않습니다.

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了,因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
로그인 후 복사

5) some() 메서드:

배열의 특정 요소가 지정된 함수의 테스트를 통과하는지 테스트합니다. 한 항목이 true를 반환하면 true를 반환합니다.

일부는 배열입니다. 의 각 요소는 콜백이 "참 값"(즉, 부울 참 값으로 변환될 수 있는 값)을 반환하도록 하는 요소를 찾을 때까지 콜백 함수를 한 번 실행하고 반복을 중지하고 true를 반환합니다. ; 그렇지 않으면(모든 요소가 false임) false를 반환합니다.

아아아아

위 내용은 js 배열 루프 및 반복에 대한 심층 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿