11가지 놀라운 JavaScript One-Liner!

전문 개발자에게 좋은 인상을 주고 싶다면 어떻게 하시겠습니까? 간단합니다. 간단한 논리와 가능한 한 적은 코드를 사용하여 복잡한 문제를 해결합니다. ES6 화살표 기능의 도입으로 우아하고 단순해 보이는 한 줄의 코드 작성이 가능해졌습니다.

이 글에서는 드물지만 강력한 11가지 단답형 문장을 여러분과 공유하겠습니다. 준비됐나요? 첫 번째부터 시작하겠습니다!

1. 문자열의 문자 수 가져오기

문자 수 가져오기는 여러 상황에서 유용할 수 있는 유용한 유틸리티입니다. 이를 사용하여 공백 수와 단어 수를 얻거나 문자열의 특정 구분 기호 수를 얻는 데 사용할 수 있습니다.

const characterCount = (str, char) => str.split(char).length - 1

아이디어는 매우 간단합니다. 전달된 인수 char을 사용하여 문자열을 분할하고 반환된 배열의 길이를 가져옵니다. 문자열이 분할될 때마다 분할기보다 문자열이 하나 더 많기 때문에 1을 빼면 문자 수 한 줄이 됩니다.

2. 객체가 비어 있는지 확인하기

객체가 비어 있는지 확인하는 것은 실제로 보이는 것보다 훨씬 어렵습니다. 객체가 {}와 같은지 확인하는 모든 검사는 객체가 비어 있는 경우에도 false를 반환합니다.

다행히도 아래 코드 한 줄이 우리가 원하는 기능을 정확히 수행합니다.

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

이 줄에서는 객체의 키 길이가 0인지, 그리고 전달된 인수가 실제 객체인지 확인합니다.

3. 일정 시간 동안 기다린 후 실행합니다.

이 한 줄의 코드에서는 일부 비동기 프로그래밍을 접하게 됩니다. 아이디어는 간단합니다.

코드를 실행하는 동안 일정 시간 동안 기다리려면 다음과 같은 기다림 한 줄이 있습니다.

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

대기 한 줄에서는 약속을 만들고 주어진 시간 후에 해결합니다. setTimeout 함수를 사용하여 시간을 측정합니다.

4. 두 날짜 사이의 날짜 차이 구하기

날짜는 쉽게 계산할 수 있는 개념이 많기 때문에 웹 애플리케이션을 개발할 때 종종 가장 혼란스러운 부분입니다.

두 날짜 사이의 날짜 차이를 계산하는 강력한 단일 라이너입니다. 하지만 할 일이 더 있습니다. 저처럼 여러분도 자신만의 단일 선을 만들어 월별, 연간 차이 등을 계산할 수 있습니다.

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

이 한 줄짜리 논리는 이해하기 쉽습니다. 두 날짜를 뺄 때 반환 값은 밀리초 단위의 차이입니다. 밀리초를 일로 변환하려면 각각 밀리초, 초, 분, 시간으로 나누어야 합니다.

5. 다른 URL로 리디렉션

실제 웹사이트를 만들어본 적이 있다면 인증 로직을 접해 보셨을 것입니다. 예를 들어 관리자가 아닌 사용자는 /admin 경로에 액세스할 수 없어야 합니다. 사용자가 시도하면 다른 URL로 리디렉션해야 합니다.

이 한 줄짜리 내용은 위에서 언급한 상황에 정확히 적용되지만 더 많은 사용 사례를 찾을 수 있다고 생각합니다.

const redirect = url => location.href = url

location은 전역 창 개체에 대한 메서드입니다. href 속성을 설정하면 사용자가 링크를 클릭할 때와 동일하게 동작합니다.

6. 장치에서 터치 지원을 확인하세요

점점 더 많은 장치가 인터넷에 연결될 수 있으므로 반응형 웹 사이트를 만들 필요성이 점점 더 커지고 있습니다. 20년 전에는 개발자들이 웹 사이트의 데스크톱 버전을 고려했지만 오늘날 웹 트래픽의 50% 이상이 터치 장치에서 발생합니다.

따라서 기기의 터치 지원을 기반으로 조치를 취하는 것은 매우 중요한 개념입니다.

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

이 줄에서는 문서가 터치스타트 이벤트를 지원하는지 확인합니다.

7. 요소 뒤에 HTML 문자열을 삽입하세요.

웹 애플리케이션을 개발할 때 JavaScript를 사용하여 DOM을 업데이트하는 것은 매우 일반적인 일입니다. 작업을 완료하는 몇 가지 기본적인 방법이 있지만 상황이 복잡해지면 극복하기 어려울 수 있습니다.

이것은 HTML 요소 바로 뒤에 HTML 문자열을 삽입하는 한 줄의 코드입니다. 몇 분 동안 생각하고 인터넷 검색하면 이 한 줄의 이전 버전을 찾을 수 있을 것이라고 확신합니다.

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

8. 배열 섞기 개발 중에 데이터 집합을 섞는 것은 언제든지 발생할 수 있는 일반적인 상황입니다. 불행하게도 JavaScript에는 배열에 대한 기본 제공 방법이 없습니다. 하지만 매일 사용할 수 있는 한 줄짜리 셔플은 다음과 같습니다.

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

它利用数组的排序方法，在数组的前一个元素之前或之后进行随机排序。

9、在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

const getSelectedText = () => window.getSelection().toString()

10、 获取一个随机布尔值

在编程时，尤其是在编写游戏时，有时你会想要随机采取行动。在这种情况下，下面的单行非常方便。

const getRandomBoolean = () => Math.random() >= 0.5

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是，例如，如果你想获得一个概率为 70% 错误的随机布尔值，那么，你可以简单地将 0.5 更改为 0.7，依此类推。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和；然后除法给出平均值。

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length

在平均单行中，我们使用 reduce 来获取一行中的数组的总和，而不是使用循环。然后，我们将其除以数组长度，这是数组的平均值。

写在最后

今天的内容，就是这样，现在，我想你已经了解了 11 个简单但功能强大的 JavaScript 单行程序。我试着选择那些不是很受欢迎和知名度的东西，这样你就可以学习新东西。我每天都在使用它们，我想对你也会有所帮助。

感谢你的阅读，如果你喜欢它，一定要点赞，如果你对这篇文章有什么想说的，请在留言区告诉我们。

翻译： 杨小二

英文：

https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301