众所周知,JavaScript 一直在快速变化。在新的 ES2020 中,有很多很棒的特性,我们大都已经迫不及待尝试了。老实说,有时我们可以用不同角度来编写代码,同样也能达到相同的效果,而且有的还会更简短,更清晰。
下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助。
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
我们都非常熟悉JSON.stringify
,但比较少知道的是它还可以进行格式化的输出。
stringify
方法有三个参数:value
,replacer
和space
。其中,后两个是可选参数,这也是我们很少知道它的原因。要缩进JSON,必须使用space
参数。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}
要从数组中获得唯一的值,需要使用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]
在某些情况下, 我们想从数组中删除虚值。虚值是 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);
实际需求中,我们经常需要合并多个对照,快速的做法可以像下面这么做:
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 数组带有内置的sort
方法。默认情况下,此sort
方法将数组元素转换为字符串,并对其进行字典排序。但这在对数字数组进行排序时,会有问题,解决方法就是手写一个排序方法。
[0,10,4,9,123,54,1].sort((a,b) => a-b)
>>> [0, 1, 4, 9, 10, 54, 123]
有些情况,我们想在网页上禁用鼠标的右键,可以使用下面的方式来禁用:
这个简单的代码就可以禁用右键单击。
解构赋值是一个JavaScript表达式,它可以将数组中的值或对象中的属性解构缩不同的变量中。不必使用现有的对象变量,我们可以根据自己的偏好重命名它们。
const object = { number: 10 }
const { number } = object
// 使用别名
const { number: otherNumber } = object
console.log(otherNumber) //10
如果要获取数组的末尾元素,可以使用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]
在某些情况下,我们需要等待多个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 ...}
//]
作者:Mahdhi Rezvi 译者:前端小智 来源:medium
原文:https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b
相关热门推荐
CSS Viewport 单位,很多人还不知道使用它来快速布局!
30 个纯 HTML5 实现的游戏
很多人不知道 v-for 可以这样解构
小智最近在学习正则,学习过程中发现这 6 个方便的正则表达式
详解 ES10 中 Object.fromEntries() 的缘起
有哪些被低估未被广泛使用的有用的 HTML标签?
【干货】工业软件为什么这么难?
JS执行上下文的两个阶段做了些啥?
为了反对种族歧视,代码托管平台GitHub可能要改术语了