10个超级实用的JavaScript开发技巧
英文 | https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b
翻译 | web前端开发 （ID：web_qdkf)
众所周知，JavaScript一直在迅速变化。借助新的ES2020，引入了许多很棒的功能，你可能想知道这些功能。老实说，你可以通过许多不同的方式编写代码。
他们可能会达到相同的目标，但其中一些会更短，更清晰，更友好，更易读易维护。你可以使用一些小技巧来使代码更清晰。这里列出了一些对JavaScript开发人员有用的技巧，这些技巧一定会对你有所帮助。
1、方法参数验证
JavaScript允许你设置参数的默认值。使用此方法，我们可以实施一个巧妙的技巧来验证你的方法参数。
const isRequired = () => { throw new Error('param is required'); };const print = (num = isRequired()) => { console.log(`printing ${num}`) };print(2);//printing 2print()// errorprint(null)//printing null
这样是不是更整洁了？
2、格式化JSON代码
现在你已经很熟悉了JSON.stringify。但是您知道可以使用来格式化输出stringify吗？实际上，这更简单。
该stringify方法需要输入value，replacer和space三个参数。后两个是可选参数。这就是为什么我们以前不使用它们。要缩进JSON，必须使用space参数。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));>>> { "name": "John", "Age": 23}
3、从数组中获取唯一值
从数组中获取唯一值，要求我们使用filter方法来过滤出重复值。但是有了新的Set本机对象，事情就变得非常顺利和容易了。
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];>>> [1, 2, 3, "school", "ball", false, true]
4、从数组中删除虚假值
在某些情况下，你可能想从数组中删除伪造的值。虚假值是JavaScript中的值为FALSE的值。
JavaScript中只有六个伪造的值，它们是，
undefined
null
NaN
0
“” （空字符串）
false
滤除这些虚假值的最简单方法是使用以下函数。
myArray .filter（Boolean）;
如果要对数组进行一些修改，然后过滤新数组，则可以尝试这样的操作。请记住，原件myArray保持不变。
myArray .map(item => { // Do your changes and return the new item }) .filter(Boolean);
5、合并多个对象
我有几个实例需要合并两个或多个类，这是我的首选方法。
const user = { name: 'John Ludwig', gender: 'Male' };const college = { primary: 'Mani Primary School', secondary: 'Lass Secondary School' };const skills = { programming: 'Extreme', swimming: 'Average', sleeping: 'Pro' };const summary = {...user, ...college, ...skills};
这三个点在JavaScript中也称为散布运算符。
6、排序数字数组
JavaScript数组带有内置的sort方法。默认情况下，此sort方法将数组元素转换为字符串，并对其进行字典排序。在对数字数组进行排序时，这可能会导致问题。因此，这里是解决此问题的简单解决方案。
[0,10,4,9,123,54,1].sort((a,b) => a-b);>>> [0, 1, 4, 9, 10, 54, 123]
你正在提供一个将number数组中的两个元素与sort方法进行比较的函数。此功能可帮助我们接收正确的输出。
7、禁用右键
你可能曾经想阻止用户在你的网页上单击鼠标右键。尽管这种情况很少见，但是在某些情况下你可能需要此功能。
< body oncontextmenu = “ return false” > < div > < / div>< / body>
这个简单的代码段将为你的用户禁用右键单击。
8、使用别名进行销毁
该解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。可以不使用现有的对象变量，而可以将其重命名为自己的首选项。
const object = {number：10};//抓取数字const {number} = object;//抓取数字并将其重命名为otherNumberconst {number：otherNumber} = object;console.log（otherNumber）; // 10
9、获取数组中的最后一项
如果要从数组的末尾获取元素，则可以将splice方法与负整数一起使用。
let array = [0，1，2，3，4，5，6，7]console.log（array.slice（-1））;>>> [7]console.log（array.slice（-2））;>>> [6，7]console.log（array.slice（-3））;>>> [5、6、7]
10、等到进程完成
在某些情况下，你将需要等待多个进程结束。我们可以用来Promise.all并行履行进程。
注意：进程将在单核CPU中同时运行，并在多核CPU中并行运行。它的主要任务是等待传递给它的所有进程都得到解决。
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err))
要注意的是，主要事件Promise.all，当一个进程拒绝时，该方法将引发错误。这意味着你的代码将不会等到你所有的进程都完成。
如果你要等到所有进程都完成后，无论它们被拒绝还是被解决，都可以使用Promise.allSettled。此方法在ES2020的最终版本中。
const PromiseArray = [ Promise.resolve（100）， Promise.reject（null）， Promise.resolve（“数据发布”）， Promise.reject（新的错误（'出问题了'）））];Promise.allSettled（PromiseArray）.then（res => {console.log（res）;}）。catch（err => console.log（err））;// [// {状态：“已完成”，值：100}，// {状态：“已拒绝”，原因：空}，// {状态：“已完成”，值：“数据发布”}}，// {状态：“已拒绝”，原因：错误：出了点问题……}//]
即使某些进程被拒绝，Promise.allSettled也会从你所有的承诺中返回结果。
