> 웹 프론트엔드 > 프런트엔드 Q&A > js 맵 방법은 es6을 기반으로 합니까?

js 맵 방법은 es6을 기반으로 합니까?

青灯夜游
풀어 주다: 2023-01-04 09:13:11
원래의
2110명이 탐색했습니다.

map() 메소드는 es6입니다. es6에서 map() 메서드는 배열의 각 요소에 대해 지정된 콜백 함수를 호출하고 결과가 포함된 배열을 반환할 수 있습니다. 구문은 "array.map(function callbackfn (value, index, array), thisArg);"입니다. . map() 메서드는 새 배열을 반환합니다. 여기서 각 요소는 연결된 원래 배열 요소의 콜백 함수 반환 값입니다.

js 맵 방법은 es6을 기반으로 합니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

JavaScript의 map() 메서드에 대한 자세한 설명(모두 es6 구문 사용)

JavaScript map() 메서드는 배열의 각 요소에 대해 지정된 콜백 함수를 호출하고 결과가 포함된 배열을 반환할 수 있습니다.

array.map(function callbackfn (value, index, array), thisArg);
로그인 후 복사

function callbackfn (value, index, array): 최대 3개의 매개변수를 허용하는 콜백 함수:

  • value: 배열 요소의 값.

  • index: 배열 요소의 숫자 인덱스입니다.

  • array: 요소를 포함하는 배열 객체입니다.

map()의 반환 값은 새로운 배열이고, 새로운 배열의 요소는 "원래 배열 호출 함수에 의해 처리된 값"입니다. 배열의 각 요소에 대해 map() 메서드는 callbackfn 함수를 한 번(인덱스 오름차순으로) 호출하고 배열에서 누락된 요소에 대해서는 콜백 함수를 호출하지 않습니다.

간단한 사용: 전체 배열을 탐색하고 4보다 큰 요소에 2

const array = [2, 3, 4, 4, 5, 6]

console.log("array",array)
const map = array.map(x => {
    if (x == 4) {
        return x * 2
    }
    return x
})

console.log("map",map)
로그인 후 복사

를 곱합니다. 출력 결과는 다음과 같습니다. 4와 같은 요소에 2

js 맵 방법은 es6을 기반으로 합니까?

3. ) 함수 자세한 설명

일반 매개변수는 콜백 함수입니다.

array.map((item,index,arr)=>{
	//item是操作的当前元素
	//index是操作元素的下表
	//arr是需要被操作的元素
	//具体需要哪些参数 就传入那个
})
로그인 후 복사
 const array = [2, 3, 4, 4, 5, 6]
 console.log("原数组array为",array)
 const map2=array.map((item,index,arr)=>{
            console.log("操作的当前元素",item)
            console.log("当前元素下标",index)
            console.log("被操作的元素",arr)
            //对元素乘以2
            return item*2
 })
 console.log("处理之后先产生的数组map",map2)
로그인 후 복사

출력 결과는 다음과 같습니다.

js 맵 방법은 es6을 기반으로 합니까?

요약: map() 메서드는 배열을 순회하는 데 자주 사용되지만 원래 배열을 변경하지 않지만 새 배열을 반환합니다

참고: 때때로 이 현상이 발생하며 정의되지 않은 여러

 const array = [2, 3, 4, 4, 5, 6]
 console.log("原数组array为",array)
 const map = array.map(x => {
            if (x == 4) {
                return x * 2
            }
  })
로그인 후 복사

js 맵 방법은 es6을 기반으로 합니까?

실제로 map() 메서드는 배열의 각 항목을 순회하며 한 번 순회합니다. , 값을 반환합니다. 새 배열에 요소를 추가합니다. 이는 x=4를 충족하는 요소이므로 다른 항목은 정의되지 않은 상태를 반환합니다.

【추천 학습: javascript 비디오 튜토리얼

위 내용은 js 맵 방법은 es6을 기반으로 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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