不得不学的25个JavaScript技巧，让你成为高效开发达人！

15个杀手级JS技巧，你可能从未听说过
这里有 20 种简短而强大的 JavaScript 技术，它们可以最大限度地提高生产力 ⚡️ 并最大限度地减少痛苦 🩸。我们来深入了解下，让我们深入研究代码🤘

1、独特的数组技巧

过滤掉数组中的重复值。
const arr = ["a", "b", "c", "d", "d", "c", "e"]
const uniqueArray = Array.from(new Set(arr));
console.log(uniqueArray); // ["a", "b", "c", "d", "e"]

2、独特的对象数组技巧

该Set对象不允许您过滤掉重复的对象，因为每个对象都不同。 JSON.stringify在这里对我们有用。
const arr = [{ key: "value" }, { key2: "value2" }, { key: "value" }, { key3: "value3" }];
const uniqueObjects = Array.from(
new Set(
arr.map(JSON.stringify)
)
).map(JSON.parse)
console.log(uniqueObjects);

3、数组迭代器索引技巧

使用.map和.forEachjavascript迭代函数，你可以得到每个项目的索引。
const arr = ["a", "b", "c"];
const letterPositions = arr.map(
(char, index) => `${char} is at index ${index}`
)

4、按字符数拆分字符串技巧

我们可以使用.match正则表达式函数按字符拆分字符串n。
const str = "asdfghjklmnopq";
const splitPairs = str.match(/.{1,2}/g);
console.log(splitPairs); // ["as", "df", "gh", "jk", "lm", "no", "pq"]

5、用不同的字符拆分字符串技巧

另一个 regex hack.match允许你将像“aabbc”这样的字符串拆分成一个数组["aa", "bb", "c"]。
const str = "abbcccdeefghhiijklll";
const splitChars = str.match(/(.)1*/g);
console.log(splitChars); // ["a", "bb", "ccc", "d", "ee", "f", "g", "hh", "ii", "j", "k", "lll"]

6、将键值数组转换成对象技巧

您可以将“ Object.entryified”键值数组转换回对象Object.fromEntries
const entryified = [
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
];
const originalObject = Object.fromEntries(entryified);
console.log(originalObject); // { key1: "value1", ... }

7、计数技巧

您可能想计算一个项目在数组中出现的次数。我们可以使用.filter带有迭代器的函数来完成此操作。
const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"];
// creating a unique array to avoid counting the same char more than once
const unique = Array.from(new Set(occurrences));
const occurrenceCount = Object.fromEntries(
unique.map(char => {
const occurrenceCount = occurrences.filter(c => c === char).length;
return [char, occurrenceCount]
})
)
console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... }

8、回调替换技巧

该.replace功能并不限制您只能用固定字符串替换。您可以将回调传递给它并使用匹配的子字符串。
const string = "a dog went to dig and dug a doggone large hole";
const replacedString = string.replace(/d.g/g, str => str "gy")
console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole

9、条件链技巧

你们中的许多人都熟悉在 JS 中遇到未定义的错误，条件链接可以防止很多这种情况的发生。
可选的链接( )运算?.符访问对象的属性或调用函数。如果使用此运算符访问的对象或调用的函数未定义或为空，则表达式短路并计算为未定义，而不是抛出错误。
const obj = {
"a": "aaaaaaa",
"b": null
};
console.log(obj.b.d); // throws an error
console.log(obj.b?.d); // returns undefined

10、数字限制技巧

通常，您可能需要将数字限制在特定范围内。每次需要时都用三元运算符来做是一件很痛苦的事情。函数要干净得多。
const constrain = (num, min, max) => {
if(num < min) return min;
else if(num > max) return max;
else return num;
}
constrain(5, 1, 3) // 3
constrain(2, 1, 5) // 2
constrain(0, -100, 100) // 0
一个更好的方法是使用Math.min并Math.max像这样：
const constrain = (num, min, max) => Math.min(Math.max(num, min), max)

11、数组前后索引技巧

该.at函数允许您使用正数和负数从头到尾索引数组。
const arr = [1, 2, 3, 4, 5];
arr.at(0) // 1
arr.at(1) // 2
arr.at(-1) // 5
arr.at(-2) // 4

12、字母排序技巧

按字母顺序对字符串数组进行排序
const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"];
const sorted = words.sort((a, b) => a.localeCompare(b));
console.log(sorted); // ["clojure", "go", "javascript", "python", "ruby", "swift", "typescript"]
💡提示a.localeCompare(b)：您可以通过切换到在升序和降序之间切换顺序b.localeCompare(a)

13、对象遍历技巧

Object.entries允许我们将 JSON 对象转换为键值对数组，从而使我们能够使用循环或数组迭代器对其进行迭代。
const obj = {
"key1": "value1",
"key2": "value2",
"key3": "value3"
};
const iteratedObject = Object.entries(obj)
.map(([key, value]) => `${key} = ${value}`);
console.log(iteratedObject); // ["key1 = value1", "key2 = value2", "key3 = value3"]

14、根据 Truthy/Falsy 值排序技巧

您可以按真值/假值对数组进行排序，将具有真值的值放在最前面，然后是假值。
const users = [
{ "name": "john", "subscribed": false },
{ "name": "jane", "subscribed": true },
{ "name": "jean", "subscribed": false },
{ "name": "george", "subscribed": true },
{ "name": "jelly", "subscribed": true },
{ "name": "john", "subscribed": false }
];
const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))
Number(false)等于零，Number(true)等于一。这就是我们如何通过排序函数传递它。

15、四舍五入至小数点后 n 位技巧

您可以使用 . 将小数舍入为n数字.toFixed。请注意，.toFixed将数字转换为字符串，因此我们必须将其重新解析为数字。
console.log(Math.PI); // 3.141592653589793
console.log(Number(Math.PI.toFixed(2)))
对你有用吗，如果有用记得点赞支持！
对你有帮助吗？如果有帮助，记得点赞支持哦！可以进入我们的钉钉群参与更多的JavaScript和ES6阶段课程学习。在我们的学习群里也整理了很多有趣的课程内容，更大家一起交流！三十天计划群里还提供了算法、数组等知识体系！

更多完整JavaScript课程体系在我们的系统班你有完整的呈现，包含了JavaScript基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

如果需要深度学习的同学可以练习助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
真机调试，云服务部署上线；
Linux环境下 的 Nginx 部署，Nginx 性能优化；
Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用 使用 Git 在线项目部署；
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频 图文教程 项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。