js文件代码【js文件代码有些是白色】 收藏 0

高级前端开发需要知道的 25 个 JavaScript 单行代码

例如我们想要将 a 于 b 的值交换

这行代码使用数组解构赋值的方式来交换两个变量的值，无需定义新的临时变量。这个巧妙的技巧可让代码看起来更简洁明了。语法[a, b] = [b, a]通过解构右侧的数组并将其分配给左侧来实现交换它们的值。

这里使用对象解构赋值的方式将对象中的属性直接提取到新的变量中。这种方法简化了访问对象属性的过程，并增强了代码的可读性。

通过使用扩展运算符 ( …) 创建originalObj的浅克隆对象。此技术将所有可枚举的自身属性从原始对象复制到新对象。

与克隆类似，通过扩展运算符将obj1和合并obj2为一个新的对象。如果有重叠的属性，则最后一个对象的属性将覆盖前一个对象的属性。

通过Array.prototype.filter()函数并使用Boolean函数作为回调。它将会从数组中删除所有假值（ 0，false，null，undefined，\’\’，NaN）。

通过扩展运算符将NodeList( document.querySelectorAll函数的返回值) 转换为 JavaScript 数组，从而能够使用数组的map方法filter去操作查找到的元素。

例如我们要判断一个数组中是否存在负数

Array.prototype.some()函数用于检查数组中是否至少有一个元素，通过所提供的回调函数实现的测试（此处判断是否是负数，返回true表示通过）

另外，还可以使用Array.prototype.every()来检查数组的所有元素是否全部通过测试（此处判断是否是正数）

通过使用 Clipboard API 以编程方式将文本复制到剪贴板。这是一种最新的复制方法，可让文本复制变得无缝且高效（但目前各大浏览器支持度还不是很高，需要考虑兼容性问题）。

这里利用了Set对象存储的值会保持唯一，以及扩展运算符能将Set转换回数组的特性。这是一种优雅的删除数组中重复项的方式。

此示例通过使用Array.prototype.filter()函数去查找arr1与arr2中的公共元素。传入的回调函数会检查arr2是否包含arr1的每一个元素，从而得到两个数组的交集。

可以在这运行上述演示代码

笔COOL，一个功能完备前端作品分享平台、使用便捷的在线HTML/CSS/JS代码编辑器，浏览器输入 bi.cool 即可访问

此示例使用Array.prototype.reduce()方法将数组中所有的值全部累加起来。reduce方法接收一个回调函数和一个初始值（即前一个回调函数累加值的初始值），这个回调函数有两个参数：累加值total和当前值value。它将会遍历数组所有元素，将每个元素添加到总和中（总和初始为0）。

此案例使用扩展运算符 (…) 与短路求值(&&)，将属性有条件地添加到对象中。 如果condition为真，则会将{key: value}扩展到对象中；否则不进行任何操作。

这种语法称为计算属性名，它允许使用变量作为对象的键。方括号内的dynamicKey表达式会计算其值，以将其用作属性名称。

这段代码使用三元运算符检查浏览器的在线状态(navigator.onLine)，如果为真则返回\’在线\’，否则返回\’离线\’。这是一种动态检查用户网络连接状态的方法。

这行代码与window的onbeforeunload事件挂钩，当用户离开页面时会弹出一个确认对话框，一般用于防止用户因未保存更改就关闭页面而导致数据丢失。

sumBy函数使用Array.prototype.reduce()对数组中元素特定键的值求和。这是一种根据给定键计算对象数组总和的灵活方法。

此示例将一个查询字符串转换为了一个对象。其中URLSearchParams会进行字符串解析，它将返回一个可迭代对象，然后在通过Object.fromEntries将它转换为对象，从而使 URL 参数检索变得方便多了。

此示例将秒数转换为 HH:MM:SS 格式的字符串。它通过给定的秒数加上时间戳起始点来创建一个新的 Date 对象，然后将其转换为 ISO 字符串，并提取时间部分得到结果。

此示例用于在对象所有的属性值中找到最大值。其中Object.values(obj)将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。

hasValue函数会检查对象的值中是否存在指定的值。其中Object.values(obj)用于获取对象中所有的值的数组，然后通过includes(value)检查指定值是否在该数组中。

此代码首先演示了如何使用可选链运算符 (?.) 安全地访问user.profile的name值。如果user.profile是undefined或null，它会短路并返回undefined，从而避免潜在的类型错误TypeError。

然后，使用空值合并运算符 (??) 检查左侧是否为null或undefined，如果是，则使用默认值\’匿名\’。这可确保后备值不会是其他假值（如\’\’或0）。这对于访问数据结构中可能不存在某些中间属性的深层嵌套属性非常有用。

在 JavaScript 中，空值合并运算符 (??) 和逻辑或 (||) 都可以用于提供默认值，但它们处理假值的方式有所不同。

在上面的例子中，如果把??改为||，行为会稍微有些不同。||的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括null、undefined、0、NaN、\’\’（空字符串）和false。这意味着||左边的值不仅仅是null或undefined，如果还是其他假值，那么都将返回右侧的值。

利用逻辑 AND ( &&) 运算符，函数performAction()仅会在isEligible结果为true时执行。这是一种无需if语句即可有条件地执行函数的简介语法。这对于根据某些条件执行函数非常有用，尤其是在事件处理或回调中。

如果想要条件赋值，则可以这样写

例如创建数字5以内所有正数的数组

Array.from()从类数组或可迭代对象创建一个新数组。这里，它接受一个具有属性length和映射函数的对象。映射函数 ( (_, i) => i + 1) 使用索引 ( i) 生成从 1 到 5 的数字。下划线 ( _) 是一种惯例，表示未使用该参数。

这个案例实现了从字符串中提取文件扩展名。它先找到最后一次出现点号 (.) 位置，然后截取从该位置到末尾的字符串。位运算符 (>>>) 确保了即使未找到点号 (.) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。

toggleClass函数使用classList.toggle()方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在，则删除，否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素，例如菜单根据用户操作显示或隐藏。

以上 25 个 JavaScript 单行代码，以简短高效的方式提供强大的功能。希望您今天能有所收获！

在这运行上述演示代码

笔COOL，一个功能完备前端作品分享平台、使用便捷的在线HTML/CSS/JS代码编辑器，浏览器输入 bi.cool 即可访问

Highlight.js – 前端的代码语法高亮库

千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。

Highlight.js

Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。

highlight.js语法高亮库

Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。

而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。

Highlight.js 在浏览器中可以简单的引用 CDN 来使用：

Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行

Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码

并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：

该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：

使用Highlight.js渲染C++代码

可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：

使用Highlight.js渲染Javascript代码

我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。

在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：

Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。

Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com