269个JavaScript小函数( 三三三三三三三三 )

爱被打了一巴掌 2023-02-18 08:06 1阅读 0赞

# 131.file转base64 #

/**
         * @param { * } file 图片文件
           */
           export const fileToBase64 = file => {
           let reader = new FileReader();
           reader.readAsDataURL(file);
       reader.onload = function (e) {
            return e.target.result
        };
        };
    复制代码

# 132.递归生成树形结构 #

export function getTreeData(data, pid, pidName = 'parentId', idName = 'id', childrenName = 'children', key) {
        let arr = [];
    
        for (let i = 0; i < data.length; i++) {
            if (data[i][pidName] == pid) {
                data[i].key = data[i][idName];
                data[i][childrenName] = getTreeData(data, data[i][idName], pidName, idName, childrenName);
                arr.push(data[i]);
            }
        }
        
        return arr;
    
    }
    复制代码

# 133.遍历树节点 #

export function foreachTree(data, childrenName = 'children', callback) {
        for (let i = 0; i < data.length; i++) {
            callback(data[i]);
            if (data[i][childrenName] && data[i][childrenName].length > 0) {
                foreachTree(data[i][childrenName], childrenName, callback);
            }
        }
    }
    复制代码

# 134.追溯父节点 #

export function traceParentNode(pid, data, rootPid, pidName = 'parentId', idName = 'id', childrenName = 'children') {
        let arr = [];
        foreachTree(data, childrenName, (node) => {
            if (node[idName] == pid) {
                arr.push(node);
                if (node[pidName] != rootPid) {
                    arr = arr.concat(traceParentNode(node[pidName], data, rootPid, pidName, idName));
                }
            }
        });
        return arr; 
    }
    复制代码

# 135.寻找所有子节点 #

export function traceChildNode(id, data, pidName = 'parentId', idName = 'id', childrenName = 'children') {
        let arr = [];
        foreachTree(data, childrenName, (node) => {
            if (node[pidName] == id) {
                arr.push(node);
                arr = arr.concat(traceChildNode(node[idName], data, pidName, idName, childrenName));
            }
        });
        return arr;
    }
    复制代码

# 136.根据pid生成树形结构 #

/**
        *  @param { object } items 后台获取的数据
    *  @param { * } id 数据中的id
     *  @param { * } link 生成树形结构的依据
        */
        export const createTree = (items, id = null, link = 'pid') =>{
        items.filter(item => item[link] === id).map(item => ({ ...item, children: createTree(items, item.id) }));
        };
    复制代码

# 137.查询数组中是否存在某个元素并返回元素第一次出现的下标 #

/** 
         * @param {*} item 
         * @param { array } data
           */
           export function inArray(item, data) {
           for (let i = 0; i < data.length; i++) {
               if (item === data[i]) {
               return i;
            }
        }
        return -1;
        }
    复制代码

# 138.Windows根据详细版本号判断当前系统名称 #

/**
         * @param { string } osVersion 
           */
           export function OutOsName(osVersion) {
           if(!osVersion){
               return
           }
           let str = osVersion.substr(0, 3);
           if (str === "5.0") {
               return "Win 2000"
           } else if (str === "5.1") {
               return "Win XP"
           } else if (str === "5.2") {
               return "Win XP64"
           } else if (str === "6.0") {
               return "Win Vista"
           } else if (str === "6.1") {
               return "Win 7"
           } else if (str === "6.2") {
               return "Win 8"
           } else if (str === "6.3") {
               return "Win 8.1"
           } else if (str === "10.") {
               return "Win 10"
       } else {
            return "Win"
        }
        }
    复制代码

# 139.判断手机是Andoird还是IOS #

/**
        *  0: ios
        *  1: android
        *  2: 其它
           */
           export function getOSType() {
           let u = navigator.userAgent, app = navigator.appVersion;
           let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
           let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
           if (isIOS) {
               return 0;
       }
        if (isAndroid) {
            return 1;
        }
        return 2;
        }
    复制代码

# 140.函数防抖 #

/**
         * @param { function } func
        
         * @param { number } wait 延迟执行毫秒数
        
     * @param { boolean } immediate  true 表立即执行，false 表非立即执行
           */
           export function debounce(func,wait,immediate) {
           let timeout;
           return function () {
               let context = this;
               let args = arguments;
        
               if (timeout) clearTimeout(timeout);
               if (immediate) {
                   let callNow = !timeout;
                   timeout = setTimeout(() => {
                       timeout = null;
                   }, wait);
                   if (callNow) func.apply(context, args)
           }
            else {
                timeout = setTimeout(() => {
                    func.apply(context, args)
                }, wait);
            }
     
        }
        }
    复制代码

# 145.函数节流 #

/**
         * @param { function } func 函数
        
         * @param { number } wait 延迟执行毫秒数
        
         * @param { number } type 1 表时间戳版，2 表定时器版
           */
           export function throttle(func, wait ,type) {
           let previous, timeout;
           if(type===1){
               previous = 0;
           }else if(type===2){
           timeout = null;
           }
           return function() {
               let context = this;
               let args = arguments;
               if(type===1){
                   let now = Date.now();
        
                   if (now - previous > wait) {
                       func.apply(context, args);
                       previous = now;
                   }
               }else if(type===2){
               if (!timeout) {
                       timeout = setTimeout(() => {
                       timeout = null;
                        func.apply(context, args)
                    }, wait)
                }
            }
     
        }
        }
    复制代码

# 146.判断数据类型 #

/**
         * @param {*} target 
           */
           export function type(target) {
           let ret = typeof(target);
           let template = {
               "[object Array]": "array",
               "[object Object]":"object",
               "[object Number]":"number - object",
           "[object Boolean]":"boolean - object",
               "[object String]":'string-object'
           };
        
           if(target === null) {
               return 'null';
           }else if(ret == "object"){
               let str = Object.prototype.toString.call(target);
               return template[str];
       }else{
            return ret;
        }
        }
    复制代码

# 147.生成指定范围随机数 #

/**
      * @param { number } min 
      * @param { number } max 
        */
        export const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
    复制代码

# 148.数组乱序 #

/**
         * @param {array} arr
           */
           export function arrScrambling(arr) {
           let array = arr;
           let index = array.length;
           while (index) {
               index -= 1;
               let randomIndex = Math.floor(Math.random() * index);
               let middleware = array[index];
               array[index] = array[randomIndex];
           array[randomIndex] = middleware
        }
        return array
        }
    复制代码

# 150.数组交集 #

/**
      * @param { array} arr1
      * @param { array } arr2
        */
        export const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));
    复制代码

# 151.数组中某元素出现的次数 #

/**
    
         * @param { array } arr
     * @param {*} value
        */
        export function countOccurrences(arr, value) {
        return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
        }
    复制代码

# 152.加法函数（精度丢失问题） #

/**
         * @param { number } arg1
         * @param { number } arg2
           */
           export function add(arg1, arg2) {
           let r1, r2, m;
       try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
        try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
        m = Math.pow(10, Math.max(r1, r2));
        return (arg1 * m + arg2 * m) / m
        }
    复制代码

# 153.减法函数（精度丢失问题） #

/**
         * @param { number } arg1
         * @param { number } arg2
           */
           export function sub(arg1, arg2) {
           let r1, r2, m, n;
           try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
       try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
        m = Math.pow(10, Math.max(r1, r2));
        n = (r1 >= r2) ? r1 : r2;
        return Number(((arg1 * m - arg2 * m) / m).toFixed(n));
        }
    复制代码

# 154.除法函数（精度丢失问题） #

/**
         * @param { number } num1
         * @param { number } num2
           */
           export function division(num1,num2){
           let t1,t2,r1,r2;
           try{
               t1 = num1.toString().split('.')[1].length;
           }catch(e){
               t1 = 0;
           }
           try{
               t2=num2.toString().split(".")[1].length;
           }catch(e){
               t2=0;
       }
        r1=Number(num1.toString().replace(".",""));
        r2=Number(num2.toString().replace(".",""));
        return (r1/r2)*Math.pow(10,t2-t1);
        }
    复制代码

# 155.乘法函数（精度丢失问题） #

/**
         * @param { number } num1
         * @param { number } num2
           */
           export function mcl(num1,num2){
       let m=0,s1=num1.toString(),s2=num2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
        }
    复制代码

# 156.递归优化（尾递归） #

/**
         * @param { function } f
           */
           export function tco(f) {
       let value;
           let active = false;
           let accumulated = [];
        
           return function accumulator() {
               accumulated.push(arguments);
               if (!active) {
                   active = true;
                   while (accumulated.length) {
                       value = f.apply(this, accumulated.shift());
                   }
                   active = false;
               return value;
            }
        };
        }
    复制代码

# 157.生成随机整数 #

export function randomNumInteger(min, max) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * min + 1, 10);
            case 2:
                return parseInt(Math.random() * (max - min + 1) + min, 10);
            default:
                return 0
        }
    }
    复制代码

# 158.去除空格 #

/**
         * @param { string } str 待处理字符串
         * @param  { number } type 去除空格类型 1-所有空格  2-前后空格  3-前空格 4-后空格 默认为1
           */
           export function trim(str, type = 1) {
           if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return;
           switch (type) {
               case 1:
                   return str.replace(/\s/g, "");
               case 2:
                   return str.replace(/(^\s)|(\s*$)/g, "");
               case 3:
                   return str.replace(/(^\s)/g, "");
               case 4:
               return str.replace(/(\s$)/g, "");
            default:
                return str;
        }
        }
    复制代码

# 159.大小写转换 #

/**
     * @param { string } str 待转换的字符串
     * @param { number } type 1-全大写 2-全小写 3-首字母大写 其他-不转换
       */
    
    export function turnCase(str, type) {
        switch (type) {
            case 1:
                return str.toUpperCase();
            case 2:
                return str.toLowerCase();
            case 3:
                return str[0].toUpperCase() + str.substr(1).toLowerCase();
            default:
                return str;
        }
    }
    复制代码

# 160.随机16进制颜色 hexColor #

/**
     * 方法一
           */
           export function hexColor() {
        
           let str = '#';
           let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
           for (let i = 0; i < 6; i++) {
               let index = Number.parseInt((Math.random() * 16).toString());
           str += arr[index]
        }
        return str;
        }
    复制代码

# 161.随机16进制颜色 randomHexColorCode #

/**
         * 方法二
           */
       export const randomHexColorCode = () => {
        let n = (Math.random() * 0xfffff * 1000000).toString(16);
        return '#' + n.slice(0, 6);
        };
    复制代码

# 162.转义html(防XSS攻击) #

export const escapeHTML = str =>{
        str.replace(
            /[&<>'"]/g,
            tag =>
                ({
                    '&': '&',
                    '<': '<',
                    '>': '>',
                    "'": ''',
                    '"': '"'
                }[tag] || tag)
        );
    };
    复制代码

# 163.检测移动/PC设备 #

export const detectDeviceType = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; };
    复制代码

# 164.隐藏所有指定标签 #

/**
      * 例: hide(document.querySelectorAll('img'))
        */
        export const hideTag = (...el) => [...el].forEach(e => (e.style.display = 'none'));
    复制代码

# 165.返回指定元素的生效样式 #

/**
      * @param { element} el  元素节点
      * @param { string } ruleName  指定元素的名称
        */
        export const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
    复制代码

# 166.检查是否包含子元素 #

/**
      * @param { element } parent
      * @param { element } child
      * 例：elementContains(document.querySelector('head'), document.querySelector('title')); // true
        */
        export const elementContains = (parent, child) => parent !== child && parent.contains(child);
    复制代码

# 167.数字超过规定大小加上加号“+”，如数字超过99显示99+ #

/**
         * @param { number } val 输入的数字
         * @param { number } maxNum 数字规定界限
           */
           export const outOfNum = (val, maxNum) =>{
           val = val ? val-0 :0;
           if (val > maxNum ) {
           return `${maxNum}+`
        }else{
            return val;
        }
        };
    复制代码

# 168.如何隐藏所有指定的元素 #

const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none'));
    
     // 事例:隐藏页面上所有`<img>`元素?
     hide(document.querySelectorAll('img'))
    复制代码

# 169.如何检查元素是否具有指定的类？ #

页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

const hasClass = (el, className) => el.classList.contains(className)
    
     // 事例
     hasClass(document.querySelector('p.special'), 'special') // true
    复制代码

# 170.如何切换一个元素的类? #

const toggleClass = (el, className) => el.classList.toggle(className)
    
     // 事例 移除 p 具有类`special`的 special 类
     toggleClass(document.querySelector('p.special'), 'special')

## 171.如何获取当前页面的滚动位置？ ##

const getScrollPosition = (el = window) => ({
       x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
       y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
     });
    
     // 事例
     getScrollPosition(); // {x: 0, y: 200}
    复制代码

## 172.如何平滑滚动到页面顶部 ##

const scrollToTop = () => {
       const c = document.documentElement.scrollTop || document.body.scrollTop;
       if (c > 0) {
         window.requestAnimationFrame(scrollToTop);
         window.scrollTo(0, c - c / 8);
       }
     }
    
     // 事例
     scrollToTop()
    复制代码

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
     requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。
    
    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
     requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。
    复制代码

## 173.如何检查父元素是否包含子元素？ ##

const elementContains = (parent, child) => parent !== child && parent.contains(child);
    
     // 事例
     elementContains(document.querySelector('head'), document.querySelector('title')); 
     // true
     elementContains(document.querySelector('body'), document.querySelector('body')); 
     // false
    复制代码

## 174.如何检查指定的元素在视口中是否可见？ ##

## 175.如何获取元素中的所有图像？ ##

const getImages = (el, includeDuplicates = false) => {
       const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
       return includeDuplicates ? images : [...new Set(images)];
     };
    
     // 事例：includeDuplicates 为 true 表示需要排除重复元素
     getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
     getImages(document, false); // ['image1.jpg', 'image2.png', '...']