배열 Array(메소드 정리) #2

＊모두 똑같은 요소로 채우고 싶다면 fill

Array.prototype.fill()메소드는 배열 내 원하는 요소를 같은 값으로 채울 수 있다.

해당 메소드는 원본을 변경하는 메소드로, 복사본이 아닌 this 객체로 변경해 반환한다는 특징이 있다.

//구조
arrayName.fill(element_value, start_index, end_index);

첫번째 매개변수

배열에 채우고자 하는 값을 입력한다.

 

두번째 매개변수

값을 채우기 시작할 지점의 인덱스, 생략이 가능하며 기본값은 0이다.

음수를 입력하면 뒤에서부터 접근가능하다.

 

세번째 매개변수

어디까지 값을 채울건지 종료지점의 인덱스

생략이 가능하며 기본값은 array.length이다.

const array = [1,2,3,4];
array.fill("zero");
console.log(array);    //["zero","zero","zero","zero"]
 
const array = [1,2,3,4];
array.fill("zero", 2);
console.log(array);    //[1,2,"zero","zero"]
 
const array = [1,2,3,4];
array.fill("zero", 1, 2);
console.log(array);    //[1,"zero", "zero", 4]
 

 

＊특정 요소가 포함되었는지 확인할 때에는 includes()

Array.prototype.includes() 메소드는 배열이 특정 값이 포함되어있는지 확인할 수 있다.

대소문자를 구분한다.

//구조
arrayName.includes(value, start_index);

두번째 매개변수는 생략이 가능하며 기본값은 0이다.

const array = ['cake', 'coffee', 'bread', 'tea'];
const result = array.incudes('soju');
const result2 = array.includes('cake');
const result3 = array.includes('cake', 2);
console.log(result);    //output : false
console.log(result2);    //output : true
console.log(result3);    //output : false

 

＊배열에서 조건을 만족하는 하나의 요소를 찾을 때 find()

Array.prototype.find() 메소드는 배열에서 특정 조건에 부합하는 1개의 값을 찾아 반환한다.

filter() 메소드와 유사하지만 단 하나의 요소만을 찾는다는 점이 다르다.

하나의 값만 찾기 때문에 Array.prototype.filter() 보다 성능이 우수하다.

하나도 조건을 만족하는게 없을경우 undefined를 return한다.

const array = [1,2,3,4,5,6,7,8,9,10];
const result = array.find(i => i > 5);
console.log(result);    //output : 6

 

＊배열에서 조건을 만족하는 모든 요소를 찾을 때 filter()

Array.prototype.filter()메소드는 특정 조건에  부합하는 모든 요소를 찾아서

그 값들로 이루어진 새로운 배열을 만들어 반환한다.

어떤 요소도 조건에 부합하지 못하면 빈 배열을 반환한다.

const array = [{
    'name' :    'title1',
    'content' :    'content1',
    'index'    :    1
}, {
    'name' :    'title2',
    'content' :    'content2',
    'index'    :    2
}, {
    'name' :    'title3',
    'content' :    'content3',
    'index'    :    3
}, {
    'name' :    'title4',
    'content' :    'content4',
    'index'    :    4
}, {
    'name' :    'titl5',
    'content' :    'content5',
    'index'    :    5
}];
 
const result =  array.filter(t => t.index > 3);
console.log(result);    
//output
/*
[{
    'name' : 'title4',
    'content' : 'content4',
    'index' : 4
}, {
    'name' : 'title5',
    'content' : 'content5',
    'index' : 5
}]
*/

 

＊배열에서 조건을 만족하는 첫 번째 인덱스를 찾을 때 findindex()

Array.prototype.findIndex() 메소드는 주어진 조건에 부합하는 배열의 맨 첫 번째 요소의

인덱스를 반환한다.

find() 메소드와 비슷하지만 find는 인덱스가 아니라 첫 번째 요소를 반환한다는 차이가 있다.

const array = [{
    'name' :    'title1',
    'content' :    'content1',
    'index'    :    1
}, {
    'name' :    'title2',
    'content' :    'content2',
    'index'    :    2
}, {
    'name' :    'title3',
    'content' :    'content3',
    'index'    :    3
}, {
    'name' :    'title4',
    'content' :    'content4',
    'index'    :    4
}, {
    'name' :    'titl5',
    'content' :    'content5',
    'index'    :    5
}];
 
const result =  array.findIndex(t => t.index > 3);
console.log(result);    //output : 3
 

 

＊각 요소에 함수를 호출할 때 map()

Array.prototype.map() 메소드는 배열 내에 있는 요소에 오름차순으로 접근해서 주어진 함수를

호출할 결과를 모아 새로운 배열로 반환한다.

 

 

＊각각의 요소를 실행하고 싶을 때에는 forEach()

 Array.prototype.forEach() 메소드는 배열의 각 요소에 콜백을 1회 씩 실행한다.

map() 메소드는 새로운 배열을 만드는 반면 foreach()는 순회만 한다는 차이가 있다. 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.foreach(i => console.log(i));
//output : 1
//output : 2
//output : 3
//output : 4
//output : 5
//output : 6
//output : 7
//output : 8
//output : 9
//output : 10
 

 

＊각 요소에 누적해주며 실행하고 싶을 때에는 reduce()

Array.Prototype.reduce() 메소드는 배열 내의 각 요소에 주어진 reduce 함수를 실행하고 

단 1개의 결과값을 반환한다.

해당 메소드는 4개의 매개변수를 갖는다.

바로 직전 콜백함수의 반환값을 누적하는 누적값,

순회를 돌고 있는 현재값,

현재 돌고있는 요소의 index,

array전체이다.   보통 index와 array는 생략하고 많이 사용한다.

(reduce를 잘 사용할까? 라는 의심이 들긴한다. 생소해서그런가)

//구조
arr.reduce((accumulateValue, currentValue, currentIndex, array) => function);

 

＊배열을 합치거나 새로운 요소를 추가할 때에는 concat()

Array.prototype.concat() 메소드는 매개변수로 주어진 값 또는 배열을 이용해서

새로운 배열을 만들 수 있고 기존배열에 새로운 요소를 추가할 수도 있다.

주로 배열을 합치고자 할때 자주 사용된다.

기존의 배열을 변경하지않으며 새로운 배열을 반환한다는 특징이 있다.

const cafe = ['coffee'];
console.log(cafe.concat(['cake']));    //output : ['coffee', 'cake']
console.log(cafe);    //outout : ['coffee']