분류 javascript

JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드 - JavaScript guide

컨텐츠 정보

  • 조회 181 (작성일 )

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드 


소개 


JavaScript 배열은 요소 목록으로 구성된 데이터 유형입니다. JavaScript에서 배열을 다루는 유용한 내장 메소드가 많이 있습니다. 원래 배열을 수정하는 메서드는 mutator 메서드라고 하며 새로운 값이나 표현을 반환하는 메서드는 액세서 메서드라고 합니다. 이 튜토리얼에서는 접근자 메서드에 중점을 둘 것입니다.


이 자습서를 최대한 활용하려면 배열 만들기, 인덱싱, 수정 및 반복에 익숙해야 합니다.이 자습서는 JavaScript의 배열 이해 자습서에서 검토 할 수 있습니다.


이 튜토리얼에서는 배열을 연결하고 배열을 문자열로 변환하고 배열의 일부를 새 배열로 복사하고 배열의 인덱스를 찾는 메소드를 살펴 봅니다.


참고 : Array.prototype은 Array 객체 자체를 참조하므로 Array 메서드는 Array.prototype.method()로 올바르게 작성됩니다. 간단히 하기 위해 단순히 이름을 method()로 나열합니다. 


https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-accessor-methods 


concat() 


concat() 메소드는 둘 이상의 배열을 병합하여 새 배열을 형성합니다.


아래 예에서는 shellfish 유형의 두 가지 배열을 만들어 하나의 새 배열로 결합합니다.

// Create arrays of monovalves and bivalves
let monovalves = [ "abalone", "conch" ];
let bivalves = [ "oyster", "mussel", "clam" ];

// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves);

새 배열을 호출하면 두 배열의 조합으로 구성됩니다.


shellfish;
Output
[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

concat() 메서드는 여러 인수를 사용할 수 있으므로 단일 배열로 여러 배열을 효과적으로 연결할 수 있습니다.


join() 


join() 메서드는 배열의 모든 요소를 ​​새 문자열로 변환합니다.


let fish = [ "piranha", "barracuda", "koi", "eel" ];

인수를 지정하지 않으면 join()의 출력은 추가 공백이 없는 쉼표로 구분 된 문자열이 됩니다.


// Join the elements of an array into a string
let fishString = fish.join();

fishString;
Output
'piranha,barracuda,koi,eel'

공백이나 다른 구분 기호를 포함하려면 구분 기호 문자열을 join() 메서드에 매개 변수로 추가 할 수 있습니다. 이 매개 변수에는 각 배열 요소 사이에 원하는 구분 기호가 포함됩니다.


// Join the elements of an array into a string
let fishString = fish.join(', ');

fishString;
Output
'piranha, barracuda, koi, eel'

위의 예에서 공백으로 ', '를 쓰면 배열 항목이 더 읽기 쉬운 방식으로 분리됩니다. 인수로 제공된 빈 문자열은 기본 쉼표를 완전히 제거합니다.


slice() 


slice() 메서드는 배열의 일부를 새 배열로 복사합니다.


let fish = [ "piranha", "barracuda", "koi", "eel" ];

배열의 마지막 두 항목을 새 배열로 복사한다고 가정합니다. 원하는 첫 번째 요소의 색인 번호 (koi의 경우 2)로 시작합니다. 원하는 마지막 요소 다음에 나오는 색인 번호로 끝납니다. 마지막 요소 인 eel의 색인 번호는 3이므로 4를 입력합니다.

/ Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 4);

fishWithShortNames;
Output
[ 'koi', 'eel' ]

이 특별한 경우, eel은 배열의 마지막 항목이므로 두 번째 인수는 실제로 불필요합니다. slice()는 첫 번째 인덱스에서 시작하여 두 번째 인수가 제공되지 않으면 배열의 끝에서 중지합니다.


// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2);

fishWithShortNames;
Output
[ 'koi', 'eel' ]

slice()는 원래 배열에서 항목을 추가하거나 삭제할 수 있는 mutator 메서드 splice()와 혼동하지 않아야 합니다.


indexOf() 


indexOf() 메서드는 요소의 첫 번째 인스턴스의 인덱스 번호를 반환합니다.


아래 예제에는 barracuda가 두 번 나열되는 문자열이 있습니다.

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

indexOf()를 사용하여 첫 번째 인스턴스를 찾습니다.


// Find the first instance of an element
fish.indexOf("barracuda");
Output
1

주어진 인수가 배열에 존재하지 않는 값이면 콘솔은 -1을 반환합니다.


fish.indexOf("shark");
Output
-1

indexOf() 메소드는 많은 항목을 포함하는 배열에서 특히 유용합니다.


lastIndexOf() 


lastIndexOf() 메소드는 요소의 마지막 인스턴스의 색인 번호를 리턴합니다.


barracuda를 두 번 포함하는 indexOf()에서 동일한 예제를 테스트 할 수 있습니다.

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

// Find the last instance of an element
fish.lastIndexOf("barracuda");
Output
3

lastIndexOf()는 끝에서 시작하여 배열을 검색하고 찾은 첫 번째 색인 번호를 반환합니다.


결론 


이 자습서에서는 JavaScript의 기본 제공 액세서 배열 방법을 검토했습니다. 접근자 메서드는 원본을 변경하거나 수정하는 대신 배열의 새 복사본 또는 표현을 만듭니다.


우리는 배열을 함께 연결하는 방법을 배웠습니다. 배열을 엔드-투-엔드로 결합하고 배열을 쉼표로 구분 된 문자열로 변환하는 방법을 배웠습니다. 또한 배열의 일부를 새 배열로 복사하고 배열에서 주어진 요소의 첫 번째 및 마지막 인덱스를 찾는 방법을 배웠습니다.