[Javascript] 배열의 메서드2

요소 제거와 splice

배열 자체의 제거가 아닌 요소 제거는 인덱스를 참조해 제거할 수 있음

let animals = ["dog","cat","rat"]

delete animals[2] //두번째 요소인 "rat"을 삭제(삭제한 요소는 반환되지 않음)

console.log(animals) //배열의 크기는 줄어들지 않고 삭제한 요소의 자리는 비어있음

 

삭제한 요소의 자리도 완전히 삭제하고 싶을 시 splice 메서드를 사용

let animals = ["dog","cat","rat"]

animals.splice(2,1) // 인덱스 2 부터 1개의 요소 제거

console.log(animals)

rat데이터와 위치도 완전히 삭제된것을 확인

splice를 사용해 삭제한 위치에 데이터를 교체할 수도 있음

let animals = ["dog","cat","rat"]

animals.splice(2,1,"pig") // 인덱스 2 부터 1개의 요소 제거 후 "pig" 로 대체

console.log(animals)

 

slice를 사용하면 원하는 범위의 인덱스를 잘라서 복사할 수 있음

 let arr1 = ['a','b','c','d','e'];
 
 let arr2 = arr1.slice(1,3)// 1번인덱스 부터 3번인덱스 전까지 복사
 
 console.log(arr2)
 console.log(arr1) //arr1은 그대로 유지

 

 

concat

array.concat() 메서드는 기존 배열에 요소를 추가해 새로운 배열을 생성할 때 사용

let arr1 = [1,2,3]
let arr2 = [4,5,6]

let arr3 = arr1.concat(arr2)

console.log(arr3) //arr1 과 arr2가 합쳐진 새로운 배열이 생성됨
console.log(arr1) //arr1의 값은 변함없음

 

forEach

forEach는 배열의 각각의 요소에 주어진 함수를 실행할 수 있게 해줌

let countries = ["USA","UK","France","Russia","Korea"];

countries.forEach(function( item , idx , arr ){ //item:각 배열의 요소, idx:현재 배열의 인덱스
								//arr:전체 배열
	console.log(`국가:${item} , index:${idx} , 전체국가:${arr}`)
});

 

find

객체로 이루어진 배열이 있을때 find를 이용해 특정 객체를 찾을 수 있음

let players =[

	{name:"son" , age:29, team:"tot"},
    {name:"kante" , age:30, team:"chealse"},
    {name:"stones" , age:26, team:"man city"}
];

//item을 검사하여 item.team 이 "tot"인 요소 반환
let player = players.find(item => item.team === "tot"); 

console.log(player)

 

 

filter 

find 와 비슷하지만 find는 조건에 맞는 한개의 요소를 찾는 반면, filter 는 조건에 충족하는 모든 요소를 반환함

 

let players =[

	{name:"son" , age:29, team:"tot"},
    {name:"kante" , age:30, team:"chealse"},
    {name:"stones" , age:26, team:"man city"}
];

//item을 검사하여 item.age 가 30보다 작은 모든요소 반환
let player = players.filter(item => item.age < 30); 

console.log(player)

 

map

map 은 배열의 요소 전체를 대상으로 함수를 호출하고 그 결과를 배열로 반환해 줌

let nums = [1,2,3,4,5,6,7,8];

let pows = nums.map(item => {
	return item ** 2;
}) // item별로 거듭제곱을 리턴하여 pows 에 할당

console.log(pows)

 

reduce

reduce 도 위 map과 비슷하게 배열내 요소를 돌면서 새로운 요소를 반환. 하지만 reduce는 하나의 요소로 반환되고 한사이클을 돌고 난 후 다음 사이클에서 이전의 값을 사용할 수 있음

 

let arr = [1,3,5,7,9]

//각 요소별로 사이클을 돌면서 sum 에 요소를 추가해줌
// sum:이전의 값(요소를 합하고 있는 값), currval:현재 요소, 0:sum의 초기값
let val = arr.reduce(( sum , currval ) => sum + currval, 0);

console.log(val) //arr의 모든값을 합한 값을 val 에 반환

 

흐름

sum	currval	result
0	1	1
1	3	4
4	5	9
9	7	16
16	9	25

 

Array.isArray

Array.isArray() 메서드로 배열인지 여부를 확인할 수 있음

console.log(Array.isArray([1,2,3]))

console.log(Array.isArray("abc"))

 

 

배열 메서드의 'thisArg'

배열의 thisArg는 메서드에서 this 가 무엇인지 나태나 줌

let people = [
	{name:"park",age:16},
    {name:"lee",age:23},
    {name:"kim",age:53}
]

let adults = {
	minAge:20,
    getAdults(people){
    	return people.age >= this.minAge;
    }
}
	
let adt = people.filter(adults.getAdults,adults);

console.log(adt)

위의 filter 에서 두번째 매개변수로 adults 를 할당해줘서 getAdults 의 this를 adults 로 인식해 오류없이 값을 반환

 

 

let people = [
	{name:"park",age:16},
    {name:"lee",age:23},
    {name:"kim",age:53}
]

let adults = {
	minAge:20,
    getAdults(people){
    	return people.age >= this.minAge;
    }
}
	
let adt = people.filter(adults.getAdults);

console.log(adt)

thisArg인 2번째 인자를 할당하지 않을 시 첫번째 인자를 독립적인 함수로 인식하여 제대로 동작하지 않는것을 볼 수 있음

 

참조: https://javascript.info/array-methods