JavaScript黑科技:简洁有用的一行代码,让你的开发效率飙升!

简介: JavaScript黑科技:简洁有用的一行代码,让你的开发效率飙升!

说在前面

在这篇技术博客中,我们将向你介绍一些令人惊叹的JavaScript黑科技,这些只需一行代码就能实现的简洁而有用的功能,将极大地提升你的开发效率。无论是优化代码、增加交互性,还是实现复杂的逻辑,这些代码片段将成为你工具箱中的宝贵资源。跟随本文,让我们一起领略这些酷炫的JavaScript技巧吧!

代码

1、生成指定范围内的随机整数

const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

该函数接受两个参数 minmax,并返回一个介于 minmax 之间的随机整数。

这个函数使用 Math.random() 方法生成一个0到1之间的随机小数,然后将其乘以 (max - min + 1),这将产生一个在 0max - min + 1 范围内的随机数。

接下来,通过使用 Math.floor() 向下取整,将这个随机数转换为整数。最后,将 min 添加到结果中,以确保生成的随机数在 minmax 之间。

2、打印 JSON 对象为格式化的 JSON 字符串

JSON.stringify(obj, null, 2);

JSON.stringify(obj, null, 2) 是一个用于将 JavaScript 对象转换为格式化的 JSON 字符串的函数调用,其中 obj 是要转换的 JavaScript 对象。

在这个函数调用中,第二个参数 null 表示在转换过程中不使用任何替换函数,而第三个参数 2 表示在输出的 JSON 字符串中使用两个空格缩进。

以下是一个示例,展示了如何使用 JSON.stringify 将 JavaScript 对象转换为格式化的 JSON 字符串:

const obj = {
  name: "zhangsan",
  age: 30,
};
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);

假设 obj 是上述示例中定义的对象,JSON.stringify(obj, null, 2) 将会返回以下格式化的 JSON 字符串:

这样的格式化输出更易于阅读,并且每个属性都会独占一行,配合了两个空格的缩进。

3、生成随机密钥

const cryptoKey = () => crypto.getRandomValues(new Uint32Array(1))[0].toString(16);

使用 crypto.getRandomValues() 方法生成一个随机的 32 位无符号整数,并将其转换为 16 进制字符串。

在这个函数中,new Uint32Array(1) 创建了一个包含一个元素的无符号 32 位整数数组。然后,crypto.getRandomValues() 方法将随机值填充到该数组中,并返回这个数组。接下来,通过索引访问数组中的第一个元素,并使用 toString(16) 将其转换为一个 16 进制字符串。

4、检查元素是否在视窗中

const elementInViewport = el => el.getBoundingClientRect().top >= 0 && el.getBoundingClientRect().bottom <= window.innerHeight;

该函数接受一个参数 el,表示要检查的元素。在函数内部,使用 getBoundingClientRect() 方法获取到 el 元素的位置信息,然后通过比较 topbottom 属性来判断元素是否在当前视口中可见。

具体来说,el.getBoundingClientRect().top >= 0 表示元素顶部是否在或者超出视口顶部,而 el.getBoundingClientRect().bottom <= window.innerHeight 表示元素底部是否在或者超出视口底部。

如果上述两个条件都满足,则说明元素完全在当前视口中可见,函数将返回 true,否则将返回 false

以下是使用 elementInViewport 函数检查元素是否在视口中可见的示例:

const element = document.getElementById('myElement');
if (elementInViewport(element)) {
  console.log('Element is in the viewport');
} else {
  console.log('Element is not in the viewport');
}

5、获取设备类型

const getDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

使用了正则表达式 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 来检查用户代理字符串中是否包含移动设备的关键词。如果匹配成功,则返回 ‘Mobile’,否则返回 ‘Desktop’。

此正则表达式会检查 navigator.userAgent 中是否包含 Android、webOS、iPhone、iPad、iPod、BlackBerry、IEMobile 或 Opera Mini 这些关键词,如果包含其中任何一个,则判定为移动设备,否则判定为桌面设备。

以下是使用 getDeviceType 函数获取设备类型的示例:

const deviceType = getDeviceType();
console.log('Device type: ' + deviceType); // 输出设备类型

在浏览器环境中执行上述代码,将根据用户代理字符串判断设备类型,并输出 ‘Mobile’ 或 ‘Desktop’。

需要注意的是,用户代理字符串可能会被用户修改或者浏览器插件所影响,因此这种方式判断设备类型并不是十分准确,但在一般情况下可以提供一个大致的判断。

6、扁平化数组

const flatten = arr => arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);

使用了 JavaScript 中的 reduce 方法来遍历数组,并根据数组元素的类型进行相应的处理。如果当前元素是一个数组,则递归调用 flatten 函数对其进行扁平化处理;否则直接将当前元素添加到累积结果中。

具体来说,arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []) 中的 reduce 方法对数组 arr 进行迭代,初始值为一个空数组 []。在每次迭代中,对当前元素 val 进行判断,如果是数组,则递归调用 flatten 函数,否则将其直接添加到累积结果数组 acc 中。

最终得到的累积结果就是将多维数组扁平化后的一维数组。

以下是使用 flatten 函数将多维数组扁平化的示例:

const nestedArray = [1, 2, [3, 4, [5, 6], 7], 8, [9]];
const flatArray = flatten(nestedArray);
console.log(flatArray); // 输出扁平化后的一维数组

在上述示例中,nestedArray 是一个嵌套的数组,经过 flatten 函数处理后,将得到一个扁平化的一维数组。

需要注意的是,JavaScript 中也提供了 flatMap 方法可以用于类似的扁平化操作,但是在处理多维数组时可能会有区别。

7、打乱数组

const shuffleArray = arr => arr.sort(() => 0.5 - Math.random());

使用了 sort 方法,传入一个比较函数 () => 0.5 - Math.random()。这个比较函数的作用是返回一个随机数,负数或正数的概率相等,从而实现对数组的随机排序。

在每次排序时,sort 方法会调用比较函数来决定元素的顺序,由于比较函数中使用了随机数,因此每次排序的结果都是随机的,从而实现了数组的随机排序(洗牌)。

以下是使用 shuffleArray 函数对数组进行随机排序的示例:

const myArray = [1, 2, 3, 4, 5];
shuffleArray(myArray);
console.log(myArray); // 输出随机排序后的数组

在上述示例中,myArray 是一个包含数字的数组,经过 shuffleArray 函数处理后,将得到一个随机排序的数组。

需要注意的是,这种方法虽然简单,但并不是一种严格意义上的均匀随机分布,如果要求高质量的随机性,建议使用专门的随机算法库来进行处理。

8、将小驼峰字符串转换为连接符(连字符)连接的字符串

const camelToDash = str => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

使用了正则表达式 /([a-z])([A-Z])/g 来匹配小驼峰字符串中的大写字母前的小写字母。然后使用 replace 方法将匹配到的子串替换为 $1-$2,其中 $1 表示第一个捕获组(即小写字母),$2 表示第二个捕获组(即大写字母)。最后使用 toLowerCase 方法将结果转换为全小写。

以下是使用 camelToDash 函数将小驼峰字符串转换为连接符连接的字符串的示例:

const myString = 'helloWorld;iLoveCode';
const dashedString = camelToDash(myString);
console.log(dashedString); // 输出转换后的连接符连接的字符串

9、将连接符(连字符)连接的字符串转换为小驼峰字符串

const dashToCamel = str => str.replace(/-([a-z])/g, (match, group) => group.toUpperCase());

使用了正则表达式 /-([a-z])/g 来匹配连字符后的小写字母。然后使用 replace 方法,第二个参数传入一个函数,对匹配到的子串进行处理,将匹配到的小写字母转换为大写字母。最终返回转换后的小驼峰字符串。

以下是使用 dashToCamel 函数将连接符连接的字符串转换为小驼峰字符串的示例:

const myString = 'hello-world;i-love-code';
const camelString = dashToCamel(myString);
console.log(camelString); // 输出转换后的小驼峰字符串

10、快速交换多个变量的值

[a,b,c] = [c,a,b]

执行这个表达式时,会将原数组中的第一个元素赋给 c,第二个元素赋给 a,第三个元素赋给 b,从而实现了位置交换。

举个例子,如果原数组是 [1, 2, 3],执行 [a,b,c] = [c,a,b] 后,会得到:

  • a = 3
  • b = 1
  • c = 2

这样,数组元素的位置就被成功交换了。这种使用解构赋值来实现元素位置交换的方式非常简洁和优雅,是 JavaScript 中常用的技巧之一。

公众号

关注公众号『前端也能这么有趣』,获取更多新鲜内容。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

目录
相关文章
|
7天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
21天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
21天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
15 4
|
22天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
22天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
23天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
23天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
19 0
|
21天前
|
JSON 前端开发 JavaScript
16个重要的JavaScript代码
16个重要的JavaScript代码
29 1
|
21天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4
|
21天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
17 6