정보실

웹학교

정보실

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

본문

목차​

  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에서 배열 메서드를 사용하는 방법 : Mutator 메서드 


소개 


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-mutator-methods 


isArray() 


뮤테이터 메소드에 들어가기 전에 객체가 배열인지 테스트하기 위해 isArray() 메소드를 살펴 보겠습니다. 변수의 값이 배열과 같은 경우 true를 반환하는 부울 메서드입니다. 객체가 배열이 아닌 경우 이 메서드는 false를 반환합니다.


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

// Test if fish variable is an array
Array.isArray(fish);
Output
true

isArray() 메소드는 일반적으로 테스트에 사용하는 typeof 연산자가 배열과 함께 사용될 때 객체를 반환하고 때로는 객체와 Array 객체의 차이를 알아야 하기 때문에 유용합니다.


isArray()는 대부분의 배열 메소드와 다르게 작성되며 배열 변수는 메소드의 인수로 제공됩니다.


객체가 배열인지 확인하는 방법을 배웠으니 이제 뮤테이터 메서드로 넘어 갑시다.


pop() 


우리가 살펴볼 첫 번째 뮤테이터 메소드는 pop() 메소드로, 배열 끝에서 마지막 요소를 제거합니다.


fish 배열부터 시작하겠습니다.


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

마지막 항목을 제거하기 위해 pop() 메소드를 초기화합시다. 이 경우 문자열 리터럴 "eel"이 됩니다.


// Use pop method to remove an item from the end of an array
fish.pop();

마지막 항목 없이 배열이 반환 되도록 배열을 호출합니다.


fish;
Output
[ 'piranha', 'barracuda', 'koi' ]

fish 배열에서 'eel'를 성공적으로 제거했습니다. pop() 메서드는 추가 매개 변수를 사용하지 않습니다.


shift() 


또 다른 변경자 메서드인 shift() 메서드는 배열의 시작 부분에서 첫 번째 요소를 제거합니다.


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

shift()를 사용하여 인덱스 0에서 "piranha"를 제거하고 나머지 모든 요소를 ​​하나의 인덱스 번호만큼 아래로 이동합니다.


// Use shift method to remove an item from the beginning of an array
fish.shift();

fish;
Output
[ 'barracuda', 'koi', 'eel' ]

이 예에서는 "piranha"가 제거되었으며 각 항목이 하나의 색인 번호로 이동 되었습니다. 따라서 다른 배열 요소가 인덱스 위치를 유지하므로 가능한 경우 항상 pop() 메서드를 사용하는 것이 좋습니다.


push() 


push() 뮤 테이터 메소드는 배열 끝에 새 요소를 추가합니다.

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

마지막에 항목을 추가하기 위해 새 요소를 함수의 매개 변수로 작성합니다.

// Use push method to add an item to the end of an array
fish.push("swordfish");

fish;
Output
[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]

배열에 여러 개의 새 값을 추가 할 수도 있습니다. 예를 들어, fish.push ( "swordfish", "dragonfish")는 색인 4와 5에 항목을 추가했을 것입니다.


unshift() 


unshift() mutator array 메소드는 배열의 시작 부분에 새로운 요소를 추가합니다.


let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");

fish;
Output
[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]

위의 예에서 "shark"는 인덱스 위치 0에 추가되어 다른 모든 배열 요소가 하나씩 이동합니다. shift()와 마찬가지로 쉼표로 구분 된 여러 항목을 한 번에 배열에 추가 할 수 있습니다.


pop() 및 push()는 배열의 끝에 영향을 주며 shift() 및 unshift()는 배열의 시작에 영향을 줍니다. 이것을 기억하는 쉬운 방법은 shift()와 unshift()가 반환 된 배열의 모든 인덱스 번호를 변경한다는 것을 명심하는 것입니다


splice() 


splice() 메서드는 배열의 임의 위치에서 항목을 추가하거나 제거 할 수 있습니다. 변경자 메서드 인 splice()는 추가 또는 제거하거나 동시에 추가 및 제거 할 수 있습니다.


splice()는 시작할 인덱스 번호, 제거 할 항목 수 및 추가 할 항목 (선택 사항)의 세 가지 매개 변수를 사용합니다.


splice(index number, number of items to remove, items to add)

splice (0, 0, "new")는 문자열 "new"를 배열의 시작 부분에 추가하고 아무것도 삭제하지 않습니다.


splice()가 배열에서 항목을 추가하고 제거하는 방법에 대한 몇 가지 예를 아래에서 살펴 보겠습니다.


splice()로 추가 


두 번째 매개 변수 (제거 할 항목)를 0으로 설정하면 splice()는 0 개의 항목을 삭제합니다. 이런 식으로 인덱스 번호에서 시작하는 항목만 추가하여 splice()를 push() 또는 unshift()보다 강력하게 만들 수 있습니다.이 경우 배열의 끝이나 시작 부분에만 항목이 추가됩니다.


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

// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");

fish;
Output
[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]

새로운 문자열 "manta ray"가 인덱스 1부터 배열에 추가되었습니다.


splice()로 제거 


세 번째 매개 변수 (추가 할 항목)를 비워두면 배열의 모든 지점에서 항목을 간단히 제거 할 수 있습니다.


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

// Remove two items, starting at index position 1
fish.splice(1, 2);

fish;
Output
[ 'piranha', 'eel' ]

인덱스 1부터 시작하여 "barracuda"라는 두 항목을 배열에서 삭제했습니다. 두 번째 인수가 제거되면 배열 끝의 모든 항목이 제거됩니다.


splice()를 사용하여 추가 및 제거 


모든 매개 변수를 한 번에 사용하면 배열에서 항목을 동시에 추가하고 제거 할 수 있습니다.


이를 설명하기 위해 위에서와 동일한 항목을 제거하고 해당 위치에 새로운 항목을 추가하겠습니다.


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

// Remove two items and add one
fish.splice(1, 2, "manta ray");

fish;
Output
[ 'piranha', 'manta ray', 'eel' ]

splice()는 배열의 일부를 수정하는 강력한 방법입니다. splice()는 배열 섹션의 복사본을 만드는 접근자 배열인 slice()와 혼동해서는 안됩니다.


reverse() 


reverse() 메서드는 배열의 요소 순서를 반대로 바꿉니다.


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

reverse()를 사용하면 마지막 요소가 첫 번째 요소이고 첫 번째 요소가 마지막입니다.

// Reverse the fish array
fish.reverse();

fish;
Output
[ 'eel', 'koi', 'barracuda', 'piranha' ]

reverse() 배열 메소드에는 매개 변수가 없습니다.


fill() 


fill() 메서드는 배열의 모든 요소를 ​​정적 값으로 바꿉니다.


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

fish 배열에는 4 개의 항목이 있습니다. fill()을 적용 해 봅시다.


// Replace all values in the array with "shark"
fish.fill("shark");

fish;
Output
[ 'shark', 'shark', 'shark', 'shark' ]

배열의 4 개 항목이 모두 "shark"라는 동일한 값으로 대체되었습니다. fill()은 시작 및 끝 지점의 선택적 인수도 취합니다.


fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]

fill()을 사용하여 배열의 하나 이상의 요소를 정적 값으로 바꿀 수 있습니다.


sort() 


sort() 메서드는 요소의 첫 번째 문자를 기준으로 배열의 요소를 정렬합니다. 첫 번째 문자가 동일한 경우 줄을 계속 따라 두 번째 문자를 비교하는 식으로 진행됩니다.


기본적으로 sort()는 모두 대문자 또는 소문자인 문자열 배열을 알파벳순으로 표시합니다.


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

// Sort items in array
fish.sort();

fish;
Output
[ 'barracuda', 'eel', 'koi', 'piranha' ]

sort()는 첫 번째 유니 코드 문자를 기반으로 하므로 대문자를 소문자보다 먼저 정렬합니다.


문자열 중 하나가 대문자로 시작하도록 원래 배열을 수정합시다.


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

fish.sort();

fish;
Output
[ 'Koi', 'barracuda', 'eel', 'piranha' ]

숫자는 대문자와 소문자보다 앞에 옵니다.


문자열 항목 중 하나에 숫자를 포함하도록 배열을 다시 수정할 수 있습니다.


let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];

fish.sort();
Output
[ '1 eel', 'Koi', 'barracuda', 'piranha' ]

sort()는 기본적으로 숫자 배열을 크기 별로 정렬하지 않습니다. 대신 숫자의 첫 문자만 확인합니다.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

numbers.sort();
Output
[ 15, 16, 23, 4, 42, 8 ]

숫자를 올바르게 정렬하기 위해 비교 함수를 인수로 만들 수 있습니다.


// Function to sort numbers by size
const sortNumerically = (a, b) => {
  return a - b;
}

numbers.sort(sortNumerically);
Output
[ 4, 8, 15, 16, 23, 42 ]

sortNumerically 비교 함수를 사용하면 의도 한대로 정렬 할 수 있었습니다. sort()는 변경 사항을 원래 배열에 적용합니다.


결론 


이 튜토리얼에서는 JavaScript의 주요 뮤테이터 배열 메소드를 검토했습니다. 접근자 메서드와 같은 복사본을 만드는 대신 Mutator 메서드는 원래 배열을 수정합니다. 배열의 시작 또는 끝에 요소를 추가 및 제거하는 방법과 배열 항목의 값을 정렬, 반전 및 교체하는 방법을 배웠습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 43회 ]  작성일19-10-28 09:02

웹학교