초보몽키의 개발공부로그

javascript 주요 메소드 목록 (업데이트 중)

17 Feb 2017 | javascript 메소드 method 함수

배열 메소드 (Array)

map

설명

map() 메소드는 배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. 재구성 MDN

문법

arr.map(callback[, thisArg])
  • callback : 새로운 배열 요소를 생성하는 함수로 다음 세 가지 인수를 가집니다.
    • currentValue : 배열의 요소 중, 현재 처리되고 있는 요소
    • index :현재 처리되는 요소의 배열 내 인덱스
    • array : map 메소드가 적용되는 본래 배열

예시

배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기

var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // roots의 값은 [1, 2, 3]이 되지만, numbers는 그대로 [1, 4, 9]입니다.

숫자가 들어있는 배열을 인수가 있는 함수를 사용하여 재구성하기

var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); // doubles is now [2, 8, 18]. numbers is still [1, 4, 9]

filter

설명

filter() 메소드는 제공된 함수로 구현된 테스트를 통과(true)하는 모든 요소가 있는 새로운 배열을 만든다. 조건 검색, 재구성 MDN)

문법

var new_array = arr.filter(callback[, thisArg])

예시

다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용한다.

function isBigEnough(value) { return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered 는 [12, 130, 44]

JSON 오브젝트로 이루어진 배열중에 특정 값만 filter 시킬때 유용하다.

var arr = [ {"name":"apple", "count": 2}, {"name":"orange", "count": 5}, {"name":"pear", "count": 3}, {"name":"orange", "count": 16} ]; var newArr = arr.filter(function(item){ return item.name === "orange"; }); console.log("Filter results:",newArr); // [{"name":"orange", "count": 5}, {"name":"orange", "count": 16}]

reduce

설명

배열의 모든 요소에 대해 지정된 콜백을 호출합니다.콜백 함수의 반환 값은 결과에 누적되며 다음에 콜백 함수를 호출할 때 인수로 제공됩니다. MDN

문법

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, []); // flattened is [0, 1, 2, 3, 4, 5]

예시

배열의 값 모두 더하기

var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }); // total == 6

indexOf

설명

배열에서 특정 값이 있는지 검색한다. 배열에서 지정된 요소를 찾을 수있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다. MDN

문법

arr.indexOf(searchElement) arr.indexOf(searchElement, fromIndex)

예시

var a = [2, 9, 9]; a.indexOf(2); // 0 a.indexOf(7); // -1 if (a.indexOf(7) === -1) { // 요소가 배열에 존재하지 않습니다. }

Related Posts