＜ JavaScript小技巧：如何优雅的用【一行代码】实现Js中的常用功能＞

在这里插入图片描述

文章目录

💬 前言
👉 数组相关
- ① 随机打乱数组顺序
- ② 借助 new Set（）对数组去重 / 对象数组根据唯一值去重
- ③ 查找数组中【最值】出现的索引
👉 Web浏览器相关
- ① 重新加载当前页面，相当于 Ctrl + R
- ② 滚动到页面顶部
- ③ 指定元素滚动到可视窗口起点 / 终点
- ④ 从给定文本中剥离 HTML标签 / 剔除HTML字符串中的标签
- ⑤ 将指定文本内容复制到粘贴板上
- ⑥ 获取cookie
👉 数据操作
- ① 使用解构赋值简化变量声明
- ② 使用展开运算符进行数组和对象操作
- ③ 使用对象解构和默认参数简化函数参数
📃 参考文献
往期内容 💨

今天这篇文章，给大伙分享一些通过【 一行代码 】实现 Javascript 中比较常用的一些方法和功能！

💬 前言

在开发中，采用简洁的语法和结构，遵循一致的命名规范，具有良好的代码组织和注释，能很好的提高代码的质量。

主要有以下几个优点：

可读性：易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确，降低理解代码的难度，提高代码的可读性。
可维护性：易于维护。当代码逻辑清晰、结构简洁时，开发者可以更快速地定位和修复bug，进行功能扩展或修改。同时，可读性高的代码也有助于后续的代码重构和优化。
可扩展性：更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。此外，简洁的代码往往更少依赖于特定的实现细节，提供了更多的灵活性和可替换性。
错误减少和调试时间：更容易写出正确的逻辑，减少了出错的概率。同时，当代码出现问题时，优雅简洁的代码也更容易进行调试和定位错误。
性能优化：简洁的代码通常更高效，减少了不必要的计算和资源消耗。精简的代码结构和算法可以提高代码的执行效率和性能

👉 数组相关

① 随机打乱数组顺序

const randomSort = list => list.sort(() => Math.random() - 0.5)
randomSort([0,1,2,3,4,5,6,7,8,9]) // 随机排列结果

② 借助 new Set（）对数组去重 / 对象数组根据唯一值去重

这个知识点小温不止说过一次了，具体案例看代码！

// 普通数组去重
const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]

// 对象数组唯一值去重
const duplicateById = list => [...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values()]
duplicateById([{id: 1, name: 'jack'}, {id: 2, name: 'rose'}, {id: 1, name: 'jack'}])
// [{id: 1, name: 'jack'}, {id: 2, name: 'rose'}]

③ 查找数组中【最值】出现的索引

// 最大值
const indexOfMax = (arr) => arr.reduce((pre, cur, i, a) => (cur > a[pre] ? i : pre), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2

// 最小值
const indexOfMin = (arr) => arr.reduce((prev, curr, i, a) => (curr < a[prev] ? i : prev), 0)
indexOfMin([2, 5, 3, 4, 1, 0, 9]) // 5

👉 Web浏览器相关

① 重新加载当前页面，相当于 Ctrl + R

location.reload();

② 滚动到页面顶部

window.scrollTo(0, 0);

③ 指定元素滚动到可视窗口起点 / 终点

// 起点
const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })
scrollToTop(document.body)

// 终点
const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })
scrollToBottom(document.body)

借助 scrollIntoView 函数进行元素滚动, scrollIntoViewOptions 配置项如下：

注： scrollIntoViewOptions [可选]，目前这个参数浏览器对它的支持并不好，可以查看下文图片

在这里插入图片描述

scrollIntoViewOptions	意义	可选
`behavior`	定义过渡动画	“instant"或"smooth”。默认为"auto"
`block`	定义垂直方向的对齐	“start”，“center”，“end"或"nearest”。默认为"center"
`block`	定义水平方向的对齐	“start”，“center”，“end"或"nearest”。默认为"center"

选项具体意义：

auto，表示没有平滑的滚动动画效果。
smooth，表示有平滑的滚动动画效果。

start，表示顶端 / 左端对齐。
center，表示中间对齐。
end，表示底端 / 右端对齐。
nearest：
block > 如果元素完全在视口内，则垂直方向不发生滚动。如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。
inline > 如果元素完全在视口内，则水平方向不发生滚动。
如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。

④ 从给定文本中剥离 HTML标签 / 剔除HTML字符串中的标签

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
stripHtml('<div>test</div>') // 'test'

因为HTML标签都是成双成对，且可预测规律。也可以使用正则来剔除HTML字符串中的HTML标签。具体如下：

// 去除 HTML标签
const deleteHTML = info => info.replace(/<\/?.+?\/?>/g, "")
deleteHTML('<div>test</div>') // 'test'

⑤ 将指定文本内容复制到粘贴板上

const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copy('你需要复制的文本')

⑥ 获取cookie

将cookie转换成需要的对象类型

const getCookie = () => document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
getCookie()

👉 数据操作

① 使用解构赋值简化变量声明

// 传统变量声明
const firstName = person.firstName;
const lastName = person.lastName;
// 解构赋值简化
const { firstName, lastName } = person;

② 使用展开运算符进行数组和对象操作

// 合并数组
const combined = [...array1, ...array2];
// 复制对象
const clone = { ...original };

③ 使用对象解构和默认参数简化函数参数

// 传统参数设置默认值
function greet(name) {
 const finalName = name || 'Guest';
 console.log(`Hello, ${finalName}!`);
 }
  
 // 对象解构和默认参数简化
 function greet({ name = 'Guest' }) {
 console.log(`Hello, ${name}!`);
 }