类型转换

  1. // 字符转数字
  2. '32' * 1       // 32
  3. null * 1       // 0
  4. undefined * 1  // NaN
  6. // 转字符串
  7. '' + 32        // '32'
  8. '' + undefined // 'undifined'
  9. '' + null      // 'null'
  11. // 时间戳
  12. +new Date()    // 1656041075862  = new Date().getTime()
  13. Date.now()

多值分配

  1. const [a, b, c] = [1, 'hi', true]  // a = 1 , b = 'hi' , c = true
  3. const [x, ...y] = [1, 2, 3];       // x = 1 , y = [2, 3]

利用数组的结构赋值（对象结构也可以）。

取整

  1. 5.8 | 0    // 5 
  2. -5.8 | 0   // 5 
  3. ~~ 5.8         // 5 
  4. ~~ -5.8        // 5

:::info tips：利用计算机中二进制按位或进行计算（注意，如果n为正，则n | 0 是向下舍入，如果n为负数，则是向上舍入）,~~(双非按位取反运算) 也可以达到类似效果。 :::

奇偶数

  1. const num = 13; 
  2. if (num & 1) console.log("odd"); 
  3. else console.log("even");        // odd

:::info tips：利用计算机中二进制按位与运算，通过 & 1 ，可以得出 奇数（十进制）位与1的结果是1，偶数（十进制）位与1的结果是0。 :::

&& 和 ||

  1. const a = true && 4 && "a";    // a 
  2. const b = true && 0 && "b";      // 0 
  3. const c = 1 || 2;                // 1 
  4. const d = "d" || "hi";           // 'd' 
  5. const e = "" || "hi";            // 'hi'
  6. // 常用于回调函数调用
  7. cb && cb()               // cb 存在执行 cb 方法

:::info tips： 利用逻辑运算符的特性，可以实现降低代码的
&& ：从左往右依次判断，当当前值为 true 则继续，为 false 则返回此值。
|| ：从左往右依次判断，当当前值为 false 则继续，为 true 则返回此值。 :::

?? 运算符

  1. 0 ?? 2           // 0
  2. 1 ?? 2           // 1 
  3. false ?? 2       // false 
  4. null ?? 2        // 2 
  5. undefined ?? 2   // 2

:::danger tips：某些情况可以用 ?? 来替代 ||，因为 ?? 判断运算符左侧的值为null 或 undefined时，才返回右侧的值，可以处理 0 ， false 的情况。 :::

UniqueID 生成器

  1. Math.random().toString(36).slice(8)

tips：利用toSring函数将随机数转换为一个36进制字符串，在通过slice函数截取小数点以后的字符。

uuid 生成器

  1. const uuid = crypto.randomUUID();  // '460e025e-cf90-47c0-a2a3-f920755d63c5'

tips：利用 Web Crypto 提供的加密接口，可以很方便的使用其 api 生成 uuid。

数组过滤 False 类型值

  1. const arr = [false, null, 0, "", undefined, NaN, 1, 2, 3] 
  2. const nArr = arr.filter(Boolean)  // [1,2,3]

:::warning tips：利用 Boolean 函数对数组中的元素进行转换后过滤。 :::

数组去重

  1. const arr = [1,2,3,3,2,1] const uArr= [...new Set(arr)]    // [1,2,3]

:::success tips：利用 ES6 中 Set 数据结构不重复的特性。 :::

数组乱序

  1. const arr = [1, 2, 3, 4, 5, 6, 7, 8]; 
  2. arr.sort(() => Math.random() - 0.5)   // [5, 4, 3, 2, 6, 8, 1, 7]

tips：利用数组自带的 sort 函数通过随机数的比较来打乱（会改变原始数组）。

数组求和

  1. const arr = [1,2,3] 
  2. const sum = arr.reduce((x, y) => x + y)  // 6

tips：利用 reduce 函数收敛的特性，传入一个累加函数，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

数组交集

  1. const arr1 = [1, 2, 3, 4, 5]; 
  2. const arr2 = [2, 3, 4]; 
  3. arr1.filter(v => arr2.includes(v));   // [2, 3, 4]

tips：利用数组 filter 和 includes 函数过滤过存在于另一个数组中的元素，求交集。

数组并集

  1. const arr1 = [1, 2, 3]; 
  2. const arr2 = [2, 3, 4]; 
  3. arr1.concat(arr2.filter(v => !arr1.includes(v)));  // [1, 2, 3, 4]

tips：利用数组 concat 和 includes 函数拼接另一个数组中不存在的元素，求并集。

数组差集

  1. const arr1 = [1, 2, 3, 4] 
  2. const arr2 = [2, 3, 5, 6]; 
  3. arr1.filter(v => !arr2.includes(v));   // [1, 4]

tips：arr1 利用 filter 函数过滤出不存在于 arr2 中的元素，得到差集。

数组补集?

  1. const arr1 = [1, 2, 3, 4] 
  2. const arr2 = [2, 3, 5, 6]; 
  3. Array.from(new Set(arr1.concat(arr2).filter(v => !new Set(arr1).has(v) || !new Set(arr2).has(v))))    // [1, 4, 5, 6]

tips：先通过concat拼接两数组后，然后再通过filter函数分别过滤过不存在于自身内的元素，得到其补集。

格式化金额

  1. const num = 100010001;
  2. num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");  // 100,010,001

tips：利用 replace 函数做正则匹配每匹配到三位数字添加一个, 。

补0

  1. //向前补
  2. '9'.padStart(10,'1')  //'1111111119'
  3. //向后补
  4. '9'.padEnd(10,'1') //'91111111111'

tips：利用padStart函数补全字符串长度，可以达到不够补0 的情况，可以格式化时间等。

保留小数

  1. const round = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal; 
  2. round(12.453,2);       // 12.45 round(12.457,2);       // 12.46

tips：利用进行指数倍增，再指数缩减的方式，可以实现保留任意位数小数，还可以避免精度丢失的问题。

判断数据类型(666)

  1. const type = (val) => Object.prototype.toString.call(val).slice(8, -1); 
  2. type(1);              // Number 
  3. type('s');            // String 
  4. type(false);          // Boolean 
  5. type([]);             // Array 
  6. type({});             // Object 
  7. type(new Date());     // Date 
  8. type(Symbol(0));      // Symbol 
  9. type(undefined);      // Undefined 
  10. type(null);           // Null

tips：利用 Object.prototype.toString.call 方法可以准确判断数据类型 包含包装数据类型

获取URL参数

  1. const urlSearch = '?name=tom&age=18&id=1&id=2'; 
  2. const urlParams = new URLSearchParams(urlSearch); urlParams.get('name');        // tom 
  3. urlParams.has('age');         // true 
  4. urlParams.get('xx');          // null 
  5. urlParams.toString();         // name=tom&age=18&id=1&id=2 urlParams.getAll('id');       // ['1','2']
  6. urlParams.append('method', 'get'); 
  7. urlParams.toString();         // name=tom&age=18&id=1&id=2&method=get

tips：利用 URLSearchParams() 构造器创建并返回一个新的 URLSearchParams 对象，可以很方便的获取url参数，还有类似Object.keys()，Object.values()等方法。 但只能获取到一层参数 像这种 ‘?user={name:”tom”,age:18}&id=1&id=2’,对象就获取不到了

图片懒加载

  1. const lazyLoad = function () {
  2.     const observer = new IntersectionObserver(entries => {
  3.         entries.forEach(entry => {
  4.             if (entry.intersectionRatio > 0) {
  5.                 entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target)
  6.             }
  7.         })
  8.     })     
  9.     Array.from(document.getElementsByTagName('img')).forEach(el => { observer.observe(el) })
  10. }

tips：利用 IntersectionObserver() 构造器创建并返回一个IntersectionObserver对象，通过观察 intersectionRatio 的状态来确定目标是否在视口内。

欢迎补充~~~~