기본 배열 메소드
push() : 뒤에 삽입
pop() : 뒤에 삭제
ubnshift() : 앞에 삽입
shift() : 앞에 삭제
추가 배열 메소드
-
arr.splice(n,m) : 특정 요소 지움
n : 시작, m : 개수 -
arr.splice(n,m,x) : 특정 요소 지우고 추가
특정요소를 1번과 같은 원리로 삭제 후 해당 위치에 추가해 주는 메소드 -
arr.slice(n,m) : n부터 m까지 반환
-
arr.concat(arr2,arr3 ..) : 배열끼리 합쳐서 새로운 배열 반환
-
arr.forEach(fn) : 배열 반복
함수로 3개의 인수를 받습니다. item(요소), index, arr(배열) -
arr.indexOf / arr.lastIndexOf
indexOf : 해당 값을 갖고 있는지, 몇 인덱스부터 확인할지 받은 후, 가장 첫 값의 인덱스 반환
lastIndexOf : 뒤에서 부터 확인하고 싶을 때 -
arr.includes() : 포함하는지 확인 후 true 혹은 false로 반환
-
arr.find(fn) / arr.findIndex(fn)
해당 값을 갖고있는 지 확인하여 index 값을 반환하는 것은 동일하지만, 함수를 받기 때문에 더욱 복잡한 것을 확인할 수 있습니다. (ex 짝수찾기) 주의할 점은 확인해서 있으면 첫번째 true만 반환하고 끝납니다. 없으면 undefined를 반환합니다.
findIndex는 조건에 맞는 index를 반환합니다. -
arr.filter(fn) : 함수를 받아 조건에 맞는 모든 요소를 배열로 반환
-
arr.reverse() : 역순으로 재정렬
-
arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
실무에서 많이쓰입니다. 많은 연습 부탁. arr자체를 바꾸진 않습니다. -
arr.join(구분자) : 배열을 합쳐서 문자열을 만들고 싶을 때
str.split : 문자열을 나눠서 배열로 만들어줍니다. -
Array.isArray() : 배열인지 아닌지 확인
//------1--------------
let arr1 = [1,2,3,4,5];
arr1.splice(1,2); // 1번째 부터 2개의 요소 삭제
console.log(arr1); // [1,4,5]
//------2--------------
let arr2 = [1,2,3,4,5];
arr2.splice(1,3,100,200) //
1번째부터 3개삭제 -> 2,3,4 삭제
그 자리(1번자리)에 100,200 추가
console.log(arr2); // [1,100,200,5]
//------3--------------
let arr3 = [1,2,3,4,5];
srr.slice(1,4); // [2,3,4]
//------4--------------
let arr4 = [1,2];
arr4.concat([3,4]); // [1,2,3,4]
arr4.concat([3,4],[5,6]); // [1,2,3,4,5,6]
arr4.concat([3,4],5,6); // [1,2,3,4,5,6]
//------5--------------
let arr5 = ["Mike","Tom","Jane"];
arr5.forEach((name, index) => {
console.log(`${index + 1}. ${name}`);
// 1. Mike
// 2. Tom
// 3. Jane
});
//------6--------------
let arr6 = [1,2,3,4,5,1,2,3];
arr6.indexOf(3); // 2
arr6.indexOf(3,3); // 7, 4번 인덱스부터 확인
arr6.lastIndexOf(3); // 7, 뒤에서부터 확인
//------7--------------
let arr7 = [1,2,3]
arr7.includes(2); // true
arr7.includes(8); // false
//------8--------------
let arr8 = [1,2,3,4,5];
const result = arr8.find((item) => {
return item % 2 === 0; //짝수만 반환
});
console.log(result); // 2, 2와 4 두개가 있지만 2를 찾고 반환하고 끝납니다.
let userList = [
{ name: "Mike", age: 30},
{ name: "Jane", age: 27},
{ name: "Tom", age: 12},
]
const result = userList.findIndex((user) = > {
if (user.age < 19) {
return true;
}
return false;
}
console.log(result) // 2, age 12인 Tom의 인덱스 반환
//------9--------------
let arr9= [1,2,3,4,5];
const result = arr9.find((item) => {
return item % 2 === 0; //짝수만 반환
});
console.log(result) // [2,4,6]
//------10--------------
let arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1]
//------11--------------
let userList2 = [
{ name: "Mike", age: 30},
{ name: "Jane", age: 27},
{ name: "Tom", age: 12},
];
let newUserList = userList.map((user, index) => {
return Object.assingn({},user,{
isAudelt: user.age > 19,
});
});
console.log(newUserList);
// 0: {name: "Mike", age: 30, isAdult: true}
// 1: {name: "Jane", age: 27, isAdult: true}
// 2: {name: "Tom", age: 12, isAdult: false}
//------12--------------
let arr12 = ["안녕", "나는", "철수야"];
let result = arr.join("-");
console.log(result); // 안녕-나는-철수야
const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");
console.log(result); // ["Mike","Jane","Tom","Tony"]
//------13--------------
let user = {
name : "Mike",
age : 30,
};
let userList = ["Mike","Tom","Jane"];
console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true
배열 sort() 와 reduce()
arr.sort() : 배열 재정렬, 배열 자체가 변경됨.
인수로 정렬 로직을 담은 함수를 받음
주요 문제점은 숫자도 문자로 인식해서 배열한다는 것 입니다.
Lodash 사용 -> _.sortBy(arr); 를 사용해서 정렬할 수 있습니다.
arr.reduce(fn) : 각 요소에 대해 fn을 실행하고 하나의 값으로 반환 합니다.
배열의 모든 수 합치기에 활용가능, 성인들의 나이만 배열로 만들어서 반환하기 등
인수로 함수를 받습니다. (누적 계산값,현재값) => {return 계산값};
//arr.sort() 활용
let arr = [27,8,5,13]
arr.sort((a,b) => {
console.log(a,b);
return a-b;
});
arr.sort();
console.log(arr); // [5,8,13,27]
//arr.reduce() 활용
let arr = [1,2,3,4,5];
const result = arr.reduce((prev, cur) => {
return prev + cur;
}, 0);
// 뒤에 0은 초기값을 설정해주는 것, 생략 가능합니다.
//arr.reduce() 활용2
let userList2 = [
{ name: "Mike", age: 30},
{ name: "Jane", age: 27},
{ name: "Tom", age: 12},
{ name: "Sue", age: 26},
{ name: "Harry", age: 15},
{ name: "Steve", age: 43},
];
let result = userList2.reduce((prev,cur) => {
if (cur.name.length === 3) {
prev.push(cur.name);
}
return prev;
}, []);
console.log(result) // ["Tom", "Sue"]