乐趣区

关于前端:译20个实用的JavaScript技巧

jiezi

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 和ÿ坐标滚动到。
如果将它们设置为零和零，则将滚动到页面顶部。

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

scrollToTop();

09- 切换布尔

切换布尔值是十分根本的编程问题之一，能够通过许多不同的办法来解决。
代替应用 if 语句来确定将布尔值设置为哪个值，您能够应用函数应用 ！ 翻转以后值。“非”运算符。

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);

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”办法。另一个正在应用扩大运算符（“…”）。

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, // total size needed
    13, // chars to keep from start
    17, // chars to keep from end
  ),
);
// 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!';

奖金 - 短路评估速记

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

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

// Shorthand
const fullName = name || 'buddy';

翻译起源
作者：Muhammad Ovi
原文链接：20 JavaScript One-Liners That Will Help You Code Like a Pro
起源：Dev.to
文章已获受权

退出移动版