728x90
배열 Method[find(), findIndex(), filter(), map(), Array.from()]
배열은 다양한 메서드를 제공합니다. 오늘은 find(), findIndex(), filter(), map(), Array.from()메서드에 대해 알아보겠습니다.
1. find() / findIndex()
find()메서드는 배열 요소를 검색할 때 사용합니다. 조건에 일치하는 요소의 값을 반환하며 없을 경우 undefined를 반환합니다. findIndex()메서드는 배열 요소를 검색할 때 사용하며 인덱스로 반환하며 조건에 일치하는 값이 없을 경우 -1을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
//01. find()
const arrNum = [100, 200, 300, 400, 500];
// const result = arrNum.find(function(element){
// return element === 300;
// });
// const result = arrNum.find((element) => {
// return element === 300;
// });
// const result = arrNum.find(element => {
// return element === 300;
// });
const result = arrNum.find(e => e === 300);
document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.find(e => e === 300)";
document.querySelector(".sample11_P1").innerHTML = result;
const result2 = arrNum.find(e => e === 600);
document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M2").innerHTML = "arrNum.find(e => e === 600)";
document.querySelector(".sample11_P2").innerHTML = result2;
const arrText = ['javascript', 'jquery', 'react'];
const result3 = arrText.find(el => el === "javascript");
document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M3").innerHTML = "arrText.find(el => el === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3;
//02. findIndex()
const result4 = arrText.findIndex(el => el === "javascript");
document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M4").innerHTML = "arrText.findIndex(el => el === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4;
const result5 = arrText.findIndex(el => el === "html");
document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M5").innerHTML = "arrText.findIndex(el => el === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;
2. filter()
filter()메서드는 조건에 만족하는 배열 요소 검색할 때 사용하며 배열로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el => el === 300);
document.querySelector(".sample12_N1").innerHTML = "1";
document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M1").innerHTML = "filter(el => el === 300)";
document.querySelector(".sample12_P1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.filter(el => el === 600);
document.querySelector(".sample12_N2").innerHTML = "2";
document.querySelector(".sample12_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M2").innerHTML = "filter(el => el === 600)";
document.querySelector(".sample12_P2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter(el => el >= 300); //조건 걸기
document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M3").innerHTML = "filter(el => el >= 300)";
document.querySelector(".sample12_P3").innerHTML = result3;
3. map()
map()메서드는 배열 요소를 추출하여 새로운 배열로 만듭니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map(el => el);
document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M1").innerHTML = "arrNum.map(el => el)";
document.querySelector(".sample13_P1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map(el => el + "J");
document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M2").innerHTML = "arrNum2.map(el => el + 'J')";
document.querySelector(".sample13_P2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map(el => el + 100);
document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M3").innerHTML = "arrNum3.map(el => el + 100)";
document.querySelector(".sample13_P3").innerHTML = result3;
const arrNum4 = [{ a: 100 }, { a: 200 }, { a: 300 }];
const result4 = arrNum4.map(el => el.a);
document.querySelector(".sample13_N4").innerHTML = "4";
document.querySelector(".sample13_Q4").innerHTML = "[{ a: 100 }, { a: 200 }, { a: 300 }]";
document.querySelector(".sample13_M4").innerHTML = "arrNum4.map(el => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4;
4. Array.from()
Array.from()메서드는 문자열을 배열로 변환하여 결과값을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
const text = "javascript";
const result = Array.from(text);
document.querySelector(".sample14_N1").innerHTML = "1";
document.querySelector(".sample14_Q1").innerHTML = "javascript";
document.querySelector(".sample14_M1").innerHTML = "Array.from(text)";
document.querySelector(".sample14_P1").innerHTML = result;
const text2 = "javascript";
const result2 = Array.from(text2, el => el + "10");
document.querySelector(".sample14_N2").innerHTML = "2";
document.querySelector(".sample14_Q2").innerHTML = "javascript";
document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el + '10')";
document.querySelector(".sample14_P2").innerHTML = result2;
const text3 = "javascript";
const result3 = [...text3].map(el => el);
document.querySelector(".sample14_N3").innerHTML = "3";
document.querySelector(".sample14_Q3").innerHTML = "javascript";
document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el => el)";
document.querySelector(".sample14_P3").innerHTML = result3;
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]slice(), splice(), indexOf(), lastIndexOf(), includes() (1) | 2022.09.27 |
|---|---|
| [javascript]concat(), reduce(), reduceRight() (1) | 2022.09.27 |
| [javascript]unshift(), shift(), reverse(), sort() (1) | 2022.09.27 |
| [javascript]startsWith() / endsWith() (1) | 2022.09.27 |
| [javascript]클래스 (3) | 2022.09.20 |
댓글