JavaScript 小技巧 笔记

★★★★★★★★★★

1. 多次解构

   let obj = {
     part1: {
       name: '01',
       age: 23
     }
   }
   
   // 解构
   const { part1: { name, age } } = obj
   // 使用
   console.log(name, age) // "01"  23
   console.log(part1) // Uncaught ReferenceError: part1 is not defined
   
   // 多次解构
   const { part1: { name, age }, part1 } = obj
   console.log(part1) // {name: "01", age: 23}
   

2. 数字分隔符

   const myMoney = 1_000_000_000_000
   
   console.log(myMoney)  // 1000000000000
   

3. try

   |

   catch

   |

   finally

   能使用

   return

   提前终止操作吗？

   function demo() {
     try {
       return 1
     } catch (err) {
       console.log(err)
       return 2
     } finally {
       try {
         return 3
       } finally {
         return 4
       }
     }
   }
   
   console.log(demo())  // 4
   

4. 获取当前调用栈

   function firstFunction() { secondFunction(); } 
   function secondFunction() { thridFunction(); } 
   function thridFunction() { console.log(new Error().stack); } 
   
   firstFunction();
   
   //=> Error 
   //  at thridFunction (<anonymous>:2:17) 
   //  at secondFunction (<anonymous>:5:5) 
   //  at firstFunction (<anonymous>:8:5) 
   //  at <anonymous>:10:1
   

   使用

   new Error().stack

   就能随时获取到当前代码执行的调用栈信息，也是一种调试代码的办法

5. 如何快速生成随机数字+字符串

   const str = Math.random().toString(36).substr(2, 10);
   console.log(str);   // 'w5jetivt7e'
   

   先是

   Math.random()

   生成

   [0, 1)

   的数，然后调用

   number

   的

   toString

   方法将其转换成

   36

   进制的，按照

   MDN

   的说法，

   36

   进制的转换应该是包含了字母

   a~z

   和 数字

   0~9

   的，因为这样生成的是

   0.89kjna21sa

   类似这样的，所以要截取一下小数部分，即从索引

   2

   开始截取

   10

   个字符就是我们想要的随机字符串了

6. 最快获取

   dom

   的方法

   <div id="zero2one"></div>
   
   const el = document.getElementById('zero2one')  
   console.log(el) // <div id="zero2one"></div>
   
   // 等同于
   console.log(zero2one) // <div id="zero2one"></div>
   

7. ||

   和

   ??

   的区别？

   ??

   ：空值合并操作符是一个逻辑操作符，当左侧的操作数为

   null

   或者

   undefined

   时，返回其右侧操作数，否则返回左侧操作数。

   ||

   ：与逻辑或操作符不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用

   ||

   来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，

   ''

   或

   0

   ）时。见下面的例子

   const foo = null ?? 'default string';
   console.log(foo);
   // expected output: "default string"
   
   const baz = 0 ?? 42;
   console.log(baz);
   // expected output: 0
   

8. Array.prototype.sort()

   中排序顺序

   arr.sort()

   ：默认从小到大

   arr.sort((a, b) => a - b)

   ：从小到大

   arr.sort((a, b) => b - a)

   ：从大到小

9. 在使用

   EventSource

   的过程中注意：

   • eventSource.onmessage

     ：只能监听默认的

     type = message

     的事件

   • eventSource.addEventListener("custom", (event) => {})

     ：可以监听其它

     custom

     事件

★★★★★★★★★★