전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.
이 글에서는 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 한 줄 코드를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
JavaScript는 계속해서 성장하고 있습니다.
JavaScript는 가장 배우기 쉬운 언어 중 하나이며 시장의 새로운 사람들이 기술 전문가가 될
수 있는 문을 열어주기 때문입니다. (물음표 모양?) 成为技术怪才
打开了大门。(问号脸?)
的确,JavaScript可以做很多出色的事情!还有很多东西要学习。
而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事。
本文整理了一些非常有用的单行代码(20+),这些单行代码可以帮助你提高工作效率并可以帮助调试代码。
什么是单行代码?
单行代码是一种代码实践,其中我们仅用一行代码执行某些功能。
01-随机获取布尔值
此函数将使用Math.random()
方法返回布尔值(真或假)。Math.random
创建一个介于0和1之间的随机数,然后我们检查它是否大于或小于0.5。
这意味着有50/50的机会会得到对或错。
const getRandomBoolean = () => Math.random() >= 0.5; console.log(getRandomBoolean()); // a 50/50 chance of returning true or false
02-检查日期是否为周末
通过此功能,你将能够检查提供的日期是工作日还是周末。
const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1; console.log(isWeekend(new Date(2021, 4, 14))); // false (Friday) console.log(isWeekend(new Date(2021, 4, 15))); // true (Saturday)
03-检查数字是偶数还是奇数
简单的实用程序功能,用于检查数字是偶数还是奇数。
const isEven = (num) => num % 2 === 0; console.log(isEven(5)); // false console.log(isEven(4)); // true
04-获取数组中的唯一值(数组去重)
从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set,然后返回数组。
const uniqueArr = (arr) => [...new Set(arr)]; console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5])); // [1, 2, 3, 4, 5]
05-检查变量是否为数组
一种检查变量是否为数组的干净简便的方法。
当然,也可以有其他方法
const isArray = (arr) => Array.isArray(arr); console.log(isArray([1, 2, 3])); // true console.log(isArray({ name: 'Ovi' })); // false console.log(isArray('Hello World')); // false
06-在两个数字之间生成一个随机数
这将以两个数字为参数,并将在这两个数字之间生成一个随机数!
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); console.log(random(1, 50)); // could be anything from 1 - 50
07-生成随机字符串(唯一ID?)
也许你需要临时
的唯一ID,这是一个技巧,你可以使用它在旅途中生成随机字符串。
const randomString = () => Math.random().toString(36).slice(2); console.log(randomString()); // could be anything!!!
08-滚动到页面顶部
所述window.scrollTo()
方法把一个X
和Y
坐标滚动到。
如果将它们设置为零和零,我们将滚动到页面顶部。
const scrollToTop = () => window.scrollTo(0, 0); scrollToTop();
09-切换布尔
切换布尔值是非常基本的编程问题之一,可以通过许多不同的方法来解决。
代替使用if语句来确定将布尔值设置为哪个值,你可以使用函数使用!翻转当前值。非
运算符。
// bool is stored somewhere in the upperscope const toggleBool = () => (bool = !bool); //or const toggleBool = b => !b;
10-交换两个变量
下面的代码是不使用第三个变量而仅使用一行代码即可交换两个变量的更简单方法之一。
[foo, bar] = [bar, foo];
11-计算两个日期之间的天数
要计算两个日期之间的天数,
我们首先找到两个日期之间的绝对值,然后将其除以86400000(等于一天中的毫秒数),最后将结果四舍五入并返回。
const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000); console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25'))); // 199
12-将文字复制到剪贴板
PS:你可能需要添加检查以查看是否存在navigator.clipboard.writeText
const copyTextToClipboard = async (text) => { await navigator.clipboard.writeText(text); };
13-合并多个数组的不同方法
有两种合并数组的方法。其中之一是使用concat
方法。另一个使用扩展运算符(…
그리고 JavaScript를 처음 접하는 사람이든 전문 개발자이든 새로운 것을 배우는 것은 항상 좋은 일입니다.
One-liner는 단 한 줄의 코드로 특정 기능을 수행하는 코딩 연습입니다.
01 - 임의로 부울 값 가져오기
🎜이 함수는Math.random()
메서드를 사용하여 부울 값(true 또는 false)을 반환합니다. 🎜Math.random
은 0과 1 사이의 임의의 숫자를 생성한 다음 그 숫자가 0.5보다 큰지 작은지 확인합니다. 🎜이것은 맞을 수도 있고 틀릴 확률도 50/50이라는 뜻입니다. 🎜🎜🎜
// Merge but don't remove the duplications const merge = (a, b) => a.concat(b); // Or const merge = (a, b) => [...a, ...b]; // Merge and remove the duplications const merge = [...new Set(a.concat(b))]; // Or const merge = [...new Set([...a, ...b])];
02- 날짜가 주말인지 확인
🎜이 기능을 사용하면 제공된 날짜가 평일인지 주말인지 확인할 수 있습니다. 🎜🎜🎜
const trueTypeOf = (obj) => { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); }; console.log(trueTypeOf('')); // string console.log(trueTypeOf(0)); // number console.log(trueTypeOf()); // undefined console.log(trueTypeOf(null)); // null console.log(trueTypeOf({})); // object console.log(trueTypeOf([])); // array console.log(trueTypeOf(0)); // number console.log(trueTypeOf(() => {})); // function
03 - 숫자가 짝수인지 홀수인지 확인
🎜 숫자가 짝수인지 홀수인지 확인하는 간단한 유틸리티 기능입니다. 🎜🎜🎜
const truncateString = (string, length) => { return string.length < length ? string : `${string.slice(0, length - 3)}...`; }; console.log( truncateString('Hi, I should be truncated because I am too loooong!', 36), ); // Hi, I should be truncated because...
04-배열에서 고유한 값 가져오기(배열 중복 제거)
🎜배열에서 모든 중복 값을 제거하는 매우 간단한 방법입니다. 이 함수는 배열을 Set으로 변환한 다음 배열을 반환합니다. 🎜🎜🎜
const truncateStringMiddle = (string, length, start, end) => { return `${string.slice(0, start)}...${string.slice(string.length - end)}`; }; console.log( truncateStringMiddle( 'A long story goes here but then eventually ends!', // string 25, // 需要的字符串大小 13, // 从原始字符串第几位开始截取 17, // 从原始字符串第几位停止截取 ), ); // A long story ... eventually ends!
05 - 변수가 배열인지 확인
🎜변수가 배열인지 확인하는 깔끔하고 쉬운 방법입니다. 🎜🎜물론, 다른 방법도 있을 수 있습니다🎜🎜🎜
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
06 - 두 숫자 사이에 난수 생성
🎜이것은 두 숫자를 매개변수로 사용하고 이 두 숫자 사이에 난수를 생성합니다! 🎜const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
07 - 무작위 문자열 생성(고유 ID?)
🎜임시
고유 ID가 필요할 수도 있습니다. 이동 중에 무작위 문자열을 생성하는 데 사용할 수 있는 방법은 다음과 같습니다. . 🎜🎜🎜
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
08-페이지 상단으로 스크롤
🎜window.scrollTo()
메서드는 X
및 Y
를 스크롤합니다. 좌표 도착. 🎜0과 0으로 설정하면 페이지 상단으로 스크롤됩니다. 🎜🎜
// Longhand const age = 18; let greetings; if (age < 18) { greetings = 'You are not old enough'; } else { greetings = 'You are young!'; } // Shorthand const greetings = age < 18 ? 'You are not old enough' : 'You are young!';
비
연산자. 🎜🎜🎜
// Longhand if (name !== null || name !== undefined || name !== '') { let fullName = name; } // Shorthand const fullName = name || 'buddy';
10- 두 변수 교환
🎜 아래 코드는 세 번째 변수를 사용하지 않고 한 줄의 코드만 사용하여 두 변수를 바꾸는 가장 간단한 방법 중 하나입니다. 🎜🎜🎜
11- 두 날짜 사이의 일수 계산
🎜 두 날짜 사이의 일수를 계산하려면 🎜 먼저 두 날짜 사이의 절대값을 구한 다음 이를 86400000(1일과 동일)으로 나눕니다. 밀리초 단위), 마지막으로 결과를 반올림하여 반환합니다. 🎜🎜🎜
12-클립보드에 텍스트 복사
🎜PS:navigator.clipboard.writeText가 존재하는지
🎜🎜🎜
13-여러 배열 병합의 차이점
🎜배열을 병합하는 방법에는 두 가지가 있습니다. 그 중 하나는concat
메서드를 사용하는 것입니다. 다른 하나는 스프레드 연산자(…
)를 사용합니다. 🎜🎜PS: "설정" 개체를 사용하여 최종 배열에서 무엇이든 복사할 수도 있습니다. 🎜🎜// Merge but don't remove the duplications const merge = (a, b) => a.concat(b); // Or const merge = (a, b) => [...a, ...b]; // Merge and remove the duplications const merge = [...new Set(a.concat(b))]; // Or const merge = [...new Set([...a, ...b])];
14-获取javascript语言的实际类型
人们有时会使用库来查找JavaScript中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。
const trueTypeOf = (obj) => { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); }; console.log(trueTypeOf('')); // string console.log(trueTypeOf(0)); // number console.log(trueTypeOf()); // undefined console.log(trueTypeOf(null)); // null console.log(trueTypeOf({})); // object console.log(trueTypeOf([])); // array console.log(trueTypeOf(0)); // number console.log(trueTypeOf(() => {})); // function
15-在结尾处截断字符串
需要从头开始截断字符串,这不是问题!
const truncateString = (string, length) => { return string.length < length ? string : `${string.slice(0, length - 3)}...`; }; console.log( truncateString('Hi, I should be truncated because I am too loooong!', 36), ); // Hi, I should be truncated because...
16-从中间截断字符串
从中间截断字符串怎么样?
该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符
const truncateStringMiddle = (string, length, start, end) => { return `${string.slice(0, start)}...${string.slice(string.length - end)}`; }; console.log( truncateStringMiddle( 'A long story goes here but then eventually ends!', // string 25, // 需要的字符串大小 13, // 从原始字符串第几位开始截取 17, // 从原始字符串第几位停止截取 ), ); // A long story ... eventually ends!
17-大写字符串
好吧,不幸的是,JavaScript
没有内置函数来大写字符串,但是这种解决方法可以实现。
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
18-检查当前选项卡是否在视图/焦点内
此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回true
或false
const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
19-检查用户是否在Apple设备上
如果用户使用的是Apple
设备,则返回true
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
20-三元运算符
当你只想在一行中编写if..else
语句时,这是一个很好的代码保护程序。
// Longhand const age = 18; let greetings; if (age < 18) { greetings = 'You are not old enough'; } else { greetings = 'You are young!'; } // Shorthand const greetings = age < 18 ? 'You are not old enough' : 'You are young!';
21-短路评估速记
在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。
// Longhand if (name !== null || name !== undefined || name !== '') { let fullName = name; } // Shorthand const fullName = name || 'buddy';
希望对你有所帮助!
英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc
更多编程相关知识,请访问:编程入门!!
위 내용은 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.

Django는 빠른 개발과 깔끔한 방법을 강조하는 Python으로 작성된 웹 애플리케이션 프레임워크입니다. Django는 웹 프레임워크이지만 Django가 프런트엔드인지 백엔드인지에 대한 질문에 답하려면 프런트엔드와 백엔드의 개념에 대한 깊은 이해가 필요합니다. 프론트엔드는 사용자가 직접 상호작용하는 인터페이스를 의미하고, 백엔드는 HTTP 프로토콜을 통해 데이터와 상호작용하는 서버측 프로그램을 의미합니다. 프론트엔드와 백엔드가 분리되면 프론트엔드와 백엔드 프로그램을 독립적으로 개발하여 각각 비즈니스 로직과 인터랙티브 효과, 데이터 교환을 구현할 수 있습니다.

빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.

Django: 프론트엔드와 백엔드 개발을 모두 처리할 수 있는 마법의 프레임워크! Django는 효율적이고 확장 가능한 웹 애플리케이션 프레임워크입니다. MVC, MTV를 포함한 다양한 웹 개발 모델을 지원할 수 있으며 고품질 웹 애플리케이션을 쉽게 개발할 수 있습니다. Django는 백엔드 개발을 지원할 뿐만 아니라 프런트엔드 인터페이스를 빠르게 구축하고 템플릿 언어를 통해 유연한 뷰 표시를 구현할 수 있습니다. Django는 프론트엔드 개발과 백엔드 개발을 완벽한 통합으로 결합하므로 개발자가 전문적으로 학습할 필요가 없습니다.
