大多数的编程语言都是足够开放的，允许程序员用多种方式来做类似的结果。

JavaScript也不例外。对于JavaScript，我们经常会发现，为了一个相似的结果，我们可以用多种方式来做事情，这有时会让人感到困惑。 有些用法比其他替代方法更好。

你如何改变你的JS代码，让它更简单，更容易阅读?

如果你在一个团队中工作，写出简单的代码是很重要的。因为你不是在真空中工作，所以你的程序必须容易被你的团队成员所遵循。每个人都喜欢干净的代码! 学习如何让JavaScript尽可能的不痛苦，是一项宝贵的技能，肯定会让你成为办公室的宠儿。

JS-Tips

控制台提示

代码执行时间

使用 console.time 和 console.timeEnd 来确定你的代码有多快(或多慢)?

这是一个例子：

1. console.time('TEST') 
2.  
3. //some random code to be tested 
4.  
5. console.timeEnd('TEST') 

风格的Loggin

要获得自定义输出，我们将像下面那样添加%c，然后将实际的CSS作为第二个参数。

1. console.log('%c AWESOME', 'color: indigo; font-size:100px') 

Tables

当你想记录一个对象数组时，console.table将派上用场。

1. // x,y,z are objects 
2. console.table([x, y, z]) 

堆栈跟踪日志

如果你想获得函数被调用的堆栈跟踪，你可以使用 console.trace。

1. console.time('TEST') 
2.  
3. //some random code to be tested 
4.  
5. console.timeEnd('TEST') 

动态键名

超级有用的提示!

1. const key = 'dynamic' 
2.  
3. const obj = { 
4.   dynamic: 'hey', 
5.   [key]: 'howdy' 
6. } 
7.  
8. obj.dynamic // hey 
9. obj[key] // howdy 
10. obj['dynamic'] //hey 
11. obj.key // howdy 

基于回调的API->promise

为了让事情变得更干净、更高效，你可以将回调(ourCallbackFn)转化为承诺是一个函数。

1. // we start with this  
2. async function foo() { 
3.   const x = await something1() 
4.   const y = await something2() 
5.  
6.   ourCallbackFn(){ 
7.     // … 
8.   } 
9. } 
10.  
11. // the transformation 
12. async function foo() { 
13.   const x = await something1() 
14.   const y = await something2() 
15.  
16.   await promiseCallbackFn() //👀 
17. } 
18.  
19. function promiseCallbackFn() { 
20.   return new Promise((resolve, reject) => { 
21.     ourCallbackFn((err, data) => { //👀 
22.       if (err) { 
23.         reject(err) 
24.       } else { 
25.         resolve(data) 
26.       } 
27.     }) 
28.   }) 
29. } 

忘记字符串连接，使用模板

使用+操作符将字符串连接在一起以建立一个有意义的字符串是老式的。此外，用动态值(或表达式)连接字符串可能会导致挫折和错误。