형태의 변환

JEON HAN BIT·2023년 3월 20일
0

javaScript

목록 보기
3/6

객체 => 문자열 변환하기

let characters = [
    {name:'jeon',age:28,job:'student'},
    {name:'young',age:29,job:'nurse'},
    {name:'lux',age:34,job:'magician'},
    {name:'yasuo',age:31,job:'fighter'}
]

const valueExtracter  = (obj) => {
    return Object.entries(obj).map(([,value])=>{
        return String(value)
    }) 
}

console.log(characters.map(valueExtracter).join('구분자'));
//jeon,28,student구분자young,29,nurse구분자lux,34,magician구분자yasuo,31,fighter
console.log(JSON.stringify(characters))
//[{"name":"jeon","age":28,"job":"student"},{"name":"young","age":29,"job":"nurse"},{"name":"lux","age":34,"job":"magician"},{"name":"yasuo","age":31,"job":"fighter"}]

JSON.stringify()는 객체형태 문자열로의 변환이고,
Object.entries()를 이용해서 객체의 value만 문자열로 추출해보았다


문자열 => 객체 변환하기


const movieData = `Title,Release,Ticketing Rate,Director
보헤미안 랩소디,2018.10.31,11.5%,브라이언 싱어
완벽한 타인,2018.10.31,4.6%,이재규
동네사람들,2018.11.07,0.5%,임진순`;
class HeaderListData {
    constructor(source, separator = ','){
        const rawData = source.split('\n');

        this.headers = rawData[0].split(separator);
        this.rows = rawData
                    .filter((row, index) => index > 0)
                    .map(row => row.split(separator));
    }
    row(rowIndex){
        return this.rows[rowIndex].map((row,index)=>{
            return [this.headers[index],row]
        })
    }
    get length (){
        return this.rows.length
    }
    get columnLength(){
        return this.headers.length;
    }
}

class MakeObject extends HeaderListData{
    toObject = rowIndex =>{
        return this.row(rowIndex)
        .reduce((a, [key,value]) => ({...a, [key]: value}),{});
    }

    toAllObject = () =>{
        return Array(this.length).fill(0).map((item, index) => this.toObject(index))
    }
}

const movieList = new MakeObject(movieData);
console.log(movieList.toObject(0));
// {
//  Title: '보헤미안 랩소디',
//  Release: '2018.10.31',
//  'Ticketing Rate': '11.5%',
//  Director: '브라이언 싱어'
// }

문자열 =>형태가 다른 문자열

제시 단어를 카멜케이스 문자열로 만들기

배열연산 concept의 코드

const simpleCamel = (text,splitter=' ') => {
    return text.split(splitter).map((word,wordIndex)=>{
        return word.split('').map((char,charIndex)=>{
            return wordIndex>0 && charIndex===0 ? char.toUpperCase() : char.toLowerCase()
        }).join('')
    }).join('')
}

console.log(simpleCamel('jeon han bit'));
console.log(simpleCamel('JEON HAN BIT'));
//jeonHanBit

for문 concept의 코드

const forCamel = (text) => {
    let camelName = '';
    for(let i=0, newSpace=false;i<text.length;i++){
        if(text[i]===' '){
            newSpace=true;
            continue;
        }
        if(newSpace){
            camelName = camelName + text[i].toUpperCase();
            newSpace=false;
            continue;
        }
        camelName = camelName + text[i].toLowerCase();
    }
    return camelName; 
}

console.log(forCamel('jeon han bit'))
//jeonHanBit

객체 => 형태가 다른 객체

const sourceObj = {
    a:'피바라기',
    b:'무한의대검',
    c:'띠모',
    d:'초가스',
    e:'하이머딩거',
}
const groupInfo = {
    aGroup:['a','b'],
    bGroup:['c','d','e']
}

const target=
    {
        aGroup: { a: '피바라기', b: '무한의대검' },
        bGroup: { c: '띠모', d: '초가스', e: '하이머딩거' }
    }

sourceObj와 groupInfo를 이용해 target형태의 객체로 만들어보자.

function makeGroup(source,info){
    const merge = (a,b) => ({...a,...b})
    // 객체와 객체를 합쳐줄 리듀서

    return Object.keys(info)
    .map(group=>{
        return {[group]:info[group]
        .map(item=>{
            return {[item]:sourceObj[item]}
        }).reduce(merge,{})
        }}).reduce(merge,{})
    
}

참고한 출처

패스트캠퍼스 온라인강의 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential

0개의 댓글