共计 3303 个字符，预计需要花费 9 分钟才能阅读完成。
作者：Mahdhi Rezvi
译者：前端小智
来源：medium
点赞再看，养成习惯
本文
GitHubhttps://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎 Star 和完善，大家面试可以参照考点复习，希望我们一起有点东西。
众所周知，JavaScript 一直在快速变化。在新的 ES2020 中，有很多很棒的特性，我们大都已经迫不及待尝试了。老实说，有时我们可以用不同角度来编写代码，同样也能达到相同的效果，而且有的还会更简短，更清晰。
下面是列出一些 JavaScript 有用的技巧，相信总有一天会对你有所帮助。
1. 方法参数验证
ES6 中可以为函数的参数设置默认值，有了这个，我们可以实现一个验证方法参数不能为空的巧妙技巧。
const isRequired = () => {throw new Error('param is required')
}
const print = (num = isRequired()) => {console.log(`printing ${num}`)
}
print(2) //printing 2
print() // error
print(null) //printing null
2. 格式化 JSON 代码
我们都非常熟悉JSON.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}6. 排序数字数组
JavaScript 数组带有内置的 sort 方法。默认情况下，此 sort 方法将数组元素转换为字符串，并对其进行字典排序。但这在对数字数组进行排序时，会有问题，解决方法就是手写一个排序方法。
[0,10,4,9,123,54,1].sort((a,b) => a-b)
>>> [0, 1, 4, 9, 10, 54, 123]7. 禁用鼠标右键
有些情况，我们想在网页上禁用鼠标的右键，可以使用下面的方式来禁用：
<body oncontextmenu="return false">
<div></div>
</body>这个简单的代码就可以禁用右键单击。
8. 在解构中使用别名
解构赋值是一个 JavaScript 表达式，它可以将数组中的值或对象中的属性解构缩不同的变量中。不必使用现有的对象变量，我们可以根据自己的偏好重命名它们。
const object = {number: 10}
const {number} = object
// 使用别名
const {number: otherNumber} = object
console.log(otherNumber) //109. 获取数组中的最后一项
如果要获取数组的末尾元素，可以使用 slice 方法。
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. 等待 Promises
在某些情况下，我们需要等待多个 Promise 结束，这里，我们使用Promise.all。
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 拒绝时，该方法将引发错误。这意味着我们的代码将不会等到所有的 Promise 都完成。
如果想要等到所有 Promise 都完成后，无论它们被拒绝还是成功，可以使用Promise.allSettled。此方法在 ES2020 的最终版本中。
const PromiseArray = [Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{console.log(res);
}).catch(err => console.log(err));
//[//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]代码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。
原文：https://blog.bitsrc.io/10-sup…
交流
文章每周持续更新，可以微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎 Star 和完善，大家面试可以参照考点复习，另外关注公众号，后台回复 福利，即可看到福利，你懂的。