TIL - 배열의 메소드 ( 3 )

rain98·2021년 5월 15일
TIL배열자바스크립트
0

TIL

목록 보기
16/32
post-thumbnail
post-custom-banner

배열의 메소드

array 객체가 갖고 있는 메소드들에 대해 알아보자.
"이 함수들을 전부다 쓴다" 라는것 보다 적어놓고 기억이 날때 보면서 사용하기 위해 기록한다.
잘 이용하면 배열을 보다 효과적으로 사용할 수 있을거같다.

배열의 메소드 (1) : concat(), copyWithin(), entries(), every(), fill(), filter(), find(), findIndex(), forEach(), includes()
url : https://velog.io/@rain98/TIL-%EB%B0%B0%EC%97%B4%EC%9D%98-%EB%A9%94%EC%86%8C%EB%93%9C

배열의 메소드 (2) : indexof(), join(), keys(), lastIndexOf(), map(), pop(), push(), reduce(), reverse()
url : https://velog.io/@rain98/TIL-%EB%B0%B0%EC%97%B4%EC%9D%98-%EB%A9%94%EC%86%8C%EB%93%9C-2

배열의 메소드 (3) : shift(), slice(), some(), sort(), splice(), toString(), unshift()
url : https://velog.io/@rain98/TIL-%EB%B0%B0%EC%97%B4%EC%9D%98-%EB%A9%94%EC%86%8C%EB%93%9C-3

shift()

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

arr.shift()

shift() 예제

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

배열에서 한 요소 제거하기

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before: ' + myFish);
// "제거전 myFish 배열: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log('myFish after: ' + myFish);
// "제거후 myFish 배열: clown,mandarin,surgeon"

console.log('Removed this element: ' + shifted);
// "제거된 배열 요소: angel"

while 반복문 안에서 shift() 사용하기
shift() 메서드는 while 문의 조건으로 사용되기도 한다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복한다.

var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

slice()

배열의 일부를 추출한 새 배열을 반환한다.
원본 배열은 수정되지 않는다.

arr.slice([begin[, end]])

slice() 매개변수

  • begin (선택)
    0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미한다. 반대로
    음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.
    예를들어 slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다.

  • end (선택)
    추출을 종료 할 0 기준 인덱스. slice 는 end 인덱스를 제외하고 추출한다.
    음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다. 예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출한다.
    end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출한다.

slice() 예제

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

some()

배열 안의 어떤 하나의 요소라도 주어진 함수를 통과하는지 테스트하고 만족한다면 true를 반환한다.

⚠️ 참고 : 빈 배열에서 호출하면 무조건 false를 반환한다.

arr.some(callback[, thisArg])

some() 매개변수

  • callback
    각 요소를 시험할 함수. 다음 세 가지 인수를 받는다.
    • currentValue
      처리할 현재 요소.
    • index (선택)
      처리할 현재 요소의 인덱스.
    • array (선택)
      some을 호출한 배열.
  • thisArg (선택)
    callback을 실행할 때 this로 사용하는 값.

some() 예제

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

배열의 요소 테스트
배열 내 요소 중 하나라도 10보다 큰지 판별한다.

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
기본 정렬 순서는 유니코드 코드 포인트를 따른다.

arr.sort([compareFunction])

sort() 매개변수

  • compareFunction (선택)
    정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.

sort() 예제

var score = [4, 11, 2, 10, 3, 1]; 

score.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

score.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

splice() 매개변수

  • cstart
    배열의 변경을 시작할 인덱스. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다.

  • deleteCount (선택)
    배열에서 제거할 요소의 수.
    deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

  • item1, item2, ... (선택)
    배열에 추가할 요소. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

splice() 예제

하나도 제거하지 않고, 2번 인덱스에 "drum" 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

3번 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

2번 인덱스에서 두 개 요소 제거

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]

-2번 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

2번 인덱스를 포함해서 이후의 모든 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

toString()

배열과 요소를 나타내는 문자열을 반환한다.

arr.toString()

toString() 예제

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); 
// 'Jan,Feb,Mar,Apr'을 myVar에 할당.

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toString

unshift()

새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

arr.unshift([...elementN])

unshift() 매개변수

  • elementN
    배열 맨 앞에 추가할 요소.

unshift() 예제

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

또 다른 예제

var arr = [1, 2];

arr.unshift(0); //
// arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]

mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

profile
rain98
헷갈리거나 기억에 남기고 싶은것을 기록합니다.
이전 포스트

TIL - 배열의 메소드 ( 2 )

다음 포스트

TIL - 개발자도구

post-custom-banner

0개의 댓글