배열.map(함수)
맵을 사용 하면 각 배열 요소에 대해 함수의 내용을 적용하여 새로운 배열 요소를 반환 합니다.
변경된 새로운 배열이 만들어 집니다.
기존 배열 요소에는 변경사항이 없습니다.
|
// 각각의 요소 값이 2배인 배열을 만들어 리턴합니다.
// 각각의 요소 값이 제곱인 배열을 만들어 리턴합니다.
|
ex11.html 파일을 다음과 같이 만듭니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>javascript Array</title> <script> const zodiac = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(","); document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`); // Array.map() : 맵을 사용 하면 각 배열 요소에 대해 작업을 수행하여 새 배열 요소를 반환한다. 기존 배열 요소에는 변경사항이 없다. const zodiac2 = zodiac.map((s)=>`★${s}`); document.write(`원본 => 띠(${zodiac.length}개) : ${zodiac}<br>`); document.write(`띠(${zodiac2.length}개) : ${zodiac2}<br><hr>`); let ar = []; for (let i = 0; i < 10; i++) ar.push(i+1); document.write(`${ar.length}개 : ${ar}<br>`); document.write(`${ar.length}개 : ${ar.map(n=>n*2)}<br>`); document.write(`${ar.length}개 : ${ar.map(n=>n*2-1)}<br>`); document.write(`${ar.length}개 : ${ar.map(n=>n*n)}<br>`); // 3개의 value, index 및 array 매개변수가 전달된다. 인덱스와 배열 매개변수는 생략할 수 있고 value매개 변수만으로도 작동한다. let ar2 = ar.map((item, index, array)=>`${array[index]}`.padStart(2,'0') + `의 제곱은 ${item*item} `); document.write(`${ar2.length}개<br/>`); ar2.forEach((n)=>{ document.write(n + "<br/>"); }); </script> </head> <body> </body> </html> | cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 맵(Map) 객체의 set(), get() (0) | 2024.10.23 |
|---|---|
| [JavaScript] 배열 reduce(), reduceRight() (0) | 2024.10.23 |
| [JavaScript] 배열 sort() (0) | 2024.10.23 |
| [JavaScript] 배열 filter(), reverse(), every(), some() (0) | 2024.10.23 |
| [JavaScript] 배열 slice(), splice() (0) | 2024.10.23 |
