在实际开发中,同一个业务逻辑往往有不同的实现方式,不同的实现所产生的代码量以及所体现的思路不尽相同,越是精简的实现越能展现代码之美,逼格也会略胜一筹。下面就让我们来了解一下 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)
}
关注公众号【前端技术驿站】让我们共同进步吧!我整理了一些项目实战视频,欢迎来学习!
网友评论