프로그래밍 언어/JavaScript 18

JavaScript) 원하는 위치로 이동하기, 특정 위치로 이동. 스크롤 이동. 자바스크립트 scrollTo

스크롤 이동 scrollTo 는 특정 위치로 이동시켜주는 함수다. scrollTo(가로, 세로) 지금 네이버를 켜서 콘솔창에 찍어보면 바로 이동한다. window.scrollTo(0, 3000) 이 함수는 더 자세히 적을수도있는데 window.scrollTo({top: 3000, behavior:'smooth'}) 이렇게도 쓸 수 있다. 옵션인 behavior은 어떻게 이동할지에 대한 옵션으로, smooth: 스크롤이 부드럽게 움직인다. instant : 스크롤이 바로 해당지점으로 움직인다. auto : 기본 움직임 전체 브라우저 스크롤과 DIV내의 스크롤 window.scrollTo는 전체 브라우저의 스크롤을 조절하고, div.scrollTo는 해당 요소 내에서만 스크롤을 조절한다. ex) docume..

JavaScript) 객체 키 이름으로 정렬. Object Key 값으로 정렬

데이터를 가공하다보면 아래와 같이 키 이름이 정렬이 안되어있을때가 있다. 이 Object를 키 이름 순으로 정렬하려고 한다. ex) TOTALTM -> price01 -> price02 -> price03 -> 결제상태 그 전에, Object가 아닌 배열 하나의 정렬 부터 해보자면 아래와 같이 할 수 있다. let test = {"TOTALTM":1, "price02":20, "price03":1000, "price01":200, "결제상태":"주문완료"} Object.keys(test).sort().reduce((n,key) => { n[key] = test[key]; return n; }, {} ); 1) Object.keys() : 배열의 키 만 모아서 배열로 반환한다. ex) Object.keys..

JavaScript) 객체 키 이름 변경하기

예제 let testObject = [ { num : 1, name : '선물상자', price : 1000, count : 10 }, { num : 2, name : '선물포장', price : 700, count : 5 }, { num : 3, name : '볼펜', price : 1500, count : 7 }, { num : 4, name : '모니터', price : 2000, count : 15 }, { num : 5, name : '과자', price : 2000, count : 20 }, { num : 6, name : '선물리본', price : 300, count : 21 } ] 위 예제에서 name => "이름", price => "가격" 등 특정 출력을 위해 키 이름을 변경하고자 한..

JavaScript) 자바스크립트 객체 내 같은 값 찾기, 추출하기. 특정 값 추출하기, 객체 특정 값 기준으로 정렬하기. 객체 정렬

예시 let testObject = [ { num : 1, name : '선물상자', price : 1000, count : 10 }, { num : 2, name : '선물포장', price : 700, count : 5 }, { num : 3, name : '볼펜', price : 1500, count : 7 }, { num : 4, name : '모니터', price : 2000, count : 15 }, { num : 5, name : '과자', price : 2000, count : 20 }, { num : 6, name : '선물리본', price : 300, count : 21 } ] 특정 값을 가진 객체만 출력하기 [객체].filter( f => f.[키값] == [조건] ); ex) te..

JavaScript) 자바스크립트 리스트(배열), 문자열 포함 여부 확인

예시 let str = '나는 오늘도 출근을 한다 나는' let arr = ['사과', '바나나', '수박', '딸기', '홍시'] 1. indexOf(찾는값) : 찾는 값의 첫번째 인덱스를 반환하고, 없으면 -1을 반환한다. str.indexOf('오늘도')// 3 str.indexOf('나는')// 0 str.indexOf('오늘도도')//-1 arr.indexOf('사과')//0 arr.indexOf('수박')//2 arr.indexOf('토마토')//-1 2. includes('찾는값') : 찾는 값이 있으면 true, 없으면 false를 반환한다. str.includes('오늘도')// true str.includes('얍')// false arr.includes('사과')// true arr...

JavaScript) 객체(Object) 내 배열에서 중복 값 찾아서 제거하기

객체 내부에서 중복 값 찾기. 예를 들면 아래 같은 객체에서 id가 100으로 같은 배열 중 최근에 만든 것만 살리기! let exArr = [ { id: 99, text:'가', regdate:'2023-08-09' }, { id: 100, text:'나', regdate:'2023-08-10' }, { id: 100, text:'다', regdate:'2023-08-11' } ]; 세가지 방법이 있다. 반복문돌려서 찾기, reduce, filter 1. 반복문 돌려서 찾기 원초적인(?) 방법으로 반복문을 돌려서 같은 값이 있는 맵을 따로 빼두고 제거하는 방법이다. let prevIdx = 0; for(let i=1; i { if(acc.findIndex(({id}) => id === current.i..

JavaScript) 자바스크립트 글자 변경, 여러개, 공백제거

자바스크립트에서 글자를 변경하는 공식은 아래와 같다. replace(변경하고싶은문자, 변경할 문자) 이렇게 도 -> 만으로 글자를 변경할 수 있다. 하지만 원본 텍스트가 바뀌는 것은 아니다. 다시 test를 출력해보니 그대로 "도"로 출력이 되는데, 원본 텍스트를 바꾸려면 바꾼것을 다시 넣어줘야한다. test = test.replace("도", "만") [공백제거] 보통 로그인 기능을 만들때 사용자가 자신도모르게 공백이 들어가는 경우가 있어 공백을 제거하는 과정을 넣는게 좋다. 공백을 제거할때도 replace를 써서 활용할 수 있다. 문자열.replace(/\s/gi, "") [여러글자 한꺼번에 치환] 문자열.replace(/ 글자1 | 글자2 | 글자3 /gi, "변경할 글자") [replace 사용방..

JavaScript) 자바스크립트 날짜와 시간 사용하기

자바스크립트의 내장객체중 하나로, 날짜와 시간정보를 제공한다. 날짜 객체는 월을 표현할때 0~11 로 표현하므로 1월이 0, 12월이 11이고, 요일은 일(0) ~ 토(6) 으로 표현한다. 1. 현재 날짜 형식: 요일 월 일 연도 시:분:초 let day = new Date(); document.write(day); // Sat Jan 29 2022 20:26:38 GMT+0900 (한국 표준시) Date()에 어떤 형태로 날짜를 넣냐에 따라 다르게 출력된다. var day2 = new Date("2022/1/1"); // Sat Jan 01 2022 00:00:00 GMT+0900 (한국 표준시) var day3 = new Date(2022,1,1); // Tue Feb 01 2022 00:00:00 ..

반응형