[1124] javascript 이미지 선택시 대표사진으로 지정하기 , 썸네일 선택기능 (feat. javascript map / splice )

배열안에 담겨있는 이미지를 선택시 해당 이미지를 썸네일로 설정하도록 하는 기능 만들기

1. splice를 이용해 배열의 순서를 바꿔주는 함수 이용했다.

2. 내가 선택한 사진의 인덱스를 직접적으로 구하지 않아도 가능하도록 만들었다.

 

 

 

 

 

💙 splice 함수 

 

 

 

💙 splice 를 이용해 배열 순서 바꾸는 함수 만들기

const img = ["img1", "img2", "img3", "im4", "img5"]

const changeArrayOrder=(list,targetidx,moveValue)=>{
    const newPosi = targetidx+moveValue;
    const temp = JSON.parse(JSON.stringify(list))
    const target = temp.splice(targetidx,1)[0]
    temp.splice(newPosi,0,target)
    return temp;
}

console.log(changeArrayOrder(img,1,2))

 

 

해당 함수를 이용해서 기능 구현

 

🧡 실제 코드

    const imageClick = (e) => {
        console.log(imageBundle)
        for (let i = 0; i < imageBundle.length; i++) {
            if (imageBundle[i] == e.target.currentSrc) {
                return changeArrayOrder(imageBundle,i,-i)
            }
        }
    }
        
    const changeArrayOrder=(list,targetidx,moveValue)=>{
        const newPosi = targetidx+moveValue;
        const temp = list; // parse 하지 않고 그냥 배열 그대로 바로 변수에 담아줌. 이미지 url이라
        const target = temp.splice(targetidx,1)[0]
        temp.splice(newPosi,0,target)
        return temp;
    }