[Javascript] 배열 메서드 정리

---

1. Array.From()

유사 배열 객체나 반복 가능한 객체를 얕게 복사해서 새로운 객체를 만든다.

const a = [1,2,3,4];
const b = Array.from(a);
console.log(b === a); // false

2. Array.prototype.slice(begin, end)

기존 배열을 변경하지 않고 해당 배열의 일부를 반환한다.

const a = [1,2,3,4,5];
console.log(a.slice(1,3)); // [2, 3]

시작 인덱스와 종료 인덱스를 매개변수로 받는다.
종료 인덱스의 -1 인덱스까지 추출된다.

 

인자를 생략하면 기존 배열의 얇은 복사본을 반환한다.

const a = [1,2,3,4,5];
console.log(a.slice()); // [1, 2, 3, 4, 5]

3. Array.prototype.splice(start, deleteCount, item1, item2 ...)

배열의 기존 요소를 삭제 또는 교체하거나 새로운 요소를 추가한다.

기존 배열의 값이 변경된다.

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

a.splice(5,0,6);
console.log(a); // [1, 2, 3, 4, 5, 6]

a.splice(1, 2);
console.log(a); // [1, 4, 5, 6]

4. Array.prototype.concat(valueN)

기존 배열을 변경하지 않고 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const array3 = array1.concat(array2);
const array4 = array1.concat(1,2,3);

console.log(array3); // ["a", "b", "c", "d", "e", "f"]
console.log(array4); // ["a", "b", "c", 1, 2, 3]

인자를 생략하면 기존 배열의 얇은 복사본을 반환한다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat();

console.log(array3); // ["a", "b", "c"]

5. Array.prototype.join(separator)

배열의 모든 요소를 연결해 하나의 문자열을 반환한다.

const elements = [1, 2, 3];

console.log(elements.join()); // "1,2,3"

console.log(elements.join('')); // "123"

console.log(elements.join('-')); // "1-2-3"

6. Array.prototype.indexOf(searchElement, fromIndex)

배열에서 찾을 요소가 존재하면 찾을 요소와 일치하는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

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

console.log(a.indexOf(2)); // 1

console.log(a.indexOf(2, 2)); // -2

7. Array.prototype.reduce(callback(acc, cur, indx, src), initialValue)

배열의 요소를 차례대로 지정한 콜백함수를 실행하여 하나의 결과값을 반환한다.

콜백함수는 acc 누적값, cur 현재 값, idx 현재 인덱스, src 원본 배열 4가지 인자를 갖는다.

 

콜백함수를 실행하여 return 된 값은 누적값에 누적된다.

따라서, 배열 요소들의 합 등을 구하기 좋다.

const array1 = [1, 2, 3, 4];

const sum = array1.reduce((pre, cur) => {
	console.log(pre, cur);
  	return pre + cur;
})

console.log(sum);

코드를 실행하면 아래와 같은 결과가 출력된다.

1 2

3 3

6 4

10

초기값을 생략 했기 때문에 배열의 첫 요소부터 마지막 요소까지 누적값을 이용하면서 합계를 구하는 걸 볼 수 있다.

8. Array.prototype.filter(callback(element,index,array),thisArg)

배열의 요소를 차례대로 지정한 콜백함수를 실행하여 함수 조건을 통과하는 모든 요소들을 모아 새로운 배열로 반환한다.

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

const result = numbers.filter(number => number >= 3);

console.log(result); // [3, 4, 5]

9. Array.prototype.map(callback(currentValue, index, array),thisArg)

배열의 요소를 차례대로 지정한 콜백함수를 실행하여 return된 결과를 모아 새로운 배열을 반환한다.

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

const result = number.map(x => x * 2);

console.log(result); // [2, 4, 6, 8, 10]

10. Array.prototype.find(callback(element, index, array),thisArg)

배열의 요소를 차례대로 지정한 콜백함수를 실행하여 함수 조건에 만족하는 첫 번째 요소의 값을 반환한다.

요소가 없다면 undefined를 반환한다.

const numbers = [1, 2, 3, 4];

const result = numbers.find(number => number >= 3);
console.log(result); // 3

const result2 = numbers.find(number => number < 0);
console.log(result2); // undefined

11. Array.prototype.sort(compareFunchtion)

배열 요소를 정렬하며, 기존 배열이 정렬된다.

기본 정렬은 ASCII 문자 순서로 정렬된다.

const words = ['Z', 'B', 'A', 'C'];
words.sort();
console.log(words); // ["A", "B", "C", "Z"]

정렬이 ASCII 문자 순서로 정렬되기 때문에 숫자 요소는 아래와 같이 정렬한다.

const numbers = [1, 30, 4, 21, 100000];

// 오름차순
numbers.sort((a, b) => a - b);
console.log(numbers);

// 내림차순
numbers.sort((a, b) => b - a);
console.log(numbers);

12. Array.prototype.some(callback(currentValue, index, array),thisArg)

배열 안에 어떤 요소라고 지정한 콜백함수의 조건에 통과하면 true를 반환한다.

콜백함수의 조건에 전부 통과하지 못해야만 false를 반환한다. 

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

const result = numbers.some(number => number > 6)
console.log(result); // false

// 배열에 특정 값 존재여부 체크
const result1 = numbers.some(number => number === 5)
console.log(result1); // true

 

---