JavaScript - Array methods

Array

push() : 뒤에 삽입

pop() : 뒤에 삭제

unshift() : 앞에 삽입

shight : 앞에 삭제

 

arr.splice(n, m) : 특정 요소 지움. n : 시작, m : 개수

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

 

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

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200);
console.log(arr); // [1, 100, 200, 5]

let arr = ["나는", "철수", "입니다."];
arr.splice(1, 0, "대한민국", "소방관");
// ["나는", "대한민국", "소방관", "철수", "입니다."]

 

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]

let arr2 = arr.slice();
console.log(arr2); // [1, 2, 3, 4, 5]

 

arr.concat(arr2, arr3, ..) : 합쳐서 새배열 반환

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 : Mike, Tom, Jane
    // index : 0, 1, 2
    // arr : users
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
    console.log(name); // Mike Tom Jane
    console.log(`${index}. ${name}`); // 0. Mike  1. Tom  2. Jane
});

 

arr.indexOf / arr.lastIndexOf

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3) // 7 => 두번째인수 : 시작 위치(=2번째부터 시작), 첫번째 인수 : 찾는 숫자(=7번째에 3이 있음.)
arr.lastIndexOf(3); // 7 => 끝에서부터 탐색

 

arr.includes() : 포함하는지 확인

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

 

arr.find(fn) / arr.findIndex(fn)

// 예제 1
let arr = [1, 2, 3, 4, 5];

const result = arr.find((item) => {
	return item%2 === 0:
});
console.log(result); // 2

// 예제 2
let userList = [
	{name : 'Mike', age : 30 },
    {name : 'Jane', age : 27 },
    {name : 'Tom', age : 10 },
];

const result = userList.find(user) => { // find -> findIndex로 바꾸면 인덱스 출력
	if(user.age < 19) {
    	return true;
    }
    return false;
});

console.log(result); // {name : 'Tom', age : 10}

 

arr.map() ★★★★★

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

const newUserList = userList.map((user,index) => { 
	return Object.assign({}, user, {
    	id: index + 1,
        isAdult: user.age > 19,
    });
});

console.log(newUserList); 
// 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}

 

split -> 문장을 배열로 저장

const users = "Mike,Jane,Tom,Tony";
const result = users.split(","); //쉼표 기준으로 나누겠다.
console.log(result); // ["Mike, "Jane", "Tome", "Tony"]

 

arr.sort() -> 문자열 기준으로 정렬됨

let arr = [27, 8, 5, 13];

// 방법 1 :
function fn(a,b){
	return a - b; 
}
arr.sort(fn);
console.log(arr); // [5, 8, 13, 27]

// 방법 2 :
arr.sort((a,b) => {
	return a - b; // 두 수를 비교해서 작은 수가 앞으로 배열됨.
});
console.log(arr); // [5, 8, 13, 27]

* Lodash 라이브러리를 사용하면 쉬움. => _.sortBy(arr);

 

arr.reduce()

// 배열의 모든 수 합치기 : for, for of, forEach

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

// forEach를 사용했을 때 --------------------------------------
let result = 0;
arr.forEach((num) => {
	result += num;
});

console.log(result); // 15

// reduce를 사용했을 때 ----------------------------------------
const result = arr.reduce((prev. cur) => {
	return prev + cur;
}, 0) // 초기값 : 0

console.log(result);

+reduce를 이용해 새 배열 만들기

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

let result = userList.reduce((prev, cur) => {
	if(cur.age > 19){
    	prev.push(cur, name);
    }
    return prev;
}. []} // 새 배열

console.log(result); ["Mike", "Jane", "Sue", "Steve"]

 

[출처] : 코딩앙마 - 자바스크립트 중급 강좌 #7 - 배열 메소드

https://www.youtube.com/watch?v=pJzO6O-aWew&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=7