indexOf, includes, 배열, splice, slice, find, filter, map, join, reduce, 전개구문

제목이 굉장히 길어졌지만 

내가 보려고 남기는 자바스크립트

 

1. 문자열 메소드

*indexOf, includes

function hasCola(str) {

    if (str.indexOf("콜라") > -1) {

        console.log("금칙어가 있습니다.");

    } else {

        console.log("통과");

    }

}

function hasCola(str) {

    if (str.includes("콜라")) {

        console.log("금칙어가 있습니다.");

    } else {

        console.log("통과");

    }

}

hasCola("사이다가 짱"); //통과

hasCola("콜라가 최고"); //금칙어가 있습니다.

hasCola("콜라"); //금칙어가 있습니다.

- "콜라"가 있으면 0보다 크고 "콜라"가 없으면 -1이 나오기 떄문에 조건에 >-1이 필요함

- includes를 사용하면 true false로 값이 나오기 때문에 조건 없어도 됨

 

2. 배열 

* splice, slice

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

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

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

let result = arr2.splice(1,2);

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

console.log(result); // [2, 3] 삭제된 요소 반환

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

let result2 = arr3.slice(1,4);

console.log(result2); //[2,3,4]

console.log(arr3); // [1, 2, 3, 4, 5]

- splice는 원본 배열을 수정하고 slice는 원본 배열을 수정하지 않음

 

* find()

const findArr = [1,2,3,4,5,6];

const findResult = findArr.find((item) => {

    return item % 2 ===0;

})

console.log(findResult); //2 짝수인 조건에 만족하는 첫 번째 요소만 반환

const userList = [

    {name: 'mike', age: 30},

    {name: 'fike', age: 15},

    {name: 'dike', age: 10},

]

const findIndex = userList.findIndex((user) => {

    if (user.age < 19) {

        console.log(user);

        return true;

    }

    return false;

});

console.log(findIndex); //{name: 'fike', age: 15} 1 조건에 만족하는 첫 번째 요소만 반환

- find는 조건에 맞는 첫번 째 요소만 반환

 

* filter()

const filter = userList.filter((user) => {

    if (user.age < 19) {

        console.log(user);

        return true;

    }

    return false;

});

console.log(filter); // {name: 'fike', age: 15} {name: 'dike', age: 10} 해당하는 모든 요소 반환!

- find와 다르게 해당하는 모든 요소를 반환!

 

* map()

const userList = [

    {name: 'mike', age: 30},

    {name: 'fike', age: 15},

    {name: 'dike', age: 10},

]

const mapUserList = userList.map((user, index) => {

    return {

        ...user,

        id: index,

        adult: user.age > 19

    }

});

console.log(userList); //기존 배열은 그대로!

console.log(mapUserList);

// {name: 'mike', age: 30, id: 0, adult: true}

// {name: 'fike', age: 15, id: 1, adult: false}

// {name: 'dike', age: 10, id: 2, adult: false}

- map은 기존 배열을 수정하지 않음

- ...user 전개구문 사용하여 기존 배열 가져옴.

 

*join()

const joinArr = ['2023','02','20'];

const joinArray = joinArr.join('-');

console.log(joinArray);//2023-02-20

 

*reduce()

/*

    인수로 함수를 받음

    reduce((누적 계산값, 현재값) => {

        return 계산값

    });

*/

//배열의 모든 수 합치기

const reduceArr = [1,2,3,4,5];

const reduce =  reduceArr.reduce((prev, cur) => {

    return prev + cur;

}, 0); //초기값 0 안써도 상관없음

console.log(reduce); //15

const reduceList = [

    {name: 'mike', age: 20},

    {name: 'bb', age: 10},

    {name: 'gg', age: 5},

    {name: '4r', age: 50},

    {name: 'hh', age: 40},

];

const reduce2 = reduceList.reduce((prev, cur) => {

    if (cur.age > 19) {

        prev.push(cur.name);

    }

    return prev;

}, [])

console.log(reduce2); // ['mike', '4r', 'hh']

 

3. 전개구문

//... 전개구문!

const arr10 = [1,2,3];

const arr20 = [4,5,6];

const arr30 = [...arr20,...arr10]; //4, 5, 6, 1, 2, 3]

console.log(arr30);