这些JS工具函数够你用到2020年底了

缺乏、安全感 2021-09-03 04:59 298阅读 0赞

## 前言 ##

活不多说，自己平时搜集的干货函数奉上。

## 干货函数 ##

### 视频全屏 ###

// 全屏
          function fullScreen(el) { 
            const isFullscreen =
              document.fullScreen ||
              document.mozFullScreen ||
              document.webkitIsFullScreen;
            if (!isFullscreen) { 
              //进入全屏,多重短路表达式
              (el.requestFullscreen && el.requestFullscreen()) ||
                (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
                (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
                (el.msRequestFullscreen && el.msRequestFullscreen());
            } else { 
              //退出全屏,三目运算符
              document.exitFullscreen
                ? document.exitFullscreen()
                : document.mozCancelFullScreen
                ? document.mozCancelFullScreen()
                : document.webkitExitFullscreen
                ? document.webkitExitFullscreen()
                : "";
            }
          }

### 找出数字在数组中下一个相邻的元素 ###

### 格式化时间 ###

/** * @param {number} time * @param {string} option * @returns {string} */
    function formatTime(time, option) { 
      if (('' + time).length === 10) { 
        time = parseInt(time) * 1000
      } else { 
        time = +time
      }
      const d = new Date(time)
      const now = Date.now()
    
      const diff = (now - d) / 1000
    
      if (diff < 30) { 
        return '刚刚'
      } else if (diff < 3600) { 
        // less 1 hour
        return Math.ceil(diff / 60) + '分钟前'
      } else if (diff < 3600 * 24) { 
        return Math.ceil(diff / 3600) + '小时前'
      } else if (diff < 3600 * 24 * 2) { 
        return '1天前'
      }
      if (option) { 
        return parseTime(time, option)
      } else { 
        return (
          d.getMonth() +
          1 +
          '月' +
          d.getDate() +
          '日' +
          d.getHours() +
          '时' +
          d.getMinutes() +
          '分'
        )
      }
    }

### 解析时间 ###

/** * Parse the time to string * @param {(Object|string|number)} time * @param {string} cFormat * @returns {string | null} */
    function parseTime(time, cFormat) { 
      if (arguments.length === 0 || !time) { 
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') { 
        date = time
      } else { 
        if ((typeof time === 'string')) { 
          if ((/^[0-9]+$/.test(time))) { 
            // support "1548221490638"
            time = parseInt(time)
          } else { 
            // support safari
            // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }
    
        if ((typeof time === 'number') && (time.toString().length === 10)) { 
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = { 
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { 
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {  return ['日', '一', '二', '三', '四', '五', '六'][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
    }

### 解析Url地址 ###

/** * @param {string} url * @returns {Object} */
    function param2Obj(url) { 
      const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
      if (!search) { 
        return { }
      }
      const obj = { }
      const searchArr = search.split('&')
      searchArr.forEach(v => { 
        const index = v.indexOf('=')
        if (index !== -1) { 
          const name = v.substring(0, index)
          const val = v.substring(index + 1, v.length)
          obj[name] = val
        }
      })
      return obj
    }

### 合并两个对象 ###

/** * Merges two objects, giving the last one precedence * @param {Object} target * @param {(Object|Array)} source * @returns {Object} */
    function objectMerge(target, source) { 
      if (typeof target !== 'object') { 
        target = { }
      }
      if (Array.isArray(source)) { 
        return source.slice()
      }
      Object.keys(source).forEach(property => { 
        const sourceProperty = source[property]
        if (typeof sourceProperty === 'object') { 
          target[property] = objectMerge(target[property], sourceProperty)
        } else { 
          target[property] = sourceProperty
        }
      })
      return target
    }

### 数组去重 ###

/** * @param {Array} arr * @returns {Array} */
    function uniqueArr(arr) { 
      return Array.from(new Set(arr))
    }

### 防抖 ###

/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */
    function debounce(func, wait, immediate) { 
      let timeout, args, context, timestamp, result
    
      const later = function() { 
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp
    
        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) { 
          timeout = setTimeout(later, wait - last)
        } else { 
          timeout = null
          // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
          if (!immediate) { 
            result = func.apply(context, args)
            if (!timeout) context = args = null
          }
        }
      }
    
      return function(...args) { 
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) { 
          result = func.apply(context, args)
          context = args = null
        }
    
        return result
      }
    }

### 简易搜索 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <input type="text" id="int">
    </body>
    <script> let list = ["示例1","示例12","示例5","示例56"]; document.querySelector('#int').onchange=function(e){ console.log(search(e.target.value)); } function search(val) { if (val) { return list.filter(function (item) { return Object.keys(item).some(function (key) { return String(item[key]).toLowerCase().indexOf(val) > -1 }) }) } return list } </script>
    </html>

### 将秒化为时分秒 ###

### 将时分秒化为秒 ###

function formSeconds (times) { 
            let arr = times.split(":");
            let s = arr[2];
            let m = arr[1];
            let h = arr[0];
            let m1 = m<10?m.replace(/\b(0+)/gi,""):m;
            let h1 = h<10?h.replace(/\b(0+)/gi,""):h;
            return m1*60+Number(h1)+Number(s)
    }

### 对象深层遍历 ###

var obj = { 
    		a:{ 
    			b:{ 
    				c:"maomin"
    			}
    		}
    	}
    const safeGet = (obj, path) => { 
            try { 
              return path.split('.').reduce((o, k) => o[k], obj)
            } catch (e) { 
              return undefined
            }
        }
    console.log(safeGet(obj,'a.b.c'));// maomin

### 带有分割符的字符串转化成一个n维数组 ###

var str = "A-2-12";
     var str1 = str.split('-');
     var arr = str1.reverse().reduce((pre,cur,i) => { 
     if(i==0)
      {  pre.push(cur)
       return pre
     }
      return [cur,pre]
    },[])
    console.log(arr) // ["A"["B",["C"]]]

### 获取时间戳 ###

function thedata(d){ 
          return d.replace(/\-/g, "\/")
      }
      var serverTime = parseInt(new Date(thedata('2020-08-12 15:52:11')).valueOf());
      console.log(serverTime); // 1597218731000，获取到时间戳

### 对象深拷贝 ###

### 简易版对象拷贝 ###

function copy(obj) { 
        if(typeof obj == "object") {  //判断是否复杂类型
           var result = obj.constructor == Array ? [] : { };//判断数组类型或是object，数组即result=[]，object即result={}
            for(let i in obj) { 
                result[i] = typeof obj[i] == "object" ? copy(obj[i]) : obj[i]//判断数据每一项是否是object
            }
        } else { 
            var result = obj //基本类型直接拷贝
        }
      return result;
    }

### 实现一个模板引擎 ###

### 节流 ###

// ①定时器实现
    const throttle = (fn,delay = 500) =>{ 
      let flag = true;
      return (...args) => { 
        if(!flag) return;
        flag = false;
        setTimeout(() => { 
          fn.apply(this,args);
          flag = true;
        },delay);
      };
    }
    // ②时间戳实现
    const throttle = (fn,delay = 500) => { 
      let preTime = Date.now();
      return (...args) => { 
        const nowTime = Date.now();
        if(nowTime - preTime >= delay){ 
          	preTime = Date.now();
          	fn.apply(this,args);
        }
      }
    }

### 封装fetch ###

/** * 封装fetch函数，用Promise做回调 * @type { {get: (function(*=)), post: (function(*=, *=))}} */
    const fetchUtil = { 
        get: (url) => { 
            return new Promise((resolve, reject) => { 
                fetch(url, { 
                    method: 'GET',
                    headers: { 
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }
                }).then((response) => response.json()).then(response => { 
                    resolve(response);
                }).catch(err => { 
                    reject(new Error(err));
                });
            });
        },
        post: (url, params) => { 
            return new Promise((resolve, reject) => { 
                fetch(url, { 
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: params
                }).then((response) => response.json()).then(response => { 
                    resolve(response);
                }).catch(err => { 
                    reject(new Error(err));
                });
            });
        }
    };

### 判断浏览器环境 ###

### 定义数组内部对象形式 ###

### 解析html字符串 ###

function (htmlobj) { 
    	      var el = document.createElement('div');
    	      el.innerHTML = htmlobj;
    	      var tags = el.getElementsByTagName('img');
    	      var text = tags[0].getAttribute("src");
    	      return text;
    }

### 判断浏览器是否支持摄像头 ###

### 回文算法 ###

//忽略标点符号、大小写和空格，正着读和反着读一模一样。
    function made(str) { 
            var str1 = str.toLowerCase(); //先将字符串全部转换为小写
            var reg = /[\W\_]/g; // 删除所有非字母数字字符和下划线
            var str2 = str1.replace(reg, ""); // 去掉非字母和非数字
            var str3 = str2.split(""); // 字符串分隔成数组
            var str4 = str3.reverse(); // 反转数组中的元素
            var str5 = str4.join(""); // 反转后的数组转化为字符串
            return str2 === str5;
    }

> 持续更新…

## 结语 ##

>  *  欢迎关注我的公众号**前端历劫之路**
>  *  回复关键词**电子书**，即可获取12本前端热门电子书。
>  *  回复关键词**红宝书第4版**，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
>  *  关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。  
>     ![Image 1][]  
>

[Image 1]: