美文网首页
8个有用的JavaScript单行程序

8个有用的JavaScript单行程序

作者: 前端技术驿站 | 来源:发表于2021-04-21 23:58 被阅读0次

在实际开发中,同一个业务逻辑往往有不同的实现方式,不同的实现所产生的代码量以及所体现的思路不尽相同,越是精简的实现越能展现代码之美,逼格也会略胜一筹。下面就让我们来了解一下 JavaScript 常见的单行程序吧!

1、随机 ID 生成

现在,要你随机生成一个字符串,你该怎么办???能怎么办?就用下面这种方式实现咯:

const randomString = Math.random().toString(36).substring(2);
console.log(randomString); // vlxewjdfbk

额,这是什么操作,toString 还带个参数?你可能对这比较陌生,不,我说的就是我自己。

原来 toString 方法有一个参数,用来把 number 转为什么进制的字符串。

// radix可选,规定表示数字的基数,是 2 ~ 36 之间的整数。
// 若省略该参数,则使用基数 10。
// 但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。
// 2-数字以二进制值显示;8 - 数字以八进制值显示;16 - 数字以十六进制值显示。
number.toString(radix);

// 此外,parseInt也有类似功能,parseInt(string, radix)。

然后通过 substring(2)截取字符串,因为随机数大于等于 0 小于 1,前两位是"0."。这种方法的缺陷是不能包括所有的大小写英文字符。

2、生成范围内的随机数

Math.random 是一个功能很强大的函数,能帮助我们生成大于等于 0.0 且小于 1.0 的 double 值。

let max = 50;
let min = 30;
let a = Math.floor(Math.random() * (max - min + 1)) + min;

3、随机排列数组

随机排序数组也叫做洗牌。

let arr = ["A", "B", "C", "D", "E"];
console.log(arr.slice().sort((a, b) => Math.random() - 0.5));

为了不改变原始数组,使用了 slice 获得一个副本,不然 sort 就会修改原始数组。sort 可以传递一个排序规则对当前数组元素进行排序。

如果结果(Math.random() - 0.5)返回小于 0 的值,数组将按照升序排列(即 a > b,那么就交换位置),大于 0,则降序排序(即 a < b,也要交换位置),等于 0 就不交换位置。
这里 Math.random() - 0.5 可能大于小于或等于 0,所以就得到了一个乱序的数组。

4、反转字符串

反转字符串有很多种方法,现在一行代码解决它:

const reverse = (str) => str.split("").reverse().join("");

先对字符串进行分割成数组,使用数组的 reverse 方法进行反转,然后再拼接成字符串。稍加改造就可以用来判断回文字符串:

const isPalindrome = str => str === str.split('').reverse().join('');

5、交换两个变量

利用 ES6 结构赋值,轻轻松松解决:

[a, b] = [b, a];

当然还有另一种,首先根据运算符的优先级,首先执行 b=a,此时 b 直接得到了 a 的值,然后一步数组索引让 a 得到了 b 的值。(⊙o⊙)…,不明觉厉啊!

a = [b, (b = a)][0];

6、检查偶数和奇数

箭头函数的一个优点,就是可以简化代码。

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

7、合并多个数组

这个方法就多了,来看看一气就呵成的:

let student1 = ['A', 'B', 'C'];
let student2 = ['a', 'b', 'c'];

let result1 = student1.concat(student2);
let result2 = [].concat(student1, student2);
let result3 = [...student1, ...student2];

看样子,第三种方法,看起来就挺美。

8、将文字复制到剪贴板

将文本复制到剪贴板非常有用,也是一个很难解决的问题,不管难不难,下面的代码就能实现:

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

关注公众号【前端技术驿站】让我们共同进步吧!我整理了一些项目实战视频,欢迎来学习!

相关文章

  • 8个有用的JavaScript单行程序

    在实际开发中,同一个业务逻辑往往有不同的实现方式,不同的实现所产生的代码量以及所体现的思路不尽相同,越是精简的实现...

  • perl-oneline

    ############原文粘贴#################### 用 Perl 实现的有用的单行程序 ...

  • 书籍:管理外包IT服务 Managing Your Outsou

    管理外包IT服务 Python程序员将通过这些有用的单行来提高他们的技能。 本书将教你如何阅读和编写 "单行语":...

  • 开发中常用的 25 个JavaScript 单行代码

    开发中常用的 25 个JavaScript 单行代码 下面为大家介绍我在开发中常用的30个JavaScript单行...

  • javascript基本语法,变量和数据类型理解

    javascript基本语法 1.注释 作用:注释是不需要执行,主要是对程序进行文字说明和解释。 语法: 单行注释...

  • 2020-12-04生物信息单行脚本

    生信单行脚本 生信息有用的单行脚本 (and some, more generally useful[#etc])...

  • 注释

    单行注释 单行注释以 // 开头。 任何位于 // 与行末之间的文本都会被 JavaScript 忽略(不会执行)...

  • JavaScript注释

    JavaScript 支持单行注释和多行注释:单行注释以 // 开头;多行注释以 /* 开始,以 */ 结尾。被注...

  • 快速了解JavaScript基础知识

    注释 单行注释: 多行注释: 历史上 JavaScript 可以兼容 HTML 注释,因此 `` 也可以是单行注释...

  • Perl 6 单行程序

    Perl 6 单行程序 这本书在进行之中。我希望你能觉得它有趣,甚至可能有用!如果你想贡献反馈的话,那么很欢迎提问...

网友评论

      本文标题:8个有用的JavaScript单行程序

      本文链接:https://www.haomeiwen.com/subject/ilotrltx.html