-
자바스크립트 고차함수 - find(), findindex()프론트엔드/JavaScript 2020. 10. 6. 15:59
find 메서드
자바스크립트 고차 함수 중에서 filter를 통해서 검색 기능을 구현할 수 있다고 했다.
그리고 배열 메서드 중 filter를 이용한 검색 기능과 비슷한 기능을 하는 메서드가 있다.
find 메서드를 이용하면 배열에서 조건에 해당하는 첫번째 값을 반환한다.
사용법은 다음과 같다.
<body> <script> let hero = [ {name: "헐크", age: "34"}, {name: "배트맨", age: "37"}, {name: "스파이더맨", age: "27"}, {name: "슈퍼맨", age: "39"}, {name: "아이언맨", age: "31"}, {name: "아이언맨", age: "34"}, ]; let find = hero.find(function(item){ return item.name == "아이언맨"; }); // find메서드를 이용하면 배열 안에서 원하는 요소를 추출할 수 있다. console.log(find); // {name: "아이언맨", age: "31"} 출력 // 아이언맨 객체가 두 개지만 그중 더 앞선 순서의 객체가 출력 </script> </body><body> <script> let hero = [ {name: "헐크", age: "34"}, {name: "배트맨", age: "37"}, {name: "스파이더맨", age: "27"}, {name: "슈퍼맨", age: "39"}, {name: "아이언맨", age: "31"}, {name: "아이언맨", age: "34"}, ]; function findname(name){ return hero.find(function(item){ return item.name == name; }) }; // find 메서드를 새로 만든 함수의 리턴값으로 설정 console.log(findname("스파이더맨")); // {name: "스파이더맨", age: "27"} 출력 </script> </body>다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.
<body> <script> let num = [1,2,3,4,5]; let find = num.find(function(item, index, array){ console.log("아이템:"+item+" 인덱스:"+index+" 호출배열:"+array) }); // find의 콜백함수는 find를 호출한 // 배열 요소, 인덱스, 배열을 파라미터로 받을 수 있다. </script> </body>findindex 메서드
findindex는 find와 기능이 같다. 다만 배열의 value가 아닌 인덱스 값을 넘겨준다.
<body> <script> let num = [1,2,3,4,5]; let num2 = num.findIndex(function(item){ return item == 5; }); console.log(num2) // 4출력 </script> </body><body> <script> let hero = [ {name: "헐크", age: "34"}, {name: "배트맨", age: "37"}, {name: "스파이더맨", age: "27"}, {name: "슈퍼맨", age: "39"}, {name: "아이언맨", age: "31"}, {name: "아이언맨", age: "34"}, ]; let heroindex = hero.findIndex(function(item){ return item.name == "아이언맨"; }); console.log(heroindex); // 4출력 </script> </body>다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.
<body> <script> let num = [1,2,3,4,5]; let findindex = num.findIndex(function(item, index, array){ console.log("아이템:"+item+" 인덱스:"+index+" 호출배열:"+array) }); // findindex의 콜백함수는 find를 호출한 // 배열 요소, 인덱스, 배열을 파라미터로 받을 수 있다. </script> </body>'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 - 이벤트 핸들러 (0) 2020.10.19 자바스크립트 - 이벤트 (0) 2020.10.19 자바스크립트 고차함수 - every(), some() (0) 2020.10.06 자바스크립트 고차함수 - reduce() (0) 2020.10.03 자바스크립트 고차함수 - filter() (0) 2020.10.03