文章目录
- 💬 前言
- 👉 数组相关
- ① 随机打乱数组顺序
- ② 借助 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}!`);
}
📃 参考文献
- js小众且好用的技巧【一行代码】
往期内容 💨
🔥 < elementUI组件样式及功能补全: 实现点击steps组件跳转对应步骤 >
🔥 < CSDN周赛解析:第 28 期 >
🔥 < elementUi 组件插件: el-table表格拖拽修改列宽及行高 及 使用注意事项 >
🔥 < 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >