CV肉饼王

Talk is cheap. Show me the code.

0%

【JS】常用函数

发表于 更新于 分类于 Disqus： 本文字数： 6.2k 阅读时长 ≈ 6 分钟

1.数组求和

1
2
3
function sum(arr){
  return arr.reduce((prev,val) => prev + val)
}

2.二维数组拉平

1
2
3
4
5
6
7
8
9
10
function flat(arr) {
  return arr.reduce((pre, value) => {
    return Array.isArray(value) ? [...pre, ...flat(value)] : [...pre, value]
  }, [])

function flattenArray(arr) {
  const flattened = [].concat(...arr)
  return flattened.some(item => Array.isArray(item)) ? 
    flattenArray(flattened) : flattened
}

3.对象数组-求某个属性的最大值

1
2
3
function keyMax(arr, key) {
  return Math.max.apply(Math, arr.map( o => o[key]))
}

4.对象数组-求包含某个属性最大值的对象

1
2
3
function keyMaxObj(arr,key) {
  return arr.reduce((p,v) => p[key] < v[key] ? v : p)
}

5.对象数组-根据对象某个属性值做对象排序(1:升序 0:降序)

1
2
3
4
5
6
7
8
9
10
11
12
function compare(key, sortType) {
  return function(obj1,obj2){
          let a = obj1[key]
          let b = obj2[key]
          if (sortType) {
            return a - b     //升序
          } else {
            return b - a     //降序
          }
        }
}
objArray.sort(compare('value',1))

6.普通数组去重

1
2
3
function unique(arr){
  return Array.from(new Set(arr))
}

7.根据某个属性做对象数组去重

1
2
3
4
5
6
7
8
function  objArrayUnique(objArray,key){
    let hash = {}
    objArray = objArray.reduce(function(item, next) {
      hash[next[key]]?'':hash[next[key]] = true && item.push(next)
      return item
    }, [])
    return objArray
  }

8.构建树

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
   * 将一维的扁平数组转换为多层级对象
   * @param  {[type]} list 一维数组，数组中每一个元素需包含id和parent_id两个属性
   * @sort 父节点在数组中的位置需要在子节点前，即 节点3必须排在节点3-2之前(可调用上面的compare方法)
   * @type 选择children为数组或对象
   * @return {[type]} tree 多层级树状结构
   */
buildTree: function (list, parentKey){
    let temp = {};
    let tree = {};
    for(let i in list){
      temp[list[i].id] = list[i];
    }
    for(let i in temp){
      if(temp[i][parentKey]) {
        if(!temp[temp[i][parentKey]].children) {
          temp[temp[i][parentKey]].children = new Array();
          // if (type === 'Object') temp[temp[i][parentKey]].children = new Object();
        }
        temp[temp[i][parentKey]].children.push(temp[i]);
        // temp[temp[i][parentKey]].children[temp[i].id] = temp[i];
      } else {
        tree[temp[i].id] =  temp[i];
      }
    }
    return tree;
  }

9.多个对象数组-根据某个属性求并集

1
2
3
4
function inUnion(list1 = [], list2 = [], key) {
    let arr = list1.concat(list2)
    return objArrayUnique(arr, key)
  }

10.多个对象数组-根据某个属性求交集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function inBoth(list1, list2, key) {
  var result = [];
  for (var i = 0; i < list1.length; i++) {
    var item1 = list1[i],
    found = false;
    for (var j = 0; j < list2.length && !found; j++) {
      found = item1[key] === list2[j][key];
    }
    if (found) {
      result.push(item1);
    }
  }
  return result;
}

11.格式化时间戳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function formatDate(timestamp, type = 'ymd') {
    let date = new Date(timestamp)
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    m = m < 10 ? ('0' + m) : m
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let i = date.getMinutes()
    i = i < 10 ? ('0' + i) : i
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s

    switch (type) {
      case 'ymd': {
        return `${y}-${m}-${d}`
      }
      case 'ymdhi':{
        return `${y}-${m}-${d} ${h}:${i}`
      }
      default:{
        return `${y}-${m}-${d} ${h}:${i}:${s}`
      }
    }
  }

12.yyyy-MM-dd转换成时间戳的格式

1
2
3
4
function dateToTimestamp(dateStr){
    var newstr = dateStr.replace(/-/g,'/')   
    return Date.parse(new Date(newstr))
  }

13.树状结构转扁平数组

1
2
3
4
5
6
7
8
function nestedToFlat(children, parent) {
  var arr = []
  for (var i = 0; i < children.length; i++) {
    arr.push({ id: children[i].id,  isChecked: children[i].isChecked, parent: parent })
    if (children[i].children) arr = arr.concat(nestedToFlat(children[i].children, children[i].id))
  }
  return arr
},

14.随机颜色

1
2
3
4
5
6
7
function randomColor () {
  let rgb = []
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.round(255 * Math.random())
  }
  return 'rgb(' + rgb.join(',') + ')'
},

15.检查是否是整数

1
2
3
function isInteger(x) { 
  return (x ^ 0) === x 
}

16.分页函数（一维数组转二维）

1
2
3
4
5
6
7
8
9
10
11
function pages (arr, size) {
  const pages = []
  arr.forEach((item, index) => {
    const page = Math.floor(index / size)
    if (!pages[page]) {
      pages[page] = []
    }
    pages[page].push(item)
  })
  return pages
}

17.全屏函数

1
2
3
4
5
6
7
8
9
10
11
12
function launchFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
launchFullScreen(document.documentElement) //使用

18.退出全屏函数

1
2
3
4
5
6
7
8
9
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }  
}

19.检测变量是否是对象

1
2
3
function isObject(x) {
    return Object.prototype.toString.call(x) === '[object Object]';
}

20.模拟sleep

1
2
3
4
function sleep(milliSeconds) { // 毫秒
    const startTime = new Date().getTime();
    while (new Date().getTime() < startTime + milliSeconds);
}

21.使用Blob实现点击下载

1
2
3
4
5
6
7
8
9
10
11
function saveBlobFile(name, type, data) {
    if (data !== null && navigator.msSaveBlob) return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    let a = $("<a style='display: none;'/>");
    let url = window.URL.createObjectURL(new Blob([data], { type: type }));
    a.attr('href', url);
    a.attr('download', name);
    $('body').append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

22.等待某个dom加载后修改内容

1
2
3
4
5
6
7
8
9
function setLoadableTip(tip) {
    let timer = setInterval(() => {
        let $loadingText = $('.hr1-loading-text');
        if ($loadingText.length > 0) {
            $loadingText.text(i18next.t(tip));
            clearInterval(timer);
        }
    }, 100);
}

23.银行卡号隐藏

1
2
3
4
function formatBankAccount(account) {
    const pattern = /^(\d{4})(\d{4})+(\d+)$/;
    return account.replace(pattern, '$1 **** **** $3');
}

24.字符串补足到指定长度

1
2
3
function rightPad(str, targetLength, padChar) {
    return str + Array(targetLength - str.length + 1).join(padChar);
}

25.日历前后切换时的日期确定

1
2
3
4
5
6
7
8
9
10
11
function getValidDate(date) {
    const day = dayjs(date);
    const diffMonths = dayjs(this.month).diff(day.format("YYYY-MM"), "month");
    const selectMonth = day.add(diffMonths, "month");
    // 如果下个月的日期仍然存在，则返回该日期
    if (selectMonth.date() === day.date()) {
        return selectMonth.toDate();
    }
    // 否则返回下个月的最后一天
    return selectMonth.endOf("month").toDate();
}