[Javascript] 배열 메소드 정리

arr.push() : arr배열 맨 뒤에 원소 삽입

---

arr. pop() : arr배열 맨 뒤 원소 삭제

---

arr.unshift() : arr배열 앞에 삽입

---

arr.shift() : arr배열 맨 앞 삭제

---

arr.splice(n,m) : 특정 요소 지움

n : 시작위치 index,

m : 개수

let arr = [1,2,3,4,5];  
arr.splice(1,2);	// 인덱스번호 1번부터 2개를 지워라 (2,3 지워짐)
console.log(arr);   //[1,4,5]

arr.splice(n,m,x) : 특정 요소 지우고 추가

let arr = [1,2,3,4,5];
arr.splice(1,3,100,200); //인덱스번호1번부터 3개를지우고 1번자리부터 100과 200을 추가
console.log(arr); 		//[1,100,200,5]

let arr = ["나는", "철수", "입니다"];
arr.splice(1,0,"대한민국","소방관");	//1번자리부터 0개지우고 1번자리부터 대한민국 소방관 추가
console.log(arr) 	//["나는","대한민국","소방관","철수","입니다"]

arr.splice() : 삭제된 요소 반환

let arr = [1,2,3,4,5]
let result = arr.splice(1,2)  //삭제할 값을 변수에 지정하면
console.log(arr)  // [1,4,5]
console.log(result)//[2,3]		//삭제된 요소를 반환시킬 수 있다.

---

arr.slice(n,m) : n부터 m까지 반환

let arr = [1,2,3,4,5]
arr.slice = (1,4) //[2,3,4]		//인덱스 1부터 4번앞까지 반환

let arr2 = arr.slice();			//괄호안에 아무것도 안넣으면 배열이 복사됨
console.log(arr2)  //[1,2,3,4,5]

---

arr.concat(배열2,배열3 ..)  : 합쳐서 새 배열 반환

let arr = [1,2]
arr.concat([3,4]); // [1,2,3,4]  배열요소가 안에 추가됨
arr.concat([3,4],[5,6]); // [1,2,3,4,5,6] 배열,배열 도 하나가 됨
arr.concat([3,4],5,6); // [1,2,3,4,5,6] 배열,숫자,숫자 해도 하나의 배열이 됨

---

arr.forEach(fn) : 배열 반복

let users = ['Mike','Tom','Jane'];

users.forEach((item, index, arr) => {  
	
});

item : 배열안의 요소
index : 인덱스번호
arr : 사용하는 해당 배열 -->잘 입력하지 않음

arr.forEach((name,index)=>{
 console.log(`${index+1}. ${name}`)			
})

// 1.Mike		--> 이처럼 배열안에 넣은 함수가 각각 요소를 적용해서 따로 나옴 for문처럼!
// 2.Tom
// 3.Jane

---

arr.indexOf / arr.lastIndexOf   : 해당 요소가 포함된 인덱스 번호 반환

let arr = [1,2,3,4,5,1,2,3]
arr.indexOf(3);  //2  첫번째로 찾은 요소의 인덱스 번호만 반환
arr.indexOf(3,3) //7  두개를 넣으면 두번째로 찾은 인덱스 번호도 반환
arr.lastIndexOf(3) //7  뒤에서 부터 첫번째 인덱스만 반환

---

arr.includes() : 배열에 값이 포함되어 있는지만 확인

let arr = [1,2,3]
arr.includes(2); //true
arr.includes(8); //false

---

arr.find(fn)  /  arr.findeIndex(fn)  :  indexOf와 찾는다는 의미는 같지만 함수를 넣어 복잡한것도 찾음

 

** 첫번째 true값만 반환하고 끝, 만약 없으면 undefined를 반환하고 끝

let arr = [1,2,3,4,5]

const result = arr.find((item)=>{
	return item % 2 === 0;
});
//item 이 짝수이면 반환 (item은 각 요소가 순차적으로 들어감)
console.log(result) //2
-------------------------------------------------------------
let userList = [
	{ name:"Mike", age: 30 },
    { name:"Jane", age: 27 },
    { name:"Tom", age: 10 },
];

userList.find((user)=>{
	if(user.age<19){		//user요소에서 user.age를 찾음 
    	return true;
    }
    return false;
});
console.log(result)	//{ name:"Tom", age: 10 }   해당하는 배열값이 나옴

//findIndex로 바꾸면 해당 인덱스 번호를 알려줌
//해당하는 자료가 여러개 여도 딱 첫번째 만나는 한개만 찾아준다.

---

arr.filter(fn) : find는 딱 하나만 찾아주기 때문에 조건을 만족하는 모든것을 찾아주려면 filter를 사용

***만족하는 모든 요소를 배열로 반환

let arr = [1,2,3,4,5,6]

const result = arr.filter((item)=>{
	return item % 2 === 0;
});
//item 이 짝수이면 반환 (item은 각 요소가 순차적으로 들어감)
console.log(result) // [2,4,6]   find였다면 2 만 나오고 끝났음

---

arr.reverse() : 역순으로 재정렬

let arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1]

---

arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
	{ name:"Mike", age: 30 },
    { name:"Jane", age: 27 },
    { name:"Tom", age: 10 },
];

let newUserList = userList.map((user, index) =>{	//user는 각각의배열원소
 return Object.assign({}, user, {					//새로운 객체를 만들어서 리턴
 	id: index + 1,									//병합할 객체 조건
    isAdult: user.age>19,
 })
})
//Object.assign 설명 : (타겟,객체,객체.....)
// 여기서 타겟은 빈 객체로 주었음
// 여기서는 두번째 객체로 유저값 (userList의 각 배열)
// 세번째 객체로 {id: index+1, isAdult: user.age>19} 를 주었음
// 이 세개의 객체가 순서대로 병합되는것임
// for문이 하나씩돌아가는것처럼 map에서 원소 한개씩(여기선 하나의 객체씩) 순차적으로 
// 콜백되면서 함수를 실행하므로 함수가 작업된 하나하나의 원소가 된 새로운 배열이 탄생
// 쉽게 말해서 각 원소에 함수를 적용하여 복사한 것이 됨

console.log(newUserList) id와 isAdult가 추가됨 배열안의 객체에 추가되어 새 배열이됨
//0: {name: "Mike, age: 30, id: 1, isAdult: true}
//1: {name: "Jane, age: 27, id: 2, isAdult: true}
//2: {name: "Tom, age: 10, id: 3, isAdult: false}

console.log(userList) 기존 배열은 똑같음
//0: { name:"Mike", age: 30 }
//1: { name:"Jane", age: 27 }
//2: { name:"Tom", age: 10 }

---

join, split : 배열을 합쳐서 문자열 작성,  문자열을 분리해 배열을 작성

let arr = ["안녕", "나는", "철수야"]
let result = arr.join() //안녕,나는,철수야  아무것도 안넣으면 쉼표로 구분되어 문자열이됨
let result = arr.join(" ") //안녕 나는 철수야  공백을 넣으면 공백으로 구분되어 문자열이됨
let result = arr.join("") //안녕나는철수야  따옴표만 넣으면 문자가 다 붙어버림

let users = "Mike,Jane,Tom,Tony"
let str = 'Hello, My name is Mike.'
let result = users.split(",")  //["Mike, "Jane", "Tom", "Tony"]
let result2 = str.split("")   //["H", "e", "l", "l", "o", ",", " "...]
//그냥 따옴표만 넣는 경우 각문자열(공백과 쉼표등등모두)을 모두 분리하여 배열을 만듬

---

Array.isArray()  :  객체나, 배열은 typeOf로 검색하면 모두 Object로 나오므로 배열확인은 이걸로 확인해야함

let user = {
 name: "Mike",
 age: 30,
};

let userList = ["Mike","Tom","Jane"]

console.log(typeOf user)		//object
console.log(typeOf userList)	//object  배열도 객체로 나옴

console.log(Array.isArray(user))		//false
console.log(Array.isArray(userList))	//true

---

arr.sort() / arr.reduce()  :  sort는 배열 재정렬이 된다.(배열자체가 변해버림)

let arr = ["a","c","d","e","b"]
arr.sort()  //["a","b","c","d","e"]

let arr = [27, 8, 5, 13]
arr.sort()  //[13,27,5,8]  -->문자열로 취급 후 앞글자만 보고 정렬함
*제대로 나열하려면 값을 비교 할 수 있는 함수를 넣어야함 sort는 함수를 인수로 받음

function fn(a,b){	//두 요소를 비교하고 크기를보고 양수인지 음수인지 0인지만 보면 됨
 return a-b			
}
arr.sort(fn)  // [5,8,13,27]  값 비교 함수를 넣으니 잘 됨

arr.sort((a-b)=>{  //이렇게 사용해도 위와 동일함!
 return a-b
})

*위 함수 설명
arr.sort((a,b)=>{
 console.log(a,b)	//실제로 콘솔에 a,b를찍으면 b가 앞 인덱스, a가 뒤 인덱스이다
 return a - b		//따라서 이건 뒤 빼기 앞 이 되는것이다. 이게 음이면 앞 수의 앞에 보냄(앞이 더 크기때문)
})					
//콘솔을 찍으면 아래처럼 나옴 (인덱스 순서로 뒤에거 빼기 앞에거)
				27, 8, 5, 13  처음
//8 27     		8, 27, 5, 13  8-27= 음수므로 27앞으로 보냄
//5 8			5, 8, 27, 13  5-8  음수이므로 8앞에 5를 보냄
//13 5			5, 8, 27, 13  13-5 양수이므로 변화없음
//13 8			5, 8, 27, 13  13-8 양수이므로 변화 없음
//13 27      	5, 8, 13, 27  13-27 음수이므로 13을 27 앞으로 보냄
//첫 시작부터 뒤에거 빼기 앞에거 해서 음인경우 자리를 바꿈(앞이 더 큰수이기 때문)

보통은 Lodash 같은 라이브러리를 사용함
_.sortBy(arr) 을 사용함  (학습필요)



let arr = [1,2,3,4,5,6]
let result = arr.redue((누적된계산값, 현재값)=>{
 return 누적된계산값 + 현재값;
},0)   //0은 초기값, 넣고싶은 다른 초기값을 넣어서 사용

let userList = [
 { name: "Mike", age: 30 },
 { name: "Tom", age: 10 },
 { name: "Jane", age: 27 },
 { name: "Sue", age: 26 },
 { name: "Harry", age: 42 },
 { name: "Steve", age: 60 },
];

let result = userList.reduce((prev,current)=>{ //아래에 prev는 초기값으로 빈배열을넣음
 if(current.age>19){		 //만약 현재배열에 나이가 19 이상이면
  prev.push(current.name);	 //prev에 현재 이름을 푸쉬하라
  }
  return prev;				 // prev 리턴
 }, [])
 
 console.log(result) //["Mike", "Jane", "Sue", "Harry", "Steve"]
 
 
 만약 나이 합을 구하려 했다면?
 
 let result = userList.reduce((prev,current)=>{  //아래 초기값을 0으로 두고
  prev+= current.age				// prev에 현재 나이들을 계속 더해감
  return prev;				        //196     prev는 누적값임
 }, 0)

 

 

출처 유튜브 코딩앙마 https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88

코딩앙마