자바스크립트 Array 함수

5tr1ker·2022년 4월 5일
0
post-thumbnail

join() 문자열 합치기

{
    const a = ['a' , 'b' , 'c' , 'd'];
    const result = a.join(' , '); // 배열에 있는 모든 값을 구분자를 통해 문자열로 반환
    console.log(result);
}

결과 : a , b , c , d

split() 문자열 나누기

{
    const a = "a , b , c , d , e";
    const result = a.split(',' , 2); // 구분자를 통해 배열로 나눠서 저장 / 반환받을 배열 크기
    console.log(result);
}

결과 : [ 'a ', ' b ' ]

reverse() 배열 뒤집기

{
    const a = ["a" ," b" , "c" , "d" , "e"];
    const result = a.reverse(); // 반대로 실행 배열 자체를 변화시킴
    console.log(a);
}

결과: [ 'e', 'd', 'c', ' b', 'a' ]

splice() 배열 자르기 / 배열 추가

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.splice(0 , 2 , 'd' , 'e'); // 배열 내 데이터 삭제 () 후 그 자리에 값 추가
    const result1 = a.splice(1 , 0 , 'aa' , 'ab'); // 1 자리에 값 추가
    console.log(a);
    console.log(result);
}

console.log(a) 결과 :
[
'd', 'aa', 'ab',
'e', 'c', 'd',
'e'
]
console.log(result) 결과
[ 'a', 'b' ]

find() 조건에 만족하는 값 찾기

{
    const a = [1,2,3,4,5]
    const result = a.find((item , index) => { // 객체 , index 번호
        return item;
    }) // 객체를 하나씩 열거 후 해당 아이템 반환
    console.log(result);

결과: 1

findIndex() 조건에 만족하는 값 위치 찾기

// findIndex 조건에 만족하는 Index위치
    const result2 = a.findIndex((item , index) => { // 객체 , 번호 
        return true;
    }) // 객체를 하나씩 열거 후
    console.log(result2);
}

결과: 0

some() 배열 내에 값 포함 여부

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.some((data) => data==='a'); // 배열 어떤 요소가 있으면 true
    console.log(result);
}

결과: true

filter() 조건에 만족하는 배열 반환

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.filter((data) => {
        if(data === 'a' || data === 'c' || data === 'e') {
            return data;
        }
    }); // 만족하는 배열 전개
    console.log(result);
}

결과 : [ 'a', 'c', 'e' ]

map() 배열 전개 후 새 배열 만들기

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.map((data , index ) => {
        return Object.assign( {} , {
            id : index + 1,
            data : data + 'P'
        });
    });
    console.log(result);
}

결과:
[
{ id: 1, data: 'aP' },
{ id: 2, data: 'bP' },
{ id: 3, data: 'cP' },
{ id: 4, data: 'dP' },
{ id: 5, data: 'eP' }
]

reduce() 배열 전개 후 기본값에 새 배열 추가하기

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.reduce((prev , curr) => prev + curr , 'reduce'); // 배열을 하나씩 열거 , 초기값 설정 
    console.log(result);
}

결과: reduceabcde

sort() 정렬

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.sort() // 정렬
    console.log(result);
}

결과 : [ 'a', 'b', 'c', 'd', 'e' ]

slice() 배열 자르기

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.slice(0,3); // 배열 자르기
    console.log(result);
}

결과 : [ 'a', 'b', 'c' ]

concat() 배열 붙히기

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.concat(['f' , 'g'] , ['h' , 'i']); // 배열 붙히기
    console.log(result);
}

결과:
[
'a', 'b', 'c',
'd', 'e', 'f',
'g', 'h', 'i'
]

push() 배열에 값 추가

unshift() 앞쪽에 배열 값 추가

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.push('f', 'g') // 배열 붙히기 result 는 총 길이 반환
    a.unshift('aaa'); // 앞에 배열 넣기
    console.log('awdawd', a);
}

결과:
[
'aaa', 'a', 'b',
'c', 'd', 'e',
'f', 'g'
]
// 하지만 shift 와 unshift 는 push pop 보다 느리다!

pop() 값 뽑아내기

shift() 앞에서 배열 뽑기

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    const result = a.pop(); // 뒤에서 하나씩 빼기
    a.shift(); // 앞에서 배열 빼기 
    console.log(a);
}

결과 : [ 'b', 'c', 'd' ]

foreach() 배열 값 전개

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    a.forEach((item , index , arr) => { // 배열값 , 인자값 , 배열 이름
        console.log(`${index + 1} : ${item}`);
    });
}

결과 :
1 : a
2 : b
3 : c
4 : d
5 : e

배열 내 값 보기

indexOf() 배열 값 위치 찾기

lastIndexOf() 뒤에서 부터 배열 값 찾기

includes() 값 포함 여부 확인

{
    const a = ["a" , "b" , "c" , "d" , "e"];
    console.log(a.indexOf('e')); // 존재하면 인덱스 번호 없으면 -1
    console.log(a.lastIndexOf('c')); // 뒤에서 부터 존재하면 인덱스 번호 
    console.log(a.includes('a')); // 존재하면 true
}

곃과:
4
2
true

Github

https://github.com/5tr1ker/javascript-es6-syntax/blob/master/arrayapi.js

profile
https://github.com/5tr1ker

0개의 댓글

관련 채용 정보