본문 바로가기

Coding/Javascript4

img [JS Method 기초] map과 forEach 1. map 배열의 각 요소에 대해 callback 함수를 실행하고 실행 결과를 모은 새 배열을 리턴 arr.map(callback(currentValue, index, array), thisArg) arr - 순회하고자 하는 배열 currentValue - 배열의 요소 index(생략 가능) - 현재 배열 요소의 index array(생략 가능) - map 함수를 호출한 배열 thisArg(생략 가능) - callback을 실행할 때 this로 사용되는 값(= map 함수에서 사용될 this값) var arr = [1, 2, 3, 4]; var newArr = arr.map(function(data) { return data * 2; }) console.log(newArr); // [2,4,6,8] 2.. 2022. 6. 26.
img [JS Method 기초] filter 와 sort 1. filter filter 메소드는 배열에서 조건에 맞는 요소들만 모아서 새로운 배열로 반환합니다 newArr = arr.filter((value,index,array) => function ) 새로운 배열 = 원래 배열 . filter ( (value(현재 요소), index(현재 인덱스), array(타겟 배열 객체) ) => 함수 ) 새로운 배열에 함수에 성립하는 값만 넣어준다 ! ex) 객체 배열에서 10 이상의 id를 가진 배열을 만들고 싶다 ? newArr = arr.filter( value => value.id >= 10) 위의 (value.id >= 10) 조건식이 true를 반환하는 요소들만 배열에 넣어주는 함수이다 !!! 사용 시 유의 사항 ! 원래 배열은 변하지 않는다 ! 문자열에.. 2022. 6. 19.
img [JS Method 기초] slice 와 splice 1. slice slice 메소드는 배열 내의 시작점과 끝나는 지점을 정하고, 범위에 따라 새 배열을 리턴. 시작점만 정하면 그 다음부터 시작하는 배열 생성, 음수로 시작점을 정하면, 뒤에서부터 인덱스를 셈 (문자열 사용 가능) let 새 배열 = 원래 배열 . slice ( 시작 인덱스 , 끝 인덱스(포함X) ) 원래 배열은 변하지 않음. 2. splice splice 메소드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나, 새로운 요소를 추가할떄 사용한다 (! 문자열 사용 불가) let 새 배열 = 원래 배열 . splice ( 삭제할 시작점, 삭제할 개수(안정하면 끝까지) ) before에 요소들이 삭제되고, after에 삭제된 항목이 저장된다. (원래 배열 변함) 잘 알아둬라 ! 2022. 6. 16.
img 자바스크립트 이벤트 리스너(Event Listener) Javascript 이벤트 객체 ? - DOM에서 특정 이벤트가 발생되면 Javascript 이벤트 객체에서 이를 확인할 수 있다 ! DOM 구조에서 이벤트는 매우 다양하지만 자주 쓰는 이벤트는 아래와 같다 ＃포커스 이벤트(focus, blur) ＃폼 이벤트(reset, submit) ＃뷰 이벤트(scroll, resize) ＃키보드 이벤트(keydown, keyup) ＃마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave) ＃드래그 앤 드롭 이벤트(dragstart, drag, dragleave, drop) 이벤트리스너 등록하기 ! 특정 DOM 요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다 DOM객체.addEventList.. 2022. 5. 6.
반응형

티스토리툴바