Javascript 구문과 내장 메서드를 사용하면 코드에서 불필요한 줄을 많이 줄이고 짧고 쉽게 읽을 수 있는 코드를 작성할 수 있습니다. 이 게시물에서 우리는 웹 개발에서 마주하게 되는 몇 가지 일반적인 사용 사례와 문제에 대한 한 줄 솔루션을 작성할 수 있는 곳을 보기 위해 이 단순함을 한 단계 더 발전시키고자 합니다. 주저하지 말고 이 15가지 Javascript 원 라이너를 통해 애플리케이션을 위한 빠르고 간단한 코드를 작성하십시오.
split, join, 및 reverse메서드를 사용하여 한 줄의 문자열을 뒤집을 수 있습니다 .const stringReverse = str => str.split("").reverse().join("");
stringReverse("Welcome to Javascript")숫자 배열의 평균 구하기
Javascript 감속기를 사용하면 한 줄에 있는 배열 수의 평균을 계산할 수 있습니다.
const average = arr => arr.reduce((a, b) => a + b) / arr.length
average([21, 56, 23, 122, 67])
//57.8Reduce 방법은 숫자 배열에서 합 또는 최대값을 찾는 것과 같은 여러 문제에 대한 한 줄 솔루션을 작성할 때 매우 유용합니다.
지난 7일의 배열 가져오기
프로그램에서 지난 7일(오늘 포함)의 배열을 사용하시겠습니까? 이 Javascript 코드는 한 줄로 배열을 쉽게 생성합니다.
const pastWeek = [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days))빼기 대신 더하기 기호를 사용하면 다음 7일이 포함된 배열을 얻을 수 있습니다. 그리고 지난 주의 날짜만 필요한 것은 아닙니다. Date.now()를 대체하여 날짜 전후 7일의 날짜를 가져올 수 있습니다.
여기에 사용된 86400000은 하루의 밀리초 수입니다.
문자열을 대문자로
Javascript는 내장된 대문자 사용 방법을 제공하지 않지만 문자열을 대문자로 표시하는 자체 방법을 작성하는 데는 한 줄만 필요합니다.
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("javascript one-liners are fun")배열에서 중복 제거
Javascript의 집합은 고유한 항목만 저장한다는 것을 알고 있습니다. 이 동작을 유리하게 사용하여 배열에서 중복 항목을 제거할 수 있습니다. 그러나 기본 데이터를 저장하는 배열에서만 작동합니다. 따라서 객체를 저장하는 배열에서 중복을 제거하려면 여러 줄 솔루션을 작성해야 합니다. 그러나 여전히 간단한 시나리오에서 중복을 제거하는 것은 꽤 괜찮은 방법입니다.
const removeDuplicates = (arr) => [...new Set(arr)]
removeDuplicates([31, 56, 12, 31, 45, 12, 31])
//[ 31, 56, 12, 45 ]소수를 특정 소수 자릿수로 반올림
소수를 고정 소수점으로 반올림하는 것은 Javascript에서 까다로운 작업입니다. 내장된 toFixed() 메서드가 이 변환을 쉽게 수행할 수 있지만 부동 소수점 산술이 작동하는 방식 때문에 경우에 따라 이상한 결과를 제공합니다.
Number((2.935).toFixed(2)) //2.94
Number((12.349345).toFixed(4)) //12.2493
Number((2.5398).toFixed(3)) //2.540
Number((1.005).toFixed(2)) //outputs 1 instead of 1.01
Number((1.555).toFixed(2)) //outputs 1.55 instead of 1.56코드에서 이러한 예기치 않은 동작을 방지하기 위해 지수 표기법으로 숫자를 표시하고 Math.round()를 사용하여 주어진 소수 자릿수로 소수를 반올림할 수 있습니다.
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56임의 ID 생성
이 간단한 함수는 Math.random()을 사용하여 임의의 ID를 생성합니다. Math.random()은 생성된 모든 숫자가 고유하다고 보장하지 않으므로 이 방법은 프로덕션에서 사용하기에 100% 안전하지 않습니다. 그러나 구현을 완료하고 앱을 테스트하기 위해 신속하게 ID를 얻기 위해 개발 중에 사용하는 데에는 아무런 문제가 없습니다.
const randomID = Math.random().toString(36).substring(2)사용자가 페이지 맨 아래로 스크롤했는지 확인
사용자가 페이지 맨 아래로 스크롤할 때 무언가를 표시/실행하려면 이를 사용하여 사용자가 현재 맨 아래에 있는지 확인하십시오.
const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight요소 표시 전환
한 줄 방법으로 요소 숨기기와 표시 사이를 쉽게 전환할 수 있습니다.
const toggle = element => element.style.display = (element.style.display === "none" ? "block" : "none")임의의 16진수 색상 생성
이 메서드는 Math.random() 및 padEnd()를 사용하여 임의의 16진 코드를 생성합니다. 프로그램에서 임의의 색상을 표시하고 싶을 때마다 이것을 사용하십시오.
const hexColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')페이지 맨 위로 스크롤
scrollTo() 메서드를 사용하여 Javascript에서 페이지의 맨 위로 스크롤할 수 있습니다. 자바스크립트가 스크롤해야 하는 위치의 X 및 Y 좌표를 허용합니다. 따라서 X와 Y에 0을 전달하면 페이지 맨 위로 스크롤됩니다.
const toTop = () => window.scrollTo(0, 0)이틀 사이의 일수 구하기
이 단일 행 구현에서는 2일을 시간 기반 표현으로 변환한 다음 그 차이를 찾아야 합니다. 그런 다음 이를 하루의 밀리초 수로 나누어 일 수를 얻을 수 있습니다.
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-09-23"), new Date("2020-10-01"))
//8모든 쿠키 지우기
만료 날짜를 이미 지난 날짜로 설정하여 응용 프로그램에 저장된 모든 쿠키를 지울 수 있습니다. 따라서 만료 날짜를 Javascript 시간 시스템의 첫 번째 날짜로 설정하면 시스템이 자동으로 쿠키를 만료시킵니다. 그리고 이전 단계와 함께 쿠키에 저장된 데이터를 삭제할 수 있습니다.
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));텍스트에서 HTML 제거
사용자 입력을 수락할 때 및 기타 사용 사례에서 처리하는 텍스트에서 HTML 요소를 제거할 수 있습니다. DOMParser의 도움으로 이것은 단 한 줄입니다.
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || ''다크 모드 감지
마지막으로, 사용자가 브라우저에서 다크 모드를 활성화했는지 여부를 감지하려면 이 한 줄 솔루션을 사용하십시오.
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches