반응형 javascript91 [JavaScript] 정규식을 사용한 숫자 천단위 콤마 찍기 간단하게 정규식 포현을 활용하여 숫자의 천단위 콤마 찍기 와 천단위 콤마 제거에 대해 익혀보자. 정규식 표현식을 자세히 모르지만 인터넷에 널려있기에 기록해둔다. ▷예제1) 천단위 콤마 찍기 "1234123412345".replace(/\B(?=(\d{3})+(?!\d))/g, ","); // "1,234,123,412,345" ▷예제2) 천단위 콤마 제거하기 "1,234,123,412,345".replace(/[^\d]+/g, ""); // "1234123412345" 2021. 1. 10. [JavaScript] Object.keys() - 객체의 key 값들만 뽑아내기 스크립트에는 Object.keys() 라는 메서드를 제공해주는데 특정 객체를 대상으로 key값들만 뽑아서 배열로 반환하는 메서드이다. ▷ 구문 Object.keys(obj) 예제를 통해 알아보도록 하자. ▷ 예제1) var obj = { a: 2, b: 42, c: 4 }; Object.keys(obj); // [a, b, c] 이렇게 특정 객체의 key값들만 뽑아서 배열로 반환해주는게 있는가 하면 당연히 value값들만 뽑아서 배열로 반환해주는 메서드도 존재한다. [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 객체에 담아서 사용하다보면 key값들만 뽑아서 사용하거나 val.. 2021. 1. 10. [JavaScript] Object.assign() - 서로 다른 객체 병합하기/합치기 앞서 스크립트에서의 서로다른 문자열 또는 배열을 합치는 방법에 대해 알아봤는데 이번에는 서로 다른 객체를 병합하는 방법에 대해 알아보고자 한다. ▷ 구문 Object.assign(target, ...sources) target: 기준이 될 객체를 의미한다. sources : 기준이 될 객체에 합치려는 객체들을 의미한다. 이제 예제를 통해 알아보도록 하자. ▷ 예제1) 기존의 객체 변수에 병합하기 var mine = {a : 0 , b : 1}; var it = {b : 3, c : 7}; Object.assign(mine, it); // mine = {a: 0, b: 3, c: 7} 위 구문에서 target 과 sources로 나뉘어 있다고 명시해 뒀는데, 예제와 마찬가지로 target이 되는 mine .. 2021. 1. 6. [JavaScript] concat() - 서로 다른 문자열 또는 배열 병합하기/합치기 스크립트를 사용하는 중에 서로 다른 배열 또는 문자열을 합쳐야 하는 경우가 생길 수 있는데, concat() 이라는 메서드에 대해 알아보고자 한다. 제목 그대로 문자열끼리 혹은 배열끼리 사용이 가능한 메서드이며 각각 String.prototype.concat() / Array.prototype.concat()을 의미한다. ▷ 구문 .concat(value1[, value2, value2, ..., valueN]) 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.concat() var str1 = 'mine'; var str2 = 'it'; var str3 = 'record'; console.log(str1.concat(str2, str3)); // "mineitrecord" co.. 2021. 1. 5. [JavaScript] canvas 이미지 클립보드에 복사하기 최근 html2canvas.js를 활용하여 canvas에 스크린샷을 찍어서 보여주는 기능을 만들었는데 여기에 추가적으로 클립보드에 복사할 수 있는 기능이 필요하다하여 기록해둔다. 일단 예제를 통해 접근해보자. ▷ 예제1) canvas.toBlob(function(blob){ var item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]); }); 코드는 일단 canvas에 html2canvas.js를 활용한 스크린샷 이미지가 존재한다는 가정하에 사용이 가능하며 코드 자체는 길지 않다. 다만 몇가지 주의 사항이 있는데 일단 IE에서는 사용이 불가능하다. (IE에서는 역시 되는게 없다...) 그림 출처 : https:.. 2021. 1. 4. [JavaScript] window.print() - 프린트 실행 및 프린트 실행 이전/이후 시점 제어하기 스크립트에는 window.print() 라는 메서드가 존재하는데, ctrl + p 와 동일한 기능을 제공하는 프린트 기능이다. ▷ 구문 window.print() 사실 프린트 기능만을 정리하자면 제목에 있는것처럼 window.print()만 있으면 가능하지만 당연하게도 개발을 진행하게되면 여러 상황에 직면하게 되는데 이때 유용하게 도와줄 수 있는 프린트 실행 이전/이후 시점의 처리를 도와줄 방법에 대해서도 알아보자. ▷ 예제1) window.onafterprint / window.onbeforeprint window.onbeforeprint = function () { console.log("onbeforeprint : 프린트 이전에 실행"); } window.onafterprint = function .. 2021. 1. 2. [JavaScript] arr.some() - 배열에 존재하는 값이 특정 조건을 "단 한개"라도 만족하는지 판별하는 함수 (ft. 반복문) Array.prototype.some() 이라는 배열 메서드는 대상 배열에 특정 조건에 만족하는게 "단 하나"라도 존재하는지 확인하는 메서드이다. ▷ 구문 arr.some(callback(curentValue, index, array)[, thisArg]) callback : function 안에서 조건에 맞는게 하나라도 있는지 체크하며, true/false를 반환한다. curentValue: 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array :대상 배열 thisArg : callback을 실행할 때 this로 사용하는 값. 예제를 통해 some() 메서드에 대해 알아보자. ▷ 예제1) var array = [0,1,2,3,4] array.some(function(el.. 2020. 12. 16. [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 객체에 담아서 사용하다보면 key값들만 뽑아서 사용하거나 value값들만 뽑아서 사용해야하는 경우가 생긴다. 배열에 돌려서 하나하나 뽑아 쓰기 보다는 스크립트에는 Object.values() 라는 메서드를 제공해주는데 특정 객체를 대상으로 value값들만 뽑아서 배열로 반환하는 메서드라 생각하면 된다. ▷ 구문 Object.values(obj) : Object.values() 는 파라매터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환합니다. 배열의 값들이 순서는 오브젝트의 속성을 for in 구문등으로 반복한 결과와 동일합니다. (참고로 for in 구문은 순서를 보장하지 않습니다) 예제를 통해 알아보자. ▷ 예제1) 숫자값들로 이루어진 객체 var obj = { a: 2, b: .. 2020. 12. 15. [JavaScript] arr.filter() - 배열에서 원하는 배열값들만 추려내기/반환하기 (ft. Array.prototype.filter()) 스크립트로 배열을 다룰때 많은 값들을 가진 배열에서 원하는 조건에 맞는 값들만 뽑아내 사용하고 싶을때 Array.prototype.filter() 메서드를 사용하면 손쉽게 할 수 있다. 메서드 이름 그대로 배열에 필터링을 건다고 생각하면 쉽다. ▷ 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) callback : callbackFunction 이며 function 안에서 조건에 따라 true를 반환하는 요소만 가지고 배열을 만들어준다. element : 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array : filter 함수를 사용하는 대상 배열 thisArg : callback을 실행할 때 this로 사용.. 2020. 12. 15. 이전 1 ··· 5 6 7 8 9 10 11 다음 반응형
