array 메소드 기본 정리

1. concat()

인자로 주어진 값이나 배열을 기존에 합쳐서 새로운 배열 반환.

// array1.concat(array2, array3, ..., arrayX)
var a = [1,2]
var b = [3,4]
var c = a.concat(b)

var c // 1,2,3,4

 

2. every()

조건을 테스트해서 true, false 반환.

// array.every(function(currentValue, index, arr), thisValue)
var _a = [1,2,3,4]

var chkNum = function chkNum(v) {
	return v < 5;
};

_a.every(chkNum);
// true;

 

3. fill()

시작 인덱스부터 끝 인덱스 전까지 원하는 값으로 채움.

// array.fill(value, start?, end?)
var _a = [1,2,3]

_a.fill(0, 0, 2);
// [0,0,3]

#es6

 

4. filter()

주어진 함수를 만족하는 값으로 변경된 배열을 반환.

// array.filter(function(currentValue, index, arr), thisValue)

var _a = [5, 0, 105, -1, 93, -57, 265];

var chkValue = function chkValue(v) {
	return v > 0;
};

_a.filter(chkValue);
// [5, 105, 93, 265]

 

5. find()

주어진 함수를 만족하는 첫번째 값을 반환.

// array.find(function(currentValue, index, arr),thisValue)
var _a = [5, 0, 105, -1, 93, -57, 265];

var chkValue = function chkValue(v) {
	return v < 0;
};

_a.find(chkValue);
// [-1]

#es6

 

6. forEach()

주어진 함수에 대해 배열 요소를 각각 실행.

// array.forEach(function(currentValue, index, arr), thisValue)
var _a = [1, 2];

_a.forEach(function(value, index) {
	console.log(`${value} : [${index}]`);
});
// 1 : [0]
// 2 : [1]

- 브레이크는 없기때문에 브레이크가 필요하다면 for 사용.

- return 불가능(즉 함수를 새로운 변수에 담을 수 없고, 실행만 가능).

 

7. includes()

배열에 해당하는 값이 있나 확인해서 true, false 반환.

// array.includes(element, start)
var _a = [1, 2];

_a.includes(2);
// true

indexOf()와 다른 점

- NaN, undefined 구분 가능
- -0과 +0 구분 불가능

 

#es7

 

8. map()

배열 내 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환.

// array.map(function(currentValue, index, arr), thisValue)
var _a = [0,2,4];

var map = function(x) {
	return x + 2;
};

_a.map(map);
// [2, 4, 6]

 

9. reduce()

배열의 각 요소에 대해 주어진 함수를 실행하여 하나의 값을 반환.

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
var _a = [100, 10, 5];

var reduce = function(acc, cur) {
	return acc / cur;
};
_a.reduce(reduce);
// 2

// 만약 배열 안에 객체가 있다면 다음과 같이 초기값 0을 넣어줘야함.
var _a = [{x:1}, {x:2}, {x:3}];

var reduce = function(acc, cur) {
	return acc + cur.x;
};
_a.reduce(reduce, 0);
// 6 

 

10. reduceRight()

reduce()랑 똑같은데 그냥 오른쪽 --> 왼쪽 방향이 다름.

// array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
var _a = [[1,2], [3,4]];

var reduce = function(acc, cur) {
	return acc.concat(cur);
};
_a.reduceRight(reduce);
// [3, 4, 1, 2]

 

 

 

* concat() vs push()

공통점: 배열 맨 뒤에 값을 추가함.

차이점:

var a = [1,2,3];
var b = [4,5];

a.concat(b);
// [1,2,3,4,5] 값을 추가하여 리턴
console.log(a);
// [1,2,3]

a.push(b);
// 4 통째로 추가하고 그 길이를 리턴
console.log(a);
// [1,2,3,[4,5]]

 

*indexOf() vs search()

공통점: 해당값과 일치하는 값의 첫번째 인덱스 리턴, 없으면 -1 리턴

차이점:

var a = 'Ur beautiful, Ur gorgeous';
a.indexOf('Ur', 5);
// 14
// 시작 위치를 정하는게 가능.

var a = 'Ur beautiful, ur gorgeous';
a.search(/ur/i);
// 0
// 정규표현식 가능.
// /문자열/i라고 쓰면 대소문자 가리지않고 찾아줌.