安利一下日常开发中JS的小技巧

·  阅读 7242

前言

今天给大家安利一波我在做前端开发(crtl+c/v)中的一些提升幸福度 js 使用小技巧,它可以帮助你书写干净和优雅的JavaScript代码。

类型转换

// 字符转数字
'32' * 1       // 32
null * 1       // 0
undefined * 1  // NaN

// 转字符串
'' + 32        // '32'
'' + undefined // 'undifined'
'' + null      // 'null'

// 时间戳
+new Date()    // 1656041075862

tips:利用 js 运算符中的隐式转换,在做运算的时候会根据运算符的不同对数据做不同的转换。

多值分配

const [a, b, c] = [1, 'hi', true]  // a = 1 , b = 'hi' , c = true

const [x, ...y] = [1, 2, 3];       // x = 1 , y = [2, 3]

tips:利用数组的解构赋值(对象解构也可以)。

取整

  5.8 | 0    // 5
 -5.8 | 0    // -5

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

奇偶数

const num = 13;

if (num & 1) console.log("odd");
else console.log("even");        // odd

tips:利用计算机中二进制按位与运算,通过 & 1 ,可以得出 奇数(十进制)位与1的结果是1偶数(十进制)位与1的结果是0

&& 和 ||

const a = true && 4 && "a";      // a

const b = true && 0 && "b";      // 0

const c = 1 || 2;                // 1

const d = "d" || "hi";           // 'd'

const e = "" || "hi";            // 'hi'

// 常用于回调函数调用
cb && cb()                       // cb 存在执行 cb 方法

tips: 利用逻辑运算符的特性,可以实现降低代码的

&& :从左往右依次判断,当当前值为 true 则继续,为 false 则返回此值。

|| :从左往右依次判断,当当前值为 false 则继续,为 true 则返回此值。

?? 运算符

0 ?? 2           // 0
1 ?? 2           // 1
false ?? 2       // false
null ?? 2        // 2
undefined ?? 2   // 2 

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

UniqueID 生成器

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

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

uuid 生成器

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

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

数组过滤 False 类型值

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

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

数组去重

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

tips:利用 ES6Set 数据解构不重复的特性。

数组乱序

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

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

数组求和

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

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

数组交集

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 4];

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

tips:利用数组 filterincludes 函数过滤过存在于另一个数组中的元素,求交集。

数组并集

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];

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

tips:利用数组 concatincludes 函数拼接另一个数组中不存在的元素,求并集。

数组差集

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 5, 6];

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

tipsarr1 利用 filter 函数过滤出不存在于 arr2 中的元素,得到差集。

数组补集

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 5, 6];
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函数分别过滤过不存在于自身内的元素,得到其补集。

格式化金额

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

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

补0

const fillZero = (num, len) => num.toString().padStart(len, "0");
fillZero(9, 2);    // 09

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

保留小数

const round = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;

round(12.453,2);       // 12.45
round(12.457,2);       // 12.46

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

判断数据类型

const type = (val) => Object.prototype.toString.call(val).slice(8, -1);

type(1);              // Number
type('s');            // String
type(false);          // Boolean
type([]);             // Array
type({});             // Object
type(new Date());     // Date
type(Symbol(0));      // Symbol
type(undefined);      // Undefined
type(null);           // Null

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

获取URL参数

const urlSearch = '?name=tom&age=18&id=1&id=2';
const urlParams = new URLSearchParams(urlSearch);

urlParams.get('name');        // tom
urlParams.has('age');         // true
urlParams.get('xx');          // null
urlParams.toString();         // name=tom&age=18&id=1&id=2
urlParams.getAll('id');       // ['1','2']

urlParams.append('method', 'get');
urlParams.toString();         // name=tom&age=18&id=1&id=2&method=get

tips:利用 URLSearchParams() 构造器创建并返回一个新的 URLSearchParams 对象,可以很方便的获取url参数,还有类似Object.keys()Object.values()等方法。

图片懒加载

const lazyLoad = function () {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if ( entry.intersectionRatio > 0 ) {
                entry.target.src = entry.target.dataset.src;
                observer.unobserve(entry.target)
            }
        })
    })
    Array.from(document.getElementsByTagName('img')).forEach(el => {
        observer.observe(el)
    })
}

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

结语

以上是我大概整理的一些开发中的技巧和方法,可以发现里面涉及到了很多新的es特性和 api,使用时可要记得兼容性哦,感兴趣的小伙伴可自行查阅学习,也欢迎小伙伴们一起交流探讨,加油!

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改