이 글에서는 전문가처럼 코드를 작성하는 데 도움이 되는 20개 이상의 JavaScript 한 줄 코드를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
JavaScript는 계속해서 성장하고 있습니다.
JavaScript는 가장 배우기 쉬운 언어 중 하나이며 시장의 새로운 사람들이 기술 전문가가 될
수 있는 문을 열어주기 때문입니다. (물음표 모양?) 成为技术怪才
打开了大门。(问号脸?)
的确,JavaScript可以做很多出色的事情!还有很多东西要学习。
而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事。
本文整理了一些非常有用的单行代码(20+),这些单行代码可以帮助你提高工作效率并可以帮助调试代码。
什么是单行代码?
单行代码是一种代码实践,其中我们仅用一行代码执行某些功能。
此函数将使用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
通过此功能,你将能够检查提供的日期是工作日还是周末。
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)
简单的实用程序功能,用于检查数字是偶数还是奇数。
const isEven = (num) => num % 2 === 0; console.log(isEven(5)); // false console.log(isEven(4)); // true
从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set,然后返回数组。
const uniqueArr = (arr) => [...new Set(arr)]; console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5])); // [1, 2, 3, 4, 5]
一种检查变量是否为数组的干净简便的方法。
当然,也可以有其他方法
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
这将以两个数字为参数,并将在这两个数字之间生成一个随机数!
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); console.log(random(1, 50)); // could be anything from 1 - 50
也许你需要临时
的唯一ID,这是一个技巧,你可以使用它在旅途中生成随机字符串。
const randomString = () => Math.random().toString(36).slice(2); console.log(randomString()); // could be anything!!!
所述window.scrollTo()
方法把一个X
和Y
坐标滚动到。
如果将它们设置为零和零,我们将滚动到页面顶部。
const scrollToTop = () => window.scrollTo(0, 0); scrollToTop();
切换布尔值是非常基本的编程问题之一,可以通过许多不同的方法来解决。
代替使用if语句来确定将布尔值设置为哪个值,你可以使用函数使用!翻转当前值。非
运算符。
// bool is stored somewhere in the upperscope const toggleBool = () => (bool = !bool); //or const toggleBool = b => !b;
下面的代码是不使用第三个变量而仅使用一行代码即可交换两个变量的更简单方法之一。
[foo, bar] = [bar, foo];
要计算两个日期之间的天数,
我们首先找到两个日期之间的绝对值,然后将其除以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
PS:你可能需要添加检查以查看是否存在navigator.clipboard.writeText
const copyTextToClipboard = async (text) => { await navigator.clipboard.writeText(text); };
有两种合并数组的方法。其中之一是使用concat
方法。另一个使用扩展运算符(…
그리고 JavaScript를 처음 접하는 사람이든 전문 개발자이든 새로운 것을 배우는 것은 항상 좋은 일입니다.
One-liner는 단 한 줄의 코드로 특정 기능을 수행하는 코딩 연습입니다.
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])];
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
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...
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!
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
임시
고유 ID가 필요할 수도 있습니다. 이동 중에 무작위 문자열을 생성하는 데 사용할 수 있는 방법은 다음과 같습니다. . 🎜🎜🎜🎜const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
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';
navigator.clipboard.writeText가 존재하는지
🎜🎜🎜🎜rrreeeconcat
메서드를 사용하는 것입니다. 다른 하나는 스프레드 연산자(…
)를 사용합니다. 🎜🎜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])];
人们有时会使用库来查找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
需要从头开始截断字符串,这不是问题!
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...
从中间截断字符串怎么样?
该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第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!
好吧,不幸的是,JavaScript
没有内置函数来大写字符串,但是这种解决方法可以实现。
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回true
或false
const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
如果用户使用的是Apple
设备,则返回true
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
当你只想在一行中编写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!';
在将变量值分配给另一个变量时,可能要确保源变量不为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 중국어 웹사이트의 기타 관련 기사를 참조하세요!