ECMAScript는 배열에 대한 5가지 반복 방법을 정의합니다. 각 메소드는 두 개의 매개변수, 즉 각 항목을 인수로 실행하는 함수와 함수가 실행되는 컨텍스트인 선택적 범위 객체(함수에서 this의 값에 영향을 미침)를 받습니다. 각 메소드에 전달된 함수는 배열 요소, 요소 인덱스 및 배열 자체라는 세 가지 매개변수를 받습니다. 특정 메서드에 따라 이 함수의 결과는 메서드의 반환 값에 영향을 미칠 수도 있고 그렇지 않을 수도 있습니다. 배열의 5가지 반복 방법은 다음과 같습니다.
1. Map 방식: 배열의 각 항목에 대해 전달된 함수를 실행하고, 각 함수 호출의 결과로 구성된 배열을 반환합니다.
이는 배열의 각 요소에 대해 특별한 처리를 수행한 후 새로운 배열을 반환한다는 의미로도 이해될 수 있습니다. .
예:
가격 배열을 단순화하기 전에 다음과 같이
가격=[50,80,90]을 지정합니다.
가격=가격.map((항목,색인)=>{
반품상품+"위안"
})
console.log(price) 의 약어 이후
:가격=[50,80,120] //단가 뒤에 "위안"을 추가합니다. 가격=price.map(item=>item+"위안") console.log(price)//출력은 ['50위안', '80위안', '90위안']
적용 시나리오는 다음과 같습니다. WeChat 애플릿 Douban Film Review는
맵 방법을 사용하여 xxx를 www 교체
( ) 메서드 일부 문자를 문자열의 다른 문자로 바꾸거나 정규식과 일치하는 하위 문자열을 바꾸는 데 사용됩니다.
let movie=[{id:1,name:"쇼생크 탈출",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"쇼생크 탈출",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"쇼생크 탈출",imgUrl:"http://xxx.douban.com/1.jpg"}]
영화=movies.map(항목=>{
item.imgUrl=item.imgUrl.replace("xxx","www")
반품 상품
})
console.log(movies) 2. 필터 메소드: 배열의 각 항목에 대해 전달된 함수를 실행합니다. 함수가 true를 반환하는 항목은 배열을 형성하고 반환됩니다.
다음과 같이 이해될 수도 있습니다: 요구 사항을 충족하는 배열의 요소를 필터링하고 새 배열을 반환합니다.
let Score=[80,59,10,55,90,88]
arr=scores.filter(item=>{
if(항목>60){
true를 반환
}
})
console.log(arr)//출력은 아래와 같습니다. 출력은 아래와 같으며 60개 미만의 배열을 필터링합니다.
약어 뒤:
Score=[80,59,10,55,90,88] arr=scores.filter(item=>item>=60) 하자 console.log(arr)//(3) [80, 90, 88]
해당 응용 프로그램 시나리오에서는 도시 이름 배열을 배치한 다음 키워드를 검색할 수 있습니다. 이는 데이터가 작은 경우에만 게시합니다. 나중에 예제에 대한 책을 관리 시스템의 응용 시나리오에 참조용 키워드 검색이 포함됩니다.
Some은 영어로 some으로 번역되고, Every는 all, Each로 번역되므로, some 메소드는 그 중 하나가 true인 한 true를 반환합니다.
메서드는 모두 true를 반환해야 합니다. false가하나
라도 반환됩니다.
배열 판단 과정에서 전체의 각 요소가 기본 요구 사항을 충족하는지 여부가 판단됩니다.
true, 둘 중 하나가 일치하면 true를 반환합니다.
모든 방법: 하나의 false는 false입니다. 그 중 하나가 요구 사항을 충족하지 않는 한 false를 반환합니다.
//반에 있는 모든 학생의 점수를 확인하여 모두가 합격했는지 확인합니다. let Score=[80,49,12 ,50,69 ]
결과=scores.every(item=>item>=60) 하자
console.log(result)//Return false 사용 시나리오: 프런트 엔드 유효성 검사기가 AJAX 요청을 제출하기 전에 일반적으로 모든 확인을 통과해야 전송됩니다. 코드 예제에 대한 기사입니다.
5. 축소 방법: ECMAScript는 배열에 대해 두 가지 병합 방법인 Reduce() 및 ReduceRight()를 제공합니다. 두 방법 모두 배열의 모든 항목을 반복하고 이를 기반으로 최종 반환 값을 구성합니다. Reduce() 메서드는 배열의 첫 번째 항목에서 마지막 항목으로 이동합니다. 그리고 ReduceRight()는 마지막 항목에서 첫 번째 항목으로 순회합니다. 간단히 말해서 배열의 요소를 통합하고 새 콘텐츠를 반환하는 것으로 이해될 수도 있습니다.
두 방법 모두 두 가지 매개변수, 즉 각 항목에 대해 실행될 병합 함수와 병합을 시작할 선택적 초기 값을 허용합니다. Reduce() 및 ReduceRight()에 전달된 함수는 이전에 병합된 값, 현재 항목, 현재 항목의 인덱스 및 배열 자체라는 네 가지 매개 변수를 받습니다. 이 함수에서 반환된 모든 값은 동일한 함수에 대한 다음 호출의 첫 번째 인수로 사용됩니다. 선택적 두 번째 매개변수(병합 시작 값)가 이 두 메서드에 전달되지 않으면 첫 번째 반복은 배열의 두 번째 항목에서 시작되므로 병합 함수에 전달된 첫 번째 매개변수는 첫 번째 항목입니다. 두 번째 매개변수는 배열의 두 번째 항목입니다.
먼저 다음 코드를 통해 개념을 이해합니다.
다음 코드에서 4개의 매개변수의 의미:
prev: 이전 작업에서 반환된 결과 항목
: 이 작업의 요소
배열
의 요소 인덱스 값
현재 작업의 배열
let arr =[20,40,50,21]
값=arr.reduce((prev,item,index,array)=>{
console.log("이전"+이전)
console.log("항목"+항목)
console.log("index"+index)
console.log("배열"+배열)
console.log("______")
}) 출력은 다음과 같습니다.
왜 세 번만 반복됩니까? Prev는 기본값을 설정할 수 있습니다. 기본값이 설정되지 않은 경우 첫 번째 요소가 첫 번째 prev가 됩니다.
두 번째 및 세 번째 루프에서 prev가 정의되지 않은 이유는 무엇입니까? 두 번째 루프에서는 처음에는 반환 값이 설정되지 않았기 때문에 첫 번째 루프의 반환 값을 가져와야 하므로 unundefined가 됩니다.
위
내용을 이해했다면 배열 합계를 구현하기 시작합니다.
도착=[20,40,50,21]
값=arr.reduce((prev,item,index,array)=>{
console.log("이전"+이전)
이전+항목 반환
//리턴과 루프를 4번 제공합니다. 처음 출력 prev는 20이고, 두 번째 40+20은 60이고, 세 번째는 110이고 마지막 출력은 131입니다.
})
console.log(values) //131 prev의 기본값은 언제 설정되어야 합니까?
각 배열 요소에 <li> </li>를 추가합니다.
let arr=["Eason Chan","Miriam Yeung","Juji Ku","Hacken Lee"]
//prev에 대한 기본값 설정: 함수 1. 모든 요소가 루프에 참여합니다. 2. 반환 내용 결정 let result=arr.reduce((prev,item)=>{
//console.log(이전)
return prev+"<li>"+항목+"</li>"
},"")//빈 문자열 추가 console.log(result)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li> 또 다른 경우를 생각해 보겠습니다.
감소를 사용하여 배열 중복 제거를 달성하고, 빈 배열을 만들고, 원래 배열을 순서대로 순회하고, 빈 배열에 없는 것을 삽입하고, 삽입되지 않은 것은 더 이상 삽입되지 않습니다.
let arr=["장산"," 리시","리시","왕얼","리시","Mazi","장산"]
결과=arr.reduce((prev,item)=>{
//Includes는 지정된 요소가 있는지 확인하고 t를 반환하고, 그렇지 않으면 f를 반환합니다.
if(!prev.includes(항목)){
prev.push(item) //.push()는 배열에 새 항목을 추가합니다.}
이전으로 돌아가기
},[])//기본 빈 배열 설정 console.log(result)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi'] 또 다른 경우: (리듀스 메소드 You 많은 일을 할 수 있습니다)
문자 발생 횟수를 세십시오. 아래 코드를 참조하십시오
let arr=["a","b","a","c","b","a","c"]
//각 문자 {a:2,w:3}의 발생 횟수를 계산하는 객체를 반환합니다.
결과=arr.reduce((prev,item)=>{
// //객체에 해당 속성이 있는지 확인합니다. if(item in prev){
//해당 속성값 찾기++
prev[item]++ //나중에 객체 속성을 설정하거나 가져오려는 경우 이 속성이 직접적으로 존재하는 경우 대괄호 []++ 형식의 변수로 표시됩니다. 속성 이름은 다음과 같습니다. 의 형태.}else{
이전[항목]=1
}
이전으로 돌아가기
},{})
console.log(결과)//{a: 3, b: 2, c: 2}