世界有超过 1000 万 Javascript 开发人员，而且这个数字每天都在增加。尽管 JavaScript 以其动态特性而闻名，但它还具有许多其他出色的特性。在这篇博客中，我们将看到 10 个有用的 JavaScript 单行代码，你应该知道它们来提高你的工作效率。

1、生成一个范围内的随机数

在很多情况下，我们需要在一个范围内生成一个随机数。Math.random() 函数可以为我们生成一个随机数，然后我们可以将其转换为我们想要的范围。

const max = 20;
const min = 10;
// Math.floor() 返回小于或等于一个给定数字的最大整数。
// Math.random() 返回一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。
const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);
//output: 17
//output: 10

2、反转字符串

有几种不同的方法可以反转字符串。这是最简单的一个，使用 split() 、reverse() 和 join() 方法。

•split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组。 •reverse() 方法将数组中元素的位置颠倒，并返回该数组•join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

reverse = (str) => str.split('').reverse().join('');
const str = 'hello world';
console.log(reverse(str));
// output: dlrow olleh

3、生成一个随机的十六进制码

适用于元素随机颜色生成的场景

•padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

'#' +
   Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padEnd(6, '0');
console.log(color);
//output: #ed19ed

4、数组随机排序

在使用随机算法时，数组的随机排序是一项经常用到的场景，在 JavaScript 中，我们没有模块像python 中的 random.shuffle() 方法一样实现数组元素的随机排序，但仍然有一种方法只需一行代码就可以将数组的所有元素随机排序。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log('shuffled array: ', shuffleArray(arr));
//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]

5、滚动到顶部/滚动到底部

初学者经常会发现自己很难正确地将元素滚动到视图中。滚动元素最简单的方法是使用 scrollIntoView() 方法。

//Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
   element.scrollIntoView({ behavior: 'smooth', block: 'start' });
const scrollToBottom = (element) =>
   element.scrollIntoView({ behavior: 'smooth', block: 'end' });

6、检查是否有人在使用暗色主题

如果您希望您显示的内容遵循使用您网站的人的配色方案，JavaScript 包含一种检测某人是否使用暗色主题的方法，以便您可以相应地调整颜色。

const isDarkMode1 =
   window.matchMedia &&
   window.matchMedia('(prefers-color-scheme: dark)').matches;
// 如果您想将其用作函数
const isDarkMode2 = () =>
   window.matchMedia &&
   window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode1);
console.log(isDarkMode2());
//output:
// true
// true

7、复制到剪贴板

将文本复制到剪贴板非常有用，也是一个难以解决的问题。您可以在网上找到各种解决方案，但下面的解决方案可能是最简洁和最聪明的解决方案之一。

const copyToClipboard = (text) =>
   navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

8、获取两个日期之间的天数

确定如用户的年龄时，你必须计算从某个时间点到现在已经过去的天数。

const ageDays = (old, recent) =>
   Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';
const firstDate = new Date('2021-06-10');
const secondDate = new Date('2022-03-03');
console.log(ageDays(firstDate, secondDate));
// output: 266 Day(s)

9、获取随机布尔值

Javascript 中的 Math.random 函数可用于生成范围之间的随机数。要生成随机布尔值，我们需要随机获取 0 到 1 之间的数字，然后检查它是大于还是小于 0.5。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// output: false

10、 检查当前用户是否在苹果设备上

我们可以使用 navigator.platform 来检查浏览器运行的平台。

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(navigator.platform);
console.log(isAppleDevice);
// output:
// Win32
// false

注意：此属性的推荐替代方案是 navigator.userAgentData.platform。但是，navigator.userAgentData.platform 还没有被一些主流浏览器支持，并且定义它的规范还没有被任何标准组采用（具体来说，它不是 W3C 或 WHATWG 发布的任何规范的一部分）。

个 JS 开发人员都应该使用 javascript one liner 来提高生产力和技能，所以今天我们讨论一些可以在日常开发生活中使用的 one liner。

1.对数组进行排序

使用 sort 方法对数组进行排序非常简单。

const number = [2,6,3,7,8,4,0];
number.sort();
// expected output: [0,2,3,4,6,7,8]

2.检查数组中的值

很多时候我们需要检查值是否存在于数组中，借助 include 方法。

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true

3.过滤数组

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);console.log(result);

// expected output: Array ["exuberant", "destruction", "present"]

4.从数组中查找元素

如果你只需要一个元素，但你在数组中获得了很多元素，不要担心 JavaScript 有 find 方法。

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

5.查找数组中任何元素的索引

要查找数组中元素的索引，您可以简单地使用 indexOf 方法。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1

6.将数组转换为字符串

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join(", "));
// expected output: "Fire, Air, Water"

7.支票号码是偶数还是奇数

很容易找出给定的数字是偶数还是奇数。

const isEven = num => num % 2 === 0;
or
const isEven = num => !(n & 1);

8.删除数组中的所有重复值

删除数组中所有重复值的一种非常简单的方法

const setArray = arr => [...new Set(arr)];const arr = [1,2,3,4,5,1,3,4,5,2,6];
setArray(arr);
// expected output: [1,2,3,4,5,6]

9.合并多个数组的不同方式

// merge but don't remove duplications
const merge = (a, b) => a.concat(b);
or
const merge = (a, b) => [...a, ...b];// merge with remove duplications
const merge = (a, b) => [...new Set(a.concat(b))];
or
const merge = (a, b) => [...new Set([...a, ...b])];

10.滚动到页面顶部

有很多方法可以将页面滚动到顶部。

const goToTop = () => window.scrollTo(0,0, "smooth");
or
const scrollToTop = (element) => element.scrollIntoView({behavior: "smooth", block: "start"});
// scroll to bottom of the page
const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);

11.复制到剪贴板

在 Web 应用程序中，复制到剪贴板因其对用户的便利性而迅速普及。

const copyToClipboard = text => (navigator.clipboard?.writeText ?? Promise.reject)(text);

以上就是今天跟你分享的11个JavaScript的单行代码技巧，希望你能从中学到新的知识。

想了解更多精彩内容，欢迎关注千锋教育！