JavaScript 可以做很多神奇的事情！
从复杂的框架到处理 API，有太多的东西需要学习。
但是，它也能让你只用一行代码就能做一些了不起的事情。
看看这 13 句 JavaScript 单行代码，会让你看起来像个专家！
这个函数使用
Math.random()方法返回一个布尔值（true 或 false）。Math.random()将在 0 和 1 之间创建一个随机数，之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false
使用这个方法，你就可以检查函数参数是工作日还是周末。
const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)
有几种不同的方法来反转一个字符串。以下代码是最简单的方式之一。
const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'
我们可以通过使用
document.hidden属性来检查当前标签页是否在前台中。
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus
最简单的方式是通过使用模数运算符（%）来解决。如果你对它不太熟悉，这里是 Stack Overflow 上的一个很好的图解。
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false
通过使用
toTimeString()方法，在正确的位置对字符串进行切片，我们可以从提供的日期中获取时间或者当前时间。
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time
使用
Math.pow()方法，我们可以将一个数字截断到某个小数点。
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1); // 25.1
toFixed(25.198726354, 2); // 25.19
toFixed(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726
// 缩减写法
// const toFixed = (n, fixed) => ~~(10 ** fixed * n) / 10 ** fixed;
我们可以使用
document.activeElement属性检查一个元素当前是否处于聚焦状态。
const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus
const touchSupported = () => {
('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not
我们可以使用
navigator.platform来检查当前用户是否为苹果设备。
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device
window.scrollTo()方法会取一个 x 和 y 坐标来进行滚动。如果我们将这些坐标设置为零，就可以滚动到页面的顶部。 注意：IE 不支持scrollTo()方法。const goToTop = () => window.scrollTo(0, 0); goToTop(); // Result: will scroll the browser to the top of the page
我们可以使用
reduce方法来获得函数参数的平均值。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5
处理温度有时会让人感到困惑。这两个功能将帮助你将华氏温度转换为摄氏温度，反之亦然。
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0
通过
document.cookie来查找cookie值
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// Result: #0033ff
借助
navigator.clipboard.writeText可以很容易的讲文本复制到剪贴板
规范要求在写入剪贴板之前使用 Permissions API 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看compatibility table and Clipboard availability in Clipboard。
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
使用以下代码段检查给定日期是否有效。
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true
const dayOfYear = (date) =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272
Javascript没有内置的首字母大写函数，因此我们可以使用以下代码。
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-1"), new Date("2021-10-1"))
// Result: 365
通过使用
document.cookie访问cookie并将其清除，可以轻松清除网页中存储的所有cookie。
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.```js, `=;expires=${new Date(0).toUTCString()};path=/`));
可以使用
Math.random和padEnd属性生成随机的十六进制颜色。
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008
可以使用 JavaScript 中的Set轻松删除重复项
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]
可以通过传递
window.location或原始 URL goole.com?search=easy&page=3 轻松地从 url 检索查询参数
const getParameters = (URL) => {
URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
return JSON.stringify(URL);
};
getParameters(window.location);
// Result: { search : "easy", page : 3 }
或者更为简单的：
Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: True
一行代码检查数组是否为空,将返回
true或false
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// Result: true
使用内置的
getSelection属性获取用户选择的文本。
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
可以使用
sort和random方法打乱数组
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]
使用以下代码检查用户的设备是否处于暗模式。
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
// Result: True or False