JS 기초 ) Array(배열메소드) - splice / slice / includes / find / map / join / split

 

# Array 관련 기초 함수

push()	뒤에 삽입
pop(0	뒤에 삭제
unshift()	앞에 삽입
shift()	앞에 삭제

# Array 관련 추가 함수

arr.splice(n,m) : 특정요소 지움 (n부터 시작하여 m개를 지움)

→ 삭제된 요소를 반환한다.

arr.splice(n,m,x) : 특정요소 지우고 채움 (n부터 시작하여 m개를 지우고 x를 추가)

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

let arr2 = [1,2,3,4,5];
arr2.splice(1,3,100,200);

console.log(arr2); // [1,100,200,5]

let arr3 = ["난", "열심히", "공부한다"]
arr3.splice(1,0,"오늘도","똑같이")

console.log(arr3); // ["난","오늘도","똑같이", "열심히", "공부한다"]

arr.slice(n,m) : n부터 m까지 반환 (m은 포함하지 않고 바로 앞자리까지만 반환)

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

arr.concat(arrr2,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) => {
    // ..
});

//Mike 0 users
//Tom  1 
//Jane 2

예시)

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

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

 

arr.indexOf(찾는값) : 해당요소의 인덱스 위치를 반환

arr.indexOf(n,m) : m의 위치에서 시작하여 n의 위치를 반환

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() : 포함하는지 확인(인덱스반환 X)

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

 

arr.find(fn) 

arr.findIndex(fn) 

: 복잡한 함수 등을 활용하여 찾기 가능하다.

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

예시1)

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

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

console.log(result);

예시2)

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

const result = userList.find((users) => {
    if(users.age < 19){
        return true;
    }
    return false;
})

console.log(result);

 

arr.filter(fn) : 만족하는 모든 요소를 배열로 반환

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

const result = arr.filter((item) => {
    return item % 2 === 0;
});

console.log(result);

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

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

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

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

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

console.log(newUserList)
console.log(userList)

# 배열 합치기

arr.join("합치는사이에 들어갈 값")

arr.split("자르는 기준이 되는 값")

// join

let arr = ["안녕", "나는", "공부중이야"];

let res = arr.join(" ");

console.log(res);

// split

const userlist = "Mike, Jane, Tom, Tony"

const result2 = userlist.split(",");

console.log(result2);

 

# 배열인지 아닌지 확인

Array.isArray(arr)

let userList = "Mike, Jane, Tom, Tony"
let user = {
    name : "Mike",
    age : 30.
};

console.log(typeof user);
console.log(typeof userList);

console.log(Array.isArray(userList));
console.log(Array.isArray(user));