[JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법

기본적인 배열은 일반 변수들이 나열된 모양이다.

var arr = [ "사과", "딸기", "복숭아 ];

var arr2 = [ 5, 3, 0.5, 7, 2, 9];

 

이런 일반적인 배열에서 인덱스를 통해 배열의 값을 구할수있다.

console.log(arr[0]); // "사과" 출력

console.log(arr2[2]); // 0.5 출력

 

반대로 배열의 값을 아는경우에 해당 배열의 몇번째 인덱스인지 indexOf함수를 사용하여 다음처럼 구할수있다.

console.log(arr.indexOf("복숭아")); // 2 출력

console.log(arr2.indexOf(5)); // 0 출력

 

하지만 자바스크립트에서 배열의 원소들이 객체(object)라면 어떻게 될까?

아래의 예를 살펴보자.

var arr3 = [

{ num : 0, name : "홍길동" },

{ num : 1, name : "박보검" },

{ num : 2, name : "강호동" }

];

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

위와 같은 객체배열이 존재한다고 가정하자.

객체 배열에서 객체안의 변수를 구하려면 다음과 같이 사용한다.

console.log(arr3[1].name); // "박보검" 출력

console.log(arr3[2].num); // 2 출력

 

그렇다면 반대로 "강호동"이라는 문자열을 가지고 2라는 인덱스를 구하려면 어떻게해야할까?

(실제로 프로그래밍도중 해당 지식이 필요하여 찾아서 정리한것이다..)

답은 findIndex() 함수를 사용하면 된다. 예를 통해 살펴보자.

var index = arr3.findIndex(i => i.name == "강호동"); 

 

여기서 index의 값으로 2를 반환받는다.

i라는 변수명은 아무거나 적어도 작동하는것을 보였다. 하지만 다른 변수이름과 중복되면 왠지모를 찝찝함이 생기므로

obj나 안쓰는 다른 변수명을 사용하자.

 

그럼이제 저 index를 사용하여 해당 배열에 접근할수있겠지?

 

[출처] https://yeolco.tistory.com/157

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
485 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 10
484 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 7
483 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 8
482 [Javascript][persistent storage] persistent storage of Javascript file 졸리운_곰 2023.02.05 11
» [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법 졸리운_곰 2023.01.26 9
480 [HTML/Javascript] 웹소켓(WEBSOCKET) 시작하기(강의,번역) file 졸리운_곰 2022.11.15 15
479 [HTML/Javascript] 웹소켓 튜터리얼 졸리운_곰 2022.11.15 4
478 [HTML, Javascript] JavaScript에 변수가 있는지 확인 졸리운_곰 2022.11.15 10
477 [html, javascript] JavaScript에서 함수가 완료 될 때까지 기다립니다 졸리운_곰 2022.11.15 36
476 [IE javascript to Chrome] A universal createPopup() replacement 졸리운_곰 2022.11.14 8
475 [web개발][javascript] TypeScript 기본 문법 정리 졸리운_곰 2022.11.05 11
474 [HTML/Javascript] indexedDB에 대해 알아보자! file 졸리운_곰 2022.09.15 57
473 [HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용 file 졸리운_곰 2022.09.09 9
472 [HTML] Div 를 새창 팝업으로 띄우기 졸리운_곰 2022.09.09 7
471 [Web Design][웹 디자인] Sass(SCSS) 완전 정복! 졸리운_곰 2022.07.31 91
470 [Apache 운영] 404 에러페이지 전환 How to Redirect 404 to Homepage using .htaccess 졸리운_곰 2022.07.28 46
469 [JWT} [WEB] JWT(Json Web Token)란? 개념 정리 및 예제 file 졸리운_곰 2022.07.15 38
468 [php worldpress] [위 에]wordpress 사용자 암호 화 원리 및 알고리즘 분석 졸리운_곰 2022.04.11 13
467 [HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기 file 졸리운_곰 2022.02.14 23
466 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 18
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED