5 个简洁的 JavaScript 技巧
在这篇文章中,我将向你展示 5 个简洁的 JavaScript 技巧,帮助你成为更优秀的开发者。虽然这篇文章需要一些 JavaScript 知识,但我鼓励每个人都仔细阅读。
简洁提示列表:
解构
还有什么比举例更好的解释方式呢?假设我们有一个包含老虎数据的对象,我们需要一个函数来判断老虎是否濒临灭绝。
const tiger = {
specific: 'Bengal',
latin: 'Panthera tigris tigris',
endangered: true,
weight: 325,
diet: 'fox',
legs: 4
}
// Bad code 💩
function isEndangered(tiger){
if (tiger.endangered) {
return `${tiger.specific} tiger (${tiger.latin}) is endangered!`
} else {
return `${tiger.specific} tiger (${tiger.latin}) is not
endangered.`
}
}
// Good code 👍
function isEndangered({endangered, specific, latin}){
if (endangered) {
return `${specific} tiger (${latin}) is endangered!`;
} else {
return `${specific} tiger (${latin}) is not
endangered.`;
}
}
// or
function isEndangered(tiger) {
const {endangered, specific, latin} = tiger;
// the rest is the same
控制台提示
代码执行时间⏲️
使用console.time
和console.timeEnd
来确定您的代码有多快(或多慢)?
以下是一个例子:
console.time('TEST')
//some random code to be tested
console.timeEnd('TEST')
以时尚的方式登录😎
为了获得自定义输出,我们将添加%c
如下所示的内容,然后将实际的CSS作为第二个参数。
console.log('%c AWESOME', 'color: indigo; font-size:100px')
表格
当你想要记录日志时对象数组console.table
就会派上用场。
// x,y,z are objects
console.table([x, y, z])
堆栈跟踪日志
如果你想获取函数调用位置的堆栈跟踪,你可以使用console.trace
function foo(){
function bar(){
console.trace('test')
}
bar();
}
foo();
动态键名称
超级有用的提示!
const key = 'dynamic'
const obj = {
dynamic: 'hey',
[key]: 'howdy'
}
obj.dynamic // hey
obj[key] // howdy
obj['dynamic'] //hey
obj.key // howdy
设置为数据结构
如果我要求你从数字数组中删除重复项,你会怎么做?
使用 Set 作为数据结构来提升应用的功能和性能。以下示例将使用 Set 对象从数字数组中删除重复项。
const arr = [1, 2, 2, 3]
const newArr = new Set(arr)
const unique = [...newArr]
// unique - [1, 2, 3]
基于回调的 API -> Promises
为了使事情变得更清晰、更高效,您可以将回调(ourCallbackFn)转换为一个函数的承诺。
// we start with this
async function foo() {
const x = await something1()
const y = await something2()
ourCallbackFn(){
// ...
}
}
// the transformation
async function foo() {
const x = await something1()
const y = await something2()
await promiseCallbackFn() //👀
}
function promiseCallbackFn() {
return new Promise((resolve, reject) => {
ourCallbackFn((err, data) => { //👀
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
以上就是 5 个 JavaScript 技巧的列表。是不是很棒?
希望我的第一篇文章对你有所帮助!任何反馈都非常感谢!
谢谢你!
达利博尔
文章来源:https://dev.to/daliboru/5-neat-javascript-tips-284o