> 웹 프론트엔드 > JS 튜토리얼 > 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

青灯夜游
풀어 주다: 2021-05-17 09:41:51
앞으로
2095명이 탐색했습니다.

이 글에서는 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 한 줄 코드를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

JavaScript는 계속해서 성장하고 있습니다.

JavaScript는 가장 배우기 쉬운 언어 중 하나이며 시장의 새로운 사람들이 기술 전문가가 될 수 있는 문을 열어주기 때문입니다. (물음표 모양?) 成为技术怪才打开了大门。(问号脸?)

的确,JavaScript可以做很多出色的事情!还有很多东西要学习。

而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事。

本文整理了一些非常有用的单行代码(20+),这些单行代码可以帮助你提高工作效率并可以帮助调试代码。

什么是单行代码?

单行代码是一种代码实践,其中我们仅用一行代码执行某些功能。

01-随机获取布尔值

此函数将使用Math.random()方法返回布尔值(真或假)。
Math.random创建一个介于0和1之间的随机数,然后我们检查它是否大于或小于0.5。
这意味着有50/50的机会会得到对或错。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

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

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false
로그인 후 복사

02-检查日期是否为周末

通过此功能,你将能够检查提供的日期是工作日还是周末。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

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-检查数字是偶数还是奇数

简单的实用程序功能,用于检查数字是偶数还是奇数。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true
로그인 후 복사

04-获取数组中的唯一值(数组去重)

从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set,然后返回数组。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]
로그인 후 복사

05-检查变量是否为数组

一种检查变量是否为数组的干净简便的方法。

当然,也可以有其他方法

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

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,这是一个技巧,你可以使用它在旅途中生成随机字符串。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!
로그인 후 복사

08-滚动到页面顶部

所述window.scrollTo()方法把一个XY坐标滚动到。
如果将它们设置为零和零,我们将滚动到页面顶部。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();
로그인 후 복사

09-切换布尔

切换布尔值是非常基本的编程问题之一,可以通过许多不同的方法来解决。
代替使用if语句来确定将布尔值设置为哪个值,你可以使用函数使用!翻转当前值。运算符。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;
로그인 후 복사

10-交换两个变量

下面的代码是不使用第三个变量而仅使用一行代码即可交换两个变量的更简单方法之一。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

[foo, bar] = [bar, foo];
로그인 후 복사

11-计算两个日期之间的天数

要计算两个日期之间的天数,
我们首先找到两个日期之间的绝对值,然后将其除以86400000(等于一天中的毫秒数),最后将结果四舍五入并返回。

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

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

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};
로그인 후 복사

13-合并多个数组的不同方法

有两种合并数组的方法。其中之一是使用concat方法。另一个使用扩展运算符(

실제로 JavaScript는 많은 놀라운 일을 할 수 있습니다! 아직 배울 것이 많습니다.


그리고 JavaScript를 처음 접하는 사람이든 전문 개발자이든 새로운 것을 배우는 것은 항상 좋은 일입니다.

🎜이 기사에서는 작업 효율성을 향상하고 코드 디버깅에 도움이 될 수 있는 매우 유용한 한 줄짜리 코드(20개 이상)를 편집했습니다. 🎜🎜한 줄의 코드란 무엇입니까? 🎜
One-liner는 단 한 줄의 코드로 특정 기능을 수행하는 코딩 연습입니다.

01 - 임의로 부울 값 가져오기

🎜이 함수는 Math.random() 메서드를 사용하여 부울 값(true 또는 false)을 반환합니다. 🎜Math.random은 0과 1 사이의 임의의 숫자를 생성한 다음 그 숫자가 0.5보다 큰지 작은지 확인합니다. 🎜이것은 맞을 수도 있고 틀릴 확률도 50/50이라는 뜻입니다. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
// 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- 날짜가 주말인지 확인

🎜이 기능을 사용하면 제공된 날짜가 평일인지 주말인지 확인할 수 있습니다. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 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
로그인 후 복사
로그인 후 복사

03 ​​​​- 숫자가 짝수인지 홀수인지 확인

🎜 숫자가 짝수인지 홀수인지 확인하는 간단한 유틸리티 기능입니다. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36),
);
// Hi, I should be truncated because...
로그인 후 복사
로그인 후 복사

04-배열에서 고유한 값 가져오기(배열 중복 제거)

🎜배열에서 모든 중복 값을 제거하는 매우 간단한 방법입니다. 이 함수는 배열을 Set으로 변환한 다음 배열을 반환합니다. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    &#39;A long story goes here but then eventually ends!&#39;, // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!
로그인 후 복사
로그인 후 복사

05 - 변수가 배열인지 확인

🎜변수가 배열인지 확인하는 깔끔하고 쉬운 방법입니다. 🎜🎜물론, 다른 방법도 있을 수 있습니다🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize(&#39;hello world&#39;));
// Hello world
로그인 후 복사
로그인 후 복사

06 - 두 숫자 사이에 난수 생성

🎜이것은 두 숫자를 매개변수로 사용하고 이 두 숫자 사이에 난수를 생성합니다! 🎜
const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false
로그인 후 복사
로그인 후 복사

07 - 무작위 문자열 생성(고유 ID?)

🎜 임시 고유 ID가 필요할 수도 있습니다. 이동 중에 무작위 문자열을 생성하는 데 사용할 수 있는 방법은 다음과 같습니다. . 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false
로그인 후 복사
로그인 후 복사

08-페이지 상단으로 스크롤

🎜 window.scrollTo() 메서드는 XY를 스크롤합니다. 좌표 도착. 🎜0과 0으로 설정하면 페이지 상단으로 스크롤됩니다. 🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = &#39;You are not old enough&#39;;
} else {
  greetings = &#39;You are young!&#39;;
}

// Shorthand
const greetings = age < 18 ? &#39;You are not old enough&#39; : &#39;You are young!&#39;;
로그인 후 복사
로그인 후 복사
< h2>09 - Toggle Boolean🎜Toggle Boolean은 다양한 방법으로 해결할 수 있는 매우 기본적인 프로그래밍 문제 중 하나입니다. 🎜부울을 설정할 값을 결정하기 위해 if 문을 사용하는 대신 함수를 사용할 수 있습니다! 현재 값을 뒤집습니다. 연산자. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜
// Longhand
if (name !== null || name !== undefined || name !== &#39;&#39;) {
  let fullName = name;
}

// Shorthand
const fullName = name || &#39;buddy&#39;;
로그인 후 복사
로그인 후 복사

10- 두 변수 교환

🎜 아래 코드는 세 번째 변수를 사용하지 않고 한 줄의 코드만 사용하여 두 변수를 바꾸는 가장 간단한 방법 중 하나입니다. 🎜🎜🎜전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜rrreee

11- 두 날짜 사이의 일수 계산

🎜 두 날짜 사이의 일수를 계산하려면 🎜 먼저 두 날짜 사이의 절대값을 구한 다음 이를 86400000(1일과 동일)으로 나눕니다. 밀리초 단위), 마지막으로 결과를 반올림하여 반환합니다. 🎜🎜🎜1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜rrreee

12-클립보드에 텍스트 복사

🎜PS: navigator.clipboard.writeText가 존재하는지🎜🎜🎜1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.🎜rrreee

13-여러 배열 병합의 차이점

🎜배열을 병합하는 방법에는 두 가지가 있습니다. 그 중 하나는 concat 메서드를 사용하는 것입니다. 다른 하나는 스프레드 연산자()를 사용합니다. 🎜🎜PS: "설정" 개체를 사용하여 최종 배열에서 무엇이든 복사할 수도 있습니다. 🎜🎜

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

// Merge but don&#39;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中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(&#39;&#39;));
// 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-在结尾处截断字符串

需要从头开始截断字符串,这不是问题!

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36),
);
// Hi, I should be truncated because...
로그인 후 복사
로그인 후 복사

16-从中间截断字符串

从中间截断字符串怎么样?

该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    &#39;A long story goes here but then eventually ends!&#39;, // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!
로그인 후 복사
로그인 후 복사

17-大写字符串

好吧,不幸的是,JavaScript没有内置函数来大写字符串,但是这种解决方法可以实现。

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize(&#39;hello world&#39;));
// Hello world
로그인 후 복사
로그인 후 복사

18-检查当前选项卡是否在视图/焦点内

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回truefalse

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false
로그인 후 복사
로그인 후 복사

19-检查用户是否在Apple设备上

如果用户使用的是Apple设备,则返回true

1전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false
로그인 후 복사
로그인 후 복사

20-三元运算符

当你只想在一行中编写if..else语句时,这是一个很好的代码保护程序。

전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = &#39;You are not old enough&#39;;
} else {
  greetings = &#39;You are young!&#39;;
}

// Shorthand
const greetings = age < 18 ? &#39;You are not old enough&#39; : &#39;You are young!&#39;;
로그인 후 복사
로그인 후 복사

21-短路评估速记

在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。

2전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.

// Longhand
if (name !== null || name !== undefined || name !== &#39;&#39;) {
  let fullName = name;
}

// Shorthand
const fullName = name || &#39;buddy&#39;;
로그인 후 복사
로그인 후 복사

希望对你有所帮助!

英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc

更多编程相关知识,请访问:编程入门!!

위 내용은 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 원 라이너를 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿