Javascript_메소드(map,filter,split,repeat)

1. map(메소드)

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

// mdn 예제
let array = [1, 4, 9, 16];
let 값1 = array.map(x => x * 2);
값1 = [2,8,18,32]

function 제곱(x) {
    return x**2
}
값2 = array.map(제곱);
값2 = [1,16,81,256]
값.map(Math.sqrt) = [1,4,9,16]   //square root (**0.5 한거랑 동일)
array.map(Math.sqrt).map(x=>x**3)   // 또사용할 수 있음

1-2) map 이용하기(메소드)

let data = [{
                반:1,
                번:1,
                이름:"호준",
                중간고사:55
            }, {
                반:1,
                번:2,
                이름:"길동",
                중간고사:60
            }, {
                반:1,
                번:3,
                이름:"영희",
                중간고사:30
            }, {
                반:1,
                번:4,
                이름:"철수",
                중간고사:20
            }, {
                반:1,
                번:5,
                이름:"규리",
                중간고사:100
            }
data.map(x =>x.중간고사점수)
data.map(x => [x.이름,x.중간고사점수])

let data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
let newData = data.map(a => a.map(n => n *2));

newData
[[2, 4, 6],[8, 10, 12], [14, 16, 18]]

map과 forEach의 차이

• map(value, index, array) :
  - 해당 값이 벨류로 들어가게 된다.
  - 원본 배열은 그대로 유지 리턴값들을 별도의 array로 리턴해준다.
  - 배열 만들때 사용
• forEach : 콜백함수만 실행됩니다. 배열 계산할때 사용

let sum = 0
'12367'.split('').map(value=>parseInt(value)).forEach(value =>sum += value)
//출력 19

'12367'.split('').map(value=> value+value)
// 출력  ['11', '22', '33', '66', '77']

2. filter

• 조건이 내재되어 있어서 참인것만 반환함
• 인덱스 순서대로 순회 한다.

// mdn 예제
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

글자 길이가 6보다 길때 가져온다.

let x = [2, 6, 5, 4, 8, 5, 4, 3, 2, 9];
const result = x.filter( x => x > 5);
console.log(result);

5초과인 숫자들만 가져온다

let 회원정보 = [{
    아이디 : 'jjang1',
    패스워드 : '245ddeb08bc300b46ef598908455fa417a5e266f68030cb2c83c956fd7caaf325dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    휴대폰번호 : '010-1111-2222', 
    이메일 : 'yoojin1@mmmm.com',
    가입연도 : '2020-12-2',
    주접속위치 : '125.242.161.149' ,
    성별 : '남'
    }, {
    아이디 : 'jjang2',
    패스워드 : 
    '245ddeb08bc300b46ef598908455fa417a5e266f68030cb2c83c956fd7caaf325dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    휴대폰번호 : '010-1111-2222', 
    이메일 : 'yoojin2@mmmm.com',
    가입연도 : '2021-12-2',
    주접속위치 : '125.242.161.149',
    성별 : '여'
    }, {
    아이디 : 'jjang3',
    패스워드 : '245ddeb08bc300b46ef598908455fa417a5e266f68030cb2c83c956fd7caaf325dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    휴대폰번호 : '010-1111-2222', 
    이메일 : 'yoojin3@mmmm.com',
    가입연도 : '2021-12-2',
    주접속위치 : '125.242.161.149',
    성별 : '남'
    }, {
    아이디 : 'jjang4',
    패스워드 : '245ddeb08bc300b46ef598908455fa417a5e266f68030cb2c83c956fd7caaf325dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    휴대폰번호 : '010-1111-2222', 
    이메일 : 'yoojin4@mmmm.com',
    가입연도 : '2021-12-2',
    주접속위치 : '125.242.161.149',
    성별 : '여'
    }]

회원정보.filter(el => el.성별 ==='남');
회원정보.filter(el => el.성별 ==='남' && el.가입연도.slice(0,4) === '2021');
회원정보.filter(el => el.성별 ==='남' && el.가입연도.split('-')[0] === '2021');
회원정보.filter(el => el.아이디.slice(0,5) === 'jjang');
회원정보.find(user => user.아이디 === 'jjang');

• 동시에 만족하는 것은 && 이용
• 값이 있고, 없고는 삼항 연산자로 많이 이용함
• filter와 find의 차이
  • filter : 다 돈다. 찾아도 돈다.
  • find : 찾으면 멈춘다. --> 고유한 값을 찾을 땐 효율을 위해 find 사용이 좋다!
  • 동일 아이디는 태그로 구분한다.

객체에 값이 있는지 확인하고, 해당값에 해당하는 것 찾기

let blogs = [{
        id : 1,
        title : 'title1',
        content : 'content1',
        section : '일상'
    }, {
        id : 2,
        title : 'title2',
        content : 'content2',
        section : '취미'
    }, {
        id : 3,
        title : 'title3',
        content : 'content3',
        section : '개발'
    },{
        id : 4,
        title : 'title4',
        content : 'content4',
        section : '개발'
    }];

let s = '개발'
let data = s ? blogs.filter( b =>b.sction === s) : blogs;

map과 filter 함께 사용

let male =data.map(i => {if ( i.gender == 'male') return i.age}

let male = data.filter(i =>i.gender =='male').map(i => i.age)

• 1번과 2번이 동일

3. split

• split('.') : .을 기준으로 잘라낸다.
• split(/\s/): space기준으로 잘라 낸다.
• split(''): 한글자씩 짤림
• 한글자씩 짤라서 합구하는 것
• 괄호 꼭쓰자

const n = prompt('로꾸거 로꾸거 로꾸거 말해말')
let reverseN = n.split('').reverse().join('');
console.log(reverseN)

• n을 '' 기준으로 잘라서, 거꾸로 배열한 후, 붙인다.

4. repeat

• 해당 내용을 반복해 준다.
• 문자열로 만들 수도 있고,Array를 사용해서 배열로 나눌 수 도 있다.

let s = 'abcde';
s.repeat(2)

'abcdeabcde'
Array.from(s.repeat(10))
['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e']
let a = Array[10]  //빈공간 10개 생김
Array(10).fill(0)  // 빈공간을 0으로 채워주겠다.
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Array(10).fill(0).map((value,index) =>value+index)
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]