JS工具函数

知识库大约 12 分钟

slice,splice,split的区别

slice
用法：array.slice(start,end)，含头不含尾
解释：该方法是对数组或者字符串进行部分截取，并返回一个数副本；

console.log([1,2,3,4,5,6].slice(0,3));    //[1,2,3]
console.log([1,2,3,4,5,6].slice(3));      //[4,5,6]
console.log([1,2,3,4,5,6].slice(8));      //[]
console.log([1,2,3,4,5,6].slice(-1));     //[6]
console.log([1,2,3,4,5,6].slice(-8));     //[1, 2, 3, 4, 5, 6]
console.log([1,2,3,4,5,6].slice(2,-3));   //[3]
console.log("123456".slice(0,3));       //"123"
console.log("123456".slice(3));         //"456"
console.log("123456".slice(8));         //""
console.log("123456".slice(-1));        //"6"
console.log("123456".slice(-8));        //"123456"
console.log("123456".slice(2,-3));      //"3"

splice
用法：array.splice(start,deleteCount,item...)
解释：splice方法从array中移除一个或多个数组，并用新的item替换它们。
参数：
- start是从数组array中移除元素的开始位置。
- deleteCount是要移除的元素的个数。
- 如果有额外的参数，那么item会插入到被移除元素的位置上。
  返回：一个包含被移除元素的数组。
```
var a=['a','b','c'];
console.log(a.splice(1,1,'e','f'));  //["b"]
console.log(a);       //["a", "e", "f", "c"]
```
split
用法：string.split(separator,limit)
解释：split方法把这个string分割成片段来创建一个字符串数组。
参数：
- separator参数可以是一个字符串或一个正则表达式
- limit可以限制被分割的片段数量
```
console.log("0123456".split("",3));  //b=["0","1","2"]
```

生成一周时间

new Array 创建的数组只是添加了length属性，并没有实际的内容。通过扩展后，变为可用数组用于循环。

function getWeekTime(){
  return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())
}
getWeekTime();// ["2020/2/26", "2020/2/27", "2020/2/28", "2020/2/29", "2020/3/1", "2020/3/2", "2020/3/3"]

获取元素类型

const dataType = obj => Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
dataType("");   //"string"

类型判断

判断核心使用Object.prototype.toString，这种方式可以准确的判断数据类型。

 /**
 * @param {any} target
 * @param {string} type
 * @return {boolean}
 */
function isType(target, type) {
    let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
    return targetType === type.toLowerCase()
}
isType([], 'Array');                // true
isType(/\d/, 'RegExp');             // true
isType(new Date(), 'Date');         // true
isType(function(){}, 'Function');   // true
isType(Symbol(1), 'Symbol');        // true

简单的交换变量

你可能使用第三个变量 temp 交换两个变量。但是这个技巧将向你展示一种使用解构来交换变量的新方法。

var a = 6;
var b = 7;
[a,b] = [b,a]
console.log(a,b) // 7 6

对象属性剔除

应用场景很简单，当你需要使用一个对象，但想移除部分属性时，可以使用该方法。同样的，你可以实现一个对象属性选取方法。

/**
 * @param {object} object
 * @param {string[]} props
 * @return {object}
 */
function omit(object, props=[]){
    let res = {};
    Object.keys(object).forEach(key=>{
        if (props.includes(key) === false) {
            res[key] = typeof object[key] === 'object' && object[key] !== null ?
            jsON.parse(jsON.stringify(object[key])):
            object[key]
        }
    });
    return res
}
omit({id: 1,title: 'title',comment: []}, ['id']);       // {title: 'title', comment: []}

日期格式化

一个很灵活的日期格式化函数，可以根据使用者给定的格式进行格式化，能应对大部分场景。

/**
 * @param {string} format
 * @param {number} timestamp - 时间戳
 * @return {string}
 */
function formatDate(format='Y-M-D h:m', timestamp=Date.now()){
    let date = new Date(timestamp)
    let dateInfo = {
    Y: date.getFullYear(),
    M: date.getMonth()+1,
    D: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds()
    }
    let formatNumber = (n) => n > 10 ? n : '0' + n
    let res = format
    .replace('Y', dateInfo.Y)
    .replace('M', dateInfo.M)
    .replace('D', dateInfo.D)
    .replace('h', formatNumber(dateInfo.h))
    .replace('m', formatNumber(dateInfo.m))
    .replace('s', formatNumber(dateInfo.s))
    return res
}
formatDate();                   // "2020-2-24 13:44"
formatDate('M月D日 h:m');        // "2月24日 13:45"
formatDate('h:m Y-M-D', 1582526221604);     //"14:37 2020-2-24"

性能分析

Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能。
performance.timing 包含延迟相关的性能信息。
performance.memory 包含内存信息，是Chrome中添加的一个非标准扩展，在使用时需要注意。

window.onload = function(){
  setTimeout(()=>{
    let t = performance.timing,
        m = performance.memory
    console.table({
      'DNS查询耗时': (t.domainLookupEnd - t.domainLookupStart).toFixed(0),
      'TCP链接耗时': (t.connectEnd - t.connectStart).toFixed(0),
      'request请求耗时': (t.responseEnd - t.responseStart).toFixed(0),
      '解析dom树耗时': (t.domComplete - t.domInteractive).toFixed(0),
      '白屏时间': (t.responseStart - t.navigationStart).toFixed(0),
      'domready时间': (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0),
      'onload时间': (t.loadEventEnd - t.navigationStart).toFixed(0),
      'js内存使用占比': m ? (m.usedjsHeapSize / m.totaljsHeapSize * 100).toFixed(2) + '%' : undefined
    })
  })
}

延迟函数delay

const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms));
const getData = status => new Promise((resolve, reject) => {
     status ? resolve('done') : reject('fail')
});
const getRes = async (data) => {
     try {
         const res = await getData(data)
         const timestamp = new Date().getTime()
         await delay(1000);
         console.log(res, new Date().getTime() - timestamp)
     } catch (error) {
         console.log(error)
     }
 };
getRes(true); // 隔了1秒

防抖

性能优化方案，防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。

基础版本

function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(fn,wait);
  }
}

改进版本添加是否立即执行的参数，因为有些场景下，我们希望函数能立即执行。

/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @param {boolean} immediate - 是否立即执行
 * @return {function}
 */
function debounce(func, wait = 300, immediate = false){
    let timer, ctx;
    let later = (arg) => setTimeout(()=>{
    func.apply(ctx, arg)
    timer = ctx = null
    }, wait)
    return function(...arg){
    if(!timer){
      timer = later(arg)
      ctx = this
      if(immediate){
        func.apply(ctx, arg)
      }
    }else{
      clearTimeout(timer)
      timer = later(arg)
    }
    }
}
let scrollHandler = debounce(function(e){
  console.log(e)
}, 500);

节流

性能优化方案，节流用于减少函数请求次数，与防抖不同，节流是在一段时间执行一次。

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
    let timer = null
    return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
    }
}
let scrollHandler = throttle(function(e){
  console.log(e)
}, 500);

base64数据导出文件下载

/**
 * @param {string} filename - 下载时的文件名
 * @param {string} data - base64字符串
 */
function downloadFile(filename, data){
    let downloadLink = document.createElement('a');
    if ( downloadLink ){
    document.body.appendChild(downloadLink);
    downloadLink.style = 'display: none';
    downloadLink.download = filename;
    downloadLink.href = data;
    if ( document.createEvent ){
      let downloadEvt = document.createEvent('MouseEvents');
      downloadEvt.initEvent('click', true, false);
      downloadLink.dispatchEvent(downloadEvt);
    } else if ( document.createEventObject ) {
      downloadLink.fireEvent('onclick');
    } else if (typeof downloadLink.onclick == 'function' ) {
      downloadLink.onclick();
    }
    document.body.removeChild(downloadLink);
    }
}

检测是否为PC端浏览器

function isPCBroswer() {
  let e = window.navigator.userAgent.toLowerCase()
    , t = "ipad" == e.match(/ipad/i)
    , i = "iphone" == e.match(/iphone/i)
    , r = "midp" == e.match(/midp/i)
    , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
    , a = "ucweb" == e.match(/ucweb/i)
    , o = "android" == e.match(/android/i)
    , s = "windows ce" == e.match(/windows ce/i)
    , l = "windows mobile" == e.match(/windows mobile/i);
  return !(t || i || r || n || a || o || s || l)
}

识别浏览器及平台

function getPlatformInfo(){
  //运行环境是浏览器
  let inBrowser = typeof window !== 'undefined';
  //运行环境是微信
  let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
  let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
  //浏览器 UA 判断
  let UA = inBrowser && window.navigator.userAgent.toLowerCase();
  if(UA){
    let platforms = {
      IE: /msie|trident/.test(UA),
      IE9: UA.indexOf('msie 9.0') > 0,
      Edge: UA.indexOf('edge/') > 0,
      Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),
      IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),
      Chrome: /chrome\/\d+/.test(UA) && !(UA.indexOf('edge/') > 0),
    }
    for (const key in platforms) {
      if (platforms.hasOwnProperty(key)) {
        if(platforms[key]) return key
      }
    }
  }
}

函数柯里化

const curring = fn => {
     const { length } = fn
     const curried = (...args) => {
         return (args.length >= length
               ? fn(...args)
               : (...args2) => curried(...args.concat(args2)))
     }
     return curried
 };
 const listMerge = (a, b, c) => [a, b, c]
 const curried = curring(listMerge);

 console.log(curried(1)(2)(3));     // [1, 2, 3]
 console.log(curried(1, 2)(3));     // [1, 2, 3]
 console.log(curried(1, 2, 3));     // [1, 2, 3]

字符串前面空格去除与替换

const trimStart = str => str.replace(new RegExp('^([\\s]*)(.*)$'), '$2');

console.log(trimStart(' abc '));        // abc
console.log(trimStart('123 '));          // 123

字符串后面空格去除与替换

const trimEnd = str => str.replace(new RegExp('^(.*?)([\\s]*)$'), '$1')

console.log(trimEnd(' abc '));      //   abc
console.log(trimEnd('123 '));       // 123

获取当前子元素是其父元素下子元素的排位

const getIndex = el => {
     if (!el) {
         return -1
     }
     let index = 0;
     do {
         index++
     } while (el = el.previousElementSibling);
     return index
 }

获取当前元素相对于document的偏移量

const getOffset = el => {
    const {top,left} = el.getBoundingClientRect();
    const {scrollTop,scrollLeft} = document.body;
    return {top: top + scrollTop,left: left + scrollLeft}
}

判断是否是移动端

const isMobile = () => 'ontouchstart' in window;

fade动画

const fade = function(el, type = 'in') {
     el.style.opacity = (type === 'in' ? 0 : 1)
     let last = +new Date();
     const tick = () => {
         const opacityValue = (type === 'in' 
                             ? (new Date() - last) / 400
                             : -(new Date() - last) / 400)
         el.style.opacity = +el.style.opacity + opacityValue
         last = +new Date();
         if (type === 'in'
           ? (+el.style.opacity < 1)
           : (+el.style.opacity > 0)) {
             requestAnimationFrame(tick)
         }
     };
     tick();
 };

将指定格式的字符串解析为日期字符串

const dataPattern = (str, format = '-') => {
     if (!str) {
         return new Date()
     }
     const dateReg = new RegExp(`^(\\d{2})${format}(\\d{2})${format}(\\d{4})$`)
     const [, month, day, year] = dateReg.exec(str);
     return new Date(`${month}, ${day} ${year}`)
 };

console.log(dataPattern('12-25-1995'));         // Mon Dec 25 1995 00:00:00 GMT+0800 (中国标准时间)

禁止网页复制粘贴

const html = document.querySelector('html')
 html.oncopy = () => false;
 html.onpaste = () => false;

input框限制只能输入中文

const input = document.querySelector('input[type="text"]')
const clearText = target => {
     const {value} = target;
     target.value = value.replace(/[^\u4e00-\u9fa5]/g, '')
 };
 input.onfocus = ({target}) => {
     clearText(target)
 };
 input.onkeyup = ({target}) => {
     clearText(target)
 };
 input.onblur = ({target}) => {
     clearText(target)
 };
 input.oninput = ({target}) => {
     clearText(target)
 }

去除字符串中的html代码

const removehtml = (str = '') => str.replace(/<[\/\!]*[^<>]*>/ig, '');
console.log(removehtml('<h1>哈哈哈哈<呵呵呵</h1>'));       // 哈哈哈哈<呵呵呵

1、校验数据类型

export const typeOf = function(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

示例：

typeOf('树哥')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

2、防抖

export const debounce = (() => {
  let timer = null
  return (callback, wait = 800) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()

示例：

如 vue 中使用

methods: {
  loadList() {
    debounce(() => {
      console.log('加载数据')
    }, 500)
  }
}

3、节流

export const throttle = (() => {
  let last = 0
  return (callback, wait = 800) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})()

4、手机号脱敏

export const hideMobile = (mobile) =>  mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");

5、开启全屏

export const launchFullscreen = (element) => {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}

6、关闭全屏

export const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

7、大小写转换

参数：

str 待转换的字符串
type 1-全大写 2-全小写 3-首字母大写

export const 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() // substr 已不推荐使用
      return str[0].toUpperCase() + str.substring(1).toLowerCase()
    default:
      return str
  }
}

示例：

turnCase('vue', 1) // VUE
turnCase('REACT', 2) // react
turnCase('vue', 3) // Vue

8、解析URL参数

export const getSearchParams = () => {
  const searchPar = new URLSearchParams(window.location.search)
  const paramsObj = {}
  for (const [key, value] of searchPar.entries()) {
    paramsObj[key] = value
  }
  return paramsObj
}

示例：

// 假设目前位于 https://****com/index?id=154513&age=18;
getSearchParams(); // {id: "154513", age: "18"}

9、判断手机是Andoird还是IOS

/** 
 * 1: ios
 * 2: android
 * 3: 其它
 */
export const 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 1;
  }
  if (isAndroid) {
    return 2;
  }
  return 3;
}

10、数组对象根据字段去重

参数：

arr 要去重的数组
key 根据去重的字段名

export const uniqueArrayObject = (arr = [], key = 'id') => {
  if (arr.length === 0) return
  let list = []
  const map = {}
  arr.forEach((item) => {
    if (!map[item[key]]) {
      map[item[key]] = item
    }
  })
  list = Object.values(map)

  return list
}

示例：

const responseList = [
    { id: 1, name: '树哥' },
    { id: 2, name: '黄老爷' },
    { id: 3, name: '张麻子' },
    { id: 1, name: '黄老爷' },
    { id: 2, name: '张麻子' },
    { id: 3, name: '树哥' },
    { id: 1, name: '树哥' },
    { id: 2, name: '黄老爷' },
    { id: 3, name: '张麻子' },
]

uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]

11、滚动到页面顶部

export const scrollToTop = () => {
  const height = document.documentElement.scrollTop || document.body.scrollTop;
  if (height > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, height - height / 8);
  }
}

12、滚动到元素位置

export const smoothScroll = element => document.querySelector(element).scrollIntoView({ behavior: 'smooth' });

示例：

smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素

13、uuid

export const uuid = () => {
  const temp_url = URL.createObjectURL(new Blob())
  const uuid = temp_url.toString()
  URL.revokeObjectURL(temp_url) //释放这个url
  return uuid.substring(uuid.lastIndexOf('/') + 1)
}

示例：

uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

不过要吐槽一句的是，uuid一般应由后端来进行生成

14、金额格式化

参数：

{number} number：要格式化的数字
{number} decimals：保留几位小数
{string} dec_point：小数点符号
{string} thousands_sep：千分位符号

export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  const n = !isFinite(+number) ? 0 : +number
  const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)
  const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep
  const dec = typeof dec_point === 'undefined' ? '.' : dec_point
  let s = ''
  const toFixedFix = function(n, prec) {
    const k = Math.pow(10, prec)
    return '' + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  const re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }

  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

示例：

moneyFormat(10000000) // 10,000,000.00
moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

15、存储操作

class MyCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage
  }
  setItem(key, value) {
    if (typeof (value) === 'object') value = JSON.stringify(value)
    this.storage.setItem(key, value)
  }
  getItem(key) {
    try {
      return JSON.parse(this.storage.getItem(key))
    } catch (err) {
      return this.storage.getItem(key)
    }
  }
  removeItem(key) {
    this.storage.removeItem(key)
  }
  clear() {
    this.storage.clear()
  }
  key(index) {
    return this.storage.key(index)
  }
  length() {
    return this.storage.length
  }
}

const localCache = new MyCache()
const sessionCache = new MyCache(false)

export { localCache, sessionCache }

示例：

localCache.getItem('user')
sessionCache.setItem('name','树哥')
sessionCache.getItem('token')
localCache.clear()

16、下载文件

参数：

api 接口
params 请求参数
fileName 文件名

const downloadFile = (api, params, fileName, type = 'get') => {
  axios({method:type, url:api, responseType:'blob', params:params}).then((res) => {
    let str = res.headers['content-disposition']
    if (!res || !str) {
      return
    }
    let suffix = ''
    // 截取文件名和文件类型
    if (str.lastIndexOf('.')) {
      fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))
      suffix = str.substring(str.lastIndexOf('.'), str.length)
    }
    //  如果支持微软的文件下载方式(ie10+浏览器)
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([res.data]);
        window.navigator.msSaveBlob(blobObject, fileName + suffix);
      } catch (e) {
        console.log(e);
      }
    } else {
      //  其他浏览器
      let url = window.URL.createObjectURL(res.data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName + suffix)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(link.href);
    }
  }).catch((err) => {
    console.log(err.message);
  })
}

使用：

downloadFile('/api/download', {id}, '文件名')

17、时间操作

关于时间操作，没必要自己再写一大串代码了，强烈推荐使用 day.js

Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，下载、解析和执行的JavaScript更少，为代码留下更多的时间。

18、深拷贝

export const clone = parent => {
  // 判断类型
  const isType = (obj, type) => {
    if (typeof obj !== "object") return false;
    const typeString = Object.prototype.toString.call(obj);
    let flag;
    switch (type) {
      case "Array":
        flag = typeString === "[object Array]";
        break;
      case "Date":
        flag = typeString === "[object Date]";
        break;
      case "RegExp":
        flag = typeString === "[object RegExp]";
        break;
      default:
        flag = false;
    }
    return flag;
  };

  // 处理正则
  const getRegExp = re => {
    var flags = "";
    if (re.global) flags += "g";
    if (re.ignoreCase) flags += "i";
    if (re.multiline) flags += "m";
    return flags;
  };
  // 维护两个储存循环引用的数组
  const parents = [];
  const children = [];

  const _clone = parent => {
    if (parent === null) return null;
    if (typeof parent !== "object") return parent;

    let child, proto;

    if (isType(parent, "Array")) {
      // 对数组做特殊处理
      child = [];
    } else if (isType(parent, "RegExp")) {
      // 对正则对象做特殊处理
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, "Date")) {
      // 对Date对象做特殊处理
      child = new Date(parent.getTime());
    } else {
      // 处理对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用Object.create切断原型链
      child = Object.create(proto);
    }

    // 处理循环引用
    const index = parents.indexOf(parent);

    if (index != -1) {
      // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
      return children[index];
    }
    parents.push(parent);
    children.push(child);

    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }

    return child;
  };
  return _clone(parent);
};

此方法存在一定局限性：一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。

如果确实想要完备的深拷贝，推荐使用 lodash 中的 cloneDeep 方法。

19、模糊搜索

参数：

list 原数组
keyWord 查询的关键词
attribute 数组需要检索属性

export const fuzzyQuery = (list, keyWord, attribute = 'name') => {
  const reg = new RegExp(keyWord)
  const arr = []
  for (let i = 0; i < list.length; i++) {
    if (reg.test(list[i][attribute])) {
      arr.push(list[i])
    }
  }
  return arr
}

示例：

const list = [
  { id: 1, name: '树哥' },
  { id: 2, name: '黄老爷' },
  { id: 3, name: '张麻子' },
  { id: 4, name: '汤师爷' },
  { id: 5, name: '胡万' },
  { id: 6, name: '花姐' },
  { id: 7, name: '小梅' }
]
fuzzyQuery(list, '树', 'name') // [{id: 1, name: '树哥'}]

20、遍历树节点

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

示例：

假设我们要从树状结构数据中查找 id 为 9 的节点

const treeData = [{
  id: 1, label: '一级 1', children: [
      { id: 4, label: '二级 1-1', children: [
        { id: 9, label: '三级 1-1-1' }, 
        { id: 10, label: '三级 1-1-2'}
      ]
    }
 ]}, {
  id: 2, label: '一级 2', children: [
      { id: 5, label: '二级 2-1' },
      { id: 6, label: '二级 2-2'}
  ]}, {
    id: 3, label: '一级 3', children: [
        { id: 7, label: '二级 3-1'},
        { id: 8, label: '二级 3-2'}
    ]
}];

let result
foreachTree(data, (item) => {
  if (item.id === 9) {
    result = item
  }
})
console.log('result', result)  // {id: 9,label: "三级 1-1-1"}

JS工具函数

# slice,splice,split的区别

# 生成一周时间

# 获取元素类型

# 类 型 判 断

# 简单的交换变量

# 对象属性剔除

# 日期格式化

# 性 能 分 析

# 延迟函数delay

# 防 抖

# 节 流

# base64数据导出文件下载

# 检测是否为PC端浏览器

# 识别浏览器及平台

# 函数柯里化

# 字符串前面空格去除与替换

# 字符串后面空格去除与替换

# 获取当前子元素是其父元素下子元素的排位

# 获取当前元素相对于document的偏移量

# 判断是否是移动端

# fade动画

# 将指定格式的字符串解析为日期字符串

# 禁止网页复制粘贴

# input框限制只能输入中文

# 去除字符串中的html代码

# 1、校验数据类型

# 2、防抖

# 3、节流

# 4、手机号脱敏

# 5、开启全屏

# 6、关闭全屏

# 7、大小写转换

# 8、解析URL参数

# 9、判断手机是Andoird还是IOS

# 10、数组对象根据字段去重

# 11、滚动到页面顶部

# 12、滚动到元素位置

# 13、uuid

# 14、金额格式化

# 15、存储操作

# 16、下载文件

# 17、时间操作

# 18、深拷贝

# 19、模糊搜索

# 20、遍历树节点

slice,splice,split的区别

生成一周时间

获取元素类型

类型判断

简单的交换变量

对象属性剔除

日期格式化

性能分析

延迟函数delay

防抖

节流

base64数据导出文件下载

检测是否为PC端浏览器

识别浏览器及平台

函数柯里化

字符串前面空格去除与替换

字符串后面空格去除与替换

获取当前子元素是其父元素下子元素的排位

获取当前元素相对于document的偏移量

判断是否是移动端

fade动画

将指定格式的字符串解析为日期字符串

禁止网页复制粘贴

input框限制只能输入中文

去除字符串中的html代码

1、校验数据类型

2、防抖

3、节流

4、手机号脱敏

5、开启全屏

6、关闭全屏

7、大小写转换

8、解析URL参数

9、判断手机是Andoird还是IOS

10、数组对象根据字段去重

11、滚动到页面顶部

12、滚动到元素位置

13、uuid

14、金额格式化

15、存储操作

16、下载文件

17、时间操作

18、深拷贝

19、模糊搜索

20、遍历树节点