javascript 배열 관련 메소드 정리

//length 메소드 및 배열 확인 방법... 

var arr = ['hello', 'world', 1, 2, 3];
 
console.log(arr.length); //5 
 
//Array.isArray(obj) 메소드 
 
배열인지 아닌지에 따라서 true , false 를  return 한다.
 
Array.isArray([]); //true
 
Array.isArray('false') // false

arr.forEach(callback[, thisArg])

매개변수

callback

각 요소에 대해 실행할 함수. 다음 세 가지 인수를 받습니다.

currentValue

처리할 현재 요소.

index Optional

처리할 현재 요소의 인덱스.

array Optional

forEach()를 호출한 배열.

thisArg Optional

callback을 실행할 때 this로 사용할 값.

 

function printArray(currentElement, index, array){
 
    console.log(index + ': '+ currentElement);
 
}
 
['hello',3,5].forEach(printArray);
 
//arr.map(callback) immutable 

• return value: callback이 실행되면서 return하는 값들을 모은 새로운 배열
• callback 내에서 return 필요
• 기존 배열과 동일한 길이를 갖고, 형태가 다른 새로운 배열을 만들 때 유용
• 새로운 배열을 만든다. 기존 배열을 가지고 .

arr.filter(callback(element[, index[, array]])[, thisArg])

callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

element

처리할 현재 요소.

index Optional

처리할 현재 요소의 인덱스.

array Optional

filter를 호출한 배열.

thisArg Optional

callback을 실행할 때 this로 사용하는 값.

 

 

[1, 3, 5].filter(function(currentElement, index, array)
 
{ return currentElement > 1 });
 
// [3, 5] immutable

• return value: 조건을 통과한 element들을 담은 새로운 배열
• callback 내에서 boolean 형태의 return 필요
• 기존 배열에서 조건에 따라 특정 element를 걸러낼 때 유용
• 특정한 조건에 맞게 return 하도록 만드는 메소드

 

arr.push(newElement) MUTABLE

• arguments: 추가할 element (여러 개 가능)
• return value: 추가된 array의 길이
• 배열 마지막에 요소를 추가

['code', 'states'].push('course'); // ['code', 'states', 'course']
 
[1, 3, 5].push(7, 9); // [1, 3, 5, 7, 9]

 

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

• arguments: 처음/마지막 index
• return value: 새로운 배열 객체 반환
• index의 범위만큼 element를 추출

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
 
console.log(animals.slice(2));
 
// ["camel", "duck", "elephant"]
 
console.log(animals.slice(2, 4));
 
// ["camel", "duck"]  immutable

 

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]]) MUTABLE

• arguments:
  • 처음 index
  • (삭제시) 삭제할 element의 갯수
  • (추가시) 배열에 추가할 element (여러 개 가능)
• return value: 새로운 배열 객체 반환
• 배열의 내용을 추가/삭제할 때 사용

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; myFish.splice(2, 0, 'drum');
 
// 'drum'을 두번째 인덱스에 삽입
 
// ["angel", "clown", "drum", "mandarin", "sturgeon"]
 
myFish.splice(2, 1); // 두번째 인덱스에서 하나의 항목('drum')을 삭제
 
// ["angel", "clown", "mandarin", "sturgeon"]

arr.join([separator]) 

매개변수

separator |Optional

배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환됩니다.

생략하면 배열의 요소들이 쉼표로 구분됩니다.

separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.

var elements = ['Fire', 'Air', 'Water'];
 
console.log(elements.join());
// expected output: "Fire,Air,Water"
 
console.log(elements.join(''));
// expected output: "FireAirWater"
 
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
 

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

arr.reduce(callback[, initialValue])

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator

누산기^accmulator는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue

처리할 현재 요소.

currentIndex Optional

처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array Optional

reduce()를 호출한 배열.

initialValue Optional

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

callback	accumulator	currentValue	currentIndex	array	반환 값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

이런 방식으로도 가능하다.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );