学会这20+个JavaScript单行代码，可以让你的代码更加骚气

﹏ヽ暗。殇╰゛Y 2022-10-07 11:54 179阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![c68d996bc642298f577daa21b6fe10dc.png][]

JavaScript不断发展壮大，  
因为它是最容易上手的语言之一，因此为市场上的新`成为技术怪才`打开了大门。（问号脸？）

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

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

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

什么是单行代码？

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

## 01-随机获取布尔值 ##

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

const getRandomBoolean = () => Math.random() >= 0.5;
    
    console.log(getRandomBoolean());
    // a 50/50 chance of returning true or false

## 02-检查日期是否为周末 ##

通过此功能，你将能够检查提供的日期是工作日还是周末。  
![image.png][image.png 1]

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

简单的实用程序功能，用于检查数字是偶数还是奇数。  
![image.png][image.png 2]

const isEven = (num) => num % 2 === 0;
    
    console.log(isEven(5));
    // false
    console.log(isEven(4));
    // true

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

从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set，然后返回数组。  
![image.png][image.png 3]

const uniqueArr = (arr) => [...new Set(arr)];
    
    console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
    // [1, 2, 3, 4, 5]

## 05-检查变量是否为数组 ##

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

当然，也可以有其他方法????  
![image.png][image.png 4]

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，这是一个技巧，你可以使用它在旅途中生成随机字符串。  
![image.png][image.png 5]

const randomString = () => Math.random().toString(36).slice(2);
    
    console.log(randomString());
    // could be anything!!!

## 08-滚动到页面顶部 ##

所述`window.scrollTo（）`方法把一个`X`和`Y`坐标滚动到。  
如果将它们设置为零和零，我们将滚动到页面顶部。

![image.png][image.png 6] image.png

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

## 09-切换布尔 ##

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

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

## 10-交换两个变量 ##

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

[foo, bar] = [bar, foo];

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

要计算两个日期之间的天数，  
我们首先找到两个日期之间的绝对值，然后将其除以86400000（等于一天中的毫秒数），最后将结果四舍五入并返回。  
![image.png][image.png 9]

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`  
![image.png][image.png 10]

const copyTextToClipboard = async (text) => {
      await navigator.clipboard.writeText(text);
    };

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

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

PS：我们也可以使用“设置”对象从最终数组中复制任何内容。  
![image.png][image.png 11]

// 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中某些内容的实际类型，这一小技巧可以节省你的时间（和代码大小）。  
![image.png][image.png 12]

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-在结尾处截断字符串 ##

需要从头开始截断字符串，这不是问题！  
![image.png][image.png 13]

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个参数开始和结束需要多少个字符  
![image.png][image.png 14]

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`没有内置函数来大写字符串，但是这种解决方法可以实现。  
![image.png][image.png 15]

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
    
    console.log(capitalize('hello world'));

// Hello world

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

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回`true`或`false`  
![image.png][image.png 16]

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

// true/false

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

如果用户使用的是`Apple`设备，则返回`true`  
![image.png][image.png 17]

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

## 20-三元运算符 ##

当你只想在一行中编写`if..else`语句时，这是一个很好的代码保护程序。  
![image.png][image.png 18]

// 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语句，也可以使用短路评估。  
![image.png][image.png 19]

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

希望对你有所帮助!

关于本文

来源：JenK

https://segmentfault.com/a/1190000039994479

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[c68d996bc642298f577daa21b6fe10dc.png]: /images/20221005/9539eaf862e74140934ab58fad534342.png
[image.png]: /images/20221005/ccb906d6345f4abaa0d5ae05ec233767.png
[image.png 1]: /images/20221005/dbb7a0a5dc9045278fd10c0674f4d6e5.png
[image.png 2]: /images/20221005/a695fbfe05c44a74aa2d12f1253fa901.png
[image.png 3]: /images/20221005/29babef10b294c7ab79a514919fb6ea6.png
[image.png 4]: /images/20221005/27ee0f3073b949788b3f6a19d73e36cf.png
[image.png 5]: /images/20221005/45e3aee6153d464ebadfdd8c477fccd1.png
[image.png 6]: /images/20221005/e707815bd3ca4583aa9b084c4c38d9fe.png
[image.png 7]: /images/20221005/99198918aa114f1ba26434c6f03d4b24.png
[image.png 8]: /images/20221005/c795272c7b3d4e499619257b7ce02355.png
[image.png 9]: /images/20221005/ea6aca6de4f5496499fb99a50acc7246.png
[image.png 10]: /images/20221005/10e6b1416584431eb6aa6cb0bbedffa6.png
[image.png 11]: /images/20221005/91f0bc9050604777874696cc2c8a517f.png
[image.png 12]: /images/20221005/07bc2c86e05f4944a3e8c175e15fee17.png
[image.png 13]: /images/20221005/9f2e437d6a9244ed9fa510b4976337c5.png
[image.png 14]: /images/20221005/e0454e9dbac5491b82840b424163fb26.png
[image.png 15]: /images/20221005/dc1d7b2713ea4f588eac1267934a4768.png
[image.png 16]: /images/20221005/b29c16c041b8469c8370d41ef292039d.png
[image.png 17]: /images/20221005/96c88779ce804636b2cc67e640d3fac6.png
[image.png 18]: /images/20221005/b6a42329d9064f448bdd33516f0db6d1.png
[image.png 19]: /images/20221005/85ce9d564a13405699a117b6492828dd.png