js 常用功能、方法实现（函数）

1、10 个短小实用的代码片段 ： https://www.jianshu.com/p/3ef822ec5a63

2、js常用函数  ： https://www.cnblogs.com/wangyuyuan/p/8807765.html （原生实现）

/**
 * 导入文件内方法
 */
import Promise from './es6-promise.min.js';
import CONSTANTS from '../constants/constants.js';

/**
 * 操作dom类
 */
let dom = {
  // 判断是否有该 class
  hasClass(el, className) {
    let reg = new RegExp('(^|\s)' + className + '(\s|$)')
    return reg.test(el.className)
  },

  // 添加 class
  addClass(el, className) {
    if (this.hasClass(el, className)) {
      return
    }
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  },

  // 删除类名
  removeClass(el, className) {
    if (this.hasClass(el, className)) {
      var reg = new RegExp('(\s|^)' + className + '(\s|$)')
      el.className = el.className.replace(reg, '')
    }
  },
  // 替换类名
  replaceClass(obj, newName, oldName) {
    this.removeClass(obj, oldName)
    this.addClass(obj, newName)
  },

  /**
   * 获取/设置 自定义属性 data-${name}=val
   * 如果传入了 val 就设置自定义属性 `data-${name}` 的值为 val
   * 如果没有传入了 val 就获取自定义属性 `data-${name}` 的值
   */
  customAttribute(el, name, val) {
    if (val) {
      return el.setAttribute(`data-${name}`, val)
    } else {
      return el.getAttribute(`data-${name}`)
    }
  },

  /**
   * 获取元素相对屏幕的位置
   * let one = document.getElementById('one')
   * console.log(getPos(one)) -> {top: 8, left: 8}
   */
  getPos(elem) {
    if (!elem) return { left: 0, top: 0 }

    let top = 0
    let left = 0

    top = elem.getBoundingClientRect().top
    left = elem.getBoundingClientRect().left

    return { top, left }
  }
}

/***
* 操作数组类
*/
let arr = {
  // 克隆数组
  cloneArr(arr) {
    // 从第一个字符就开始 copy
    // slice(start,end) 方法可从已有的数组中返回选定的元素。
    return arr.slice(0)
  },

  /**
   * 洗牌函数
   * @param  {Array} arr 原数组
   * @param  {boolean} flag 是否改变原数组，默认不改变
   * @return {Array}     新数组
   */
  shuffle(arr, flag = false) {
    let newArr = []
    if (flag) {
      newArr = arr
    } else {
      newArr = arr.slice(0)
    }

    for (let i = 0; i < newArr.length; i++) {
      let j = utils.num.getRandom(0, i)
      let temp = newArr[i]
      newArr[i] = newArr[j]
      newArr[j] = temp
    }
    return newArr
  },

  // 随机获取数组的一个成员
  randomOne(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
  },

  // 数组去重
  removeRepeat(arr) {
    return Array.from(new Set(arr))
  },
  // [1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
  //     return index===array.indexOf(ele)
  // })

  // 数组最大值
  maxArr(arr) {
    return Math.max.apply(null, arr)

    // var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    // var maxInNumbers = Math.max.apply(Math, numbers);
    // var minInNumbers = Math.min.apply(Math, numbers);
  },

  // 数组最小值
  minArr(arr) {
    return Math.min.apply(null, arr)
  },

  // 数组数字总和 (必须保证数组每个元素都是 Number)
  sumArr(arr) {
    let sum = 0

    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }

    return sum
  },

  // 数组数字平均值，小数点可能会有很多位，这里不做处理，处理了使用就不灵活了！
  averageArr(arr) {
    let average = this.sumArr(arr) / arr.length
    return average
  },

  /**
   * 一个元素出现的次数
   * getEleCount('asd56+asdasdwqe', 'a') -> 3
   * getEleCount([1, 2, 3, 4, 2], 3) -> 1
   * @param  {[type]} obj 可以是对象或者数组
   * @param  {[type]} ele [description]
   * @return {[type]}     [description]
   */
  getEleCount(obj, ele) {
    let num = 0

    for (let i = 0; i < obj.length; i++) {
      if (ele === obj[i]) {
        num++
      }
    }

    return num
  }
}

/**
 * 操作字符串类
 */
let str = {
  /**
  * 正则验证(可扩展)
  * @param  {String} str  需要检测的字符串
  * @param  {String} type 检测类型
  * @return {Boolean}     返回布尔值
  */
  testReg(str, type) {
    switch (type) {
      case 'email':
        return /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/.test(str)
      case 'phone':
        return /^1[3|4|5|7|8][0-9]{9}$/.test(str)
      case 'tel':
        return /^(0d{2,3}-d{7,8})(-d{1,4})?$/.test(str)
      case 'number':
        return /^[0-9]$/.test(str)
      case 'english':
        return /^[a-zA-Z]+$/.test(str)
      case 'chinese':
        return /^[u4E00-u9FA5]+$/.test(str)
      case 'lower':
        return /^[a-z]+$/.test(str)
      case 'upper':
        return /^[A-Z]+$/.test(str)
      default:
        return true
    }
  },

  /**
   * 去掉前后空格
   * 1:前后空格(默认)  2:所有空格  3:前空格 4:后空格
   * @param  {[type]} str  [description]
   * @param  {Number} type [description]
   * @return {[type]}      [description]
   */
  trim(str, type = 1) {
    switch (type) {
      case 1:
        return str.replace(/(^s*)|(s*$)/g, '')
      case 2:
        return str.replace(/s+/g, '')
      case 3:
        return str.replace(/(^s*)/g, '')
      case 4:
        return str.replace(/(s*$)/g, '')
      default:
        return str
    }
  },

  /**
  * 大小写转换
  * 1:首字母大写 2:首页母小写 3:大小写转换 4:全部大写 5:全部小写
  */
  changeCase(str, type) {
    function ToggleCase(str) {
      var itemText = ''
      str.split('').forEach(
        function (item) {
          if (/^([a-z]+)/.test(item)) {
            itemText += item.toUpperCase()
          } else if (/^([A-Z]+)/.test(item)) {
            itemText += item.toLowerCase()
          } else {
            itemText += item
          }
        })
      return itemText
    }

    switch (type) {
      case 1:
        return str.replace(/^(w)(w+)/, function (v, v1, v2) {
          return v1.toUpperCase() + v2.toLowerCase()
        })
      case 2:
        return str.replace(/^(w)(w+)/, function (v, v1, v2) {
          return v1.toLowerCase() + v2.toUpperCase()
        })
      case 3:
        return ToggleCase(str)
      case 4:
        return str.toUpperCase()
      case 5:
        return str.toLowerCase()
      default:
        return str
    }
  },

  /**
   * 如何优雅的实现金钱格式化
   * 1234567890 --> 1,234,567,890
   * @return {[type]}       [description]
   */
  formatMoney(str = '1234567890') {
    return str.replace(/B(?=(d{3})+(?!d))/g, ',') // 1,234,567,890
  },

  /**
   * 实现标准JSON的深拷贝
   * 不考虑IE的情况下，标准JSON格式的对象蛮实用，不过对于undefined和function的会忽略掉。
   * @param  {[type]} a [description]
   * @return {[type]}   [description]
   */
  deepCopy(a) {
    return JSON.parse(JSON.stringify(a))
  }
}

/**
 * 操作时间类
 */
let time = {

  /**
   * 获取当前时间
   * 2017-08-11 22:52:13 星期六
   * @param  {Boolean} hasDay  是否需要年月日
   * @param  {Boolean} hasHour 是否需要十分秒
   * @param  {Boolean} hasWeek 是否需要星期
   * @param  {String} sign1 分隔符
   * @param  {String} sign2 分隔符
   */
  getNowDate(hasDay = true, hasHour = true, hasWeek = true, sign1 = '/', sign2 = ':') {
    let date = new Date()
    let year = date.getFullYear()
    let month = (date.getMonth() + 1).toString().padStart(2, '0')
    let day = (date.getDate()).toString().padStart(2, '0')
    let hour = (date.getHours()).toString().padStart(2, '0')
    let minutes = (date.getMinutes()).toString().padStart(2, '0')
    let seconds = (date.getSeconds()).toString().padStart(2, '0')
    let weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
    let week = weekArr[date.getDay()]

    let time1 = hasDay ? `${year}${sign1}${month}${sign1}${day}` : ''
    let time2 = hasHour ? `${hour}${sign2}${minutes}${sign2}${seconds}` : ''
    let time3 = hasWeek ? `${week}` : ''

    return `${time1} ${time2} ${time3}`.replace(/(^s*)|(s*$)/g, '')
  },

  /**
   * 格式化时间戳 (分:秒)
   * 61 -> 01:01
   * @param  {Number} timestamp 时间戳
   * @param  {String} sign      分隔符，默认 :
   * @return {[type]}           [description]
   */
  format(timestamp, sign = ':') {
    timestamp = Math.floor(timestamp)

    let minute = (Math.floor(timestamp / 60)).toString().padStart(2, '0')
    let second = (timestamp % 60).toString().padStart(2, '0')
    return `${minute}${sign}${second}`
  },

  /**
  * 倒计时
  * countDown('2017-8-11 24:0:0') -> 剩余0天0小时54分钟41秒
  * @param  {Date} endTime 结束时间
  * @return {[type]}         [description]
  */
  countDown(endTime) {
    let start = new Date()
    let end = new Date(endTime)
    let dif = end.getTime() - start.getTime()

    let d = 0
    let h = 0
    let m = 0
    let s = 0

    if (dif >= 0) {
      d = Math.floor(dif / 1000 / 3600 / 24)
      h = Math.floor(dif / 1000 / 60 / 60 % 24)
      m = Math.floor(dif / 1000 / 60 % 60)
      s = Math.floor(dif / 1000 % 60)
    }

    return `仅剩${d}天${h}小时${m}分钟${s}秒`
  }
}

/**
 * 请求接口类
 */
let ajax = {
  
  /**
   * 请求接口方法
   * @param{url}请求url
   * @param{method} 请求方式
   * @param{data} 请求参数
   */
  brmRequest(url, method, data) {
    let token = wx.getStorageSync('AuthToken');
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        method,
        data,
        header: {
          'Cookie': 'XDEBUG_SESSION=PHPSTORM',
          'Content-Type': 'application/json',
          'Authorization': token
        },
        success: function (res) {
          if (res.header.Authorization && token != res.header.Authorization) {
            wx.setStorageSync('AuthToken', res.header.Authorization)
          }
          resolve(res.data);
        },
        fail: function (err) {
          reject(err);
        }
      });
    })
  }

}

//导出方法类
module.exports = {
  dom: dom,
  arr: arr,
  str: str,
  time: time,
  ajax: ajax,
}

3、快速创建一个 对象的数组：【做模拟数据的时候回经常用到，20-30条这样的数据，看页面的效果】

　　实现思路：基于一个现有数组，进行遍历（推荐这种，快速）   或   for循环 给数组添加数据。

      let arr = new Array(20)
      let arr2 = Array.from(arr, () => {
        return{
          groupId: 'xxxxx',
          personNum: '12',
          casesTimes: '20',
          involveFeeMed: '￥8,888',
          involveFeeFund: '￥8,888',
          digDate: '2019-01-01',
          recentDate: '2019-01-01',
        }
      })

4、将 js 对象，拼接成 请求参数显示。原生的ajax请求参数都是 key1=value1&key2=value2 这种显示的。所以需要这样一个方法就像处理函数。 参考链接

  // 格式化参数
  function formatParams (data) {
    var arr = []
    for (var item in data) {
      arr.push(item + '=' + data[item])
    }
    return arr.join('&')
  }

5、数组去重：https://segmentfault.com/a/1190000016418021

[...new Set(arr)]  // 最简单的方法

6、字符串去除两边空格：

7、获取 url上 的参数（包括 # 号后面的参数）：

const getQueryString = function (name) {
  let regUrl = new RegExp(name + '=')
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')

  let url = location.href
  let urlSerch = location.search
  let urlHash = location.hash // 获取url 上的authcode参数值,因为不知道参数是在#前还是#号后。所以要对location.search和location.hash分开判断
  if (!regUrl.test(url)) {
    return null
  }
  let queryStr = urlSerch.substr(1).match(reg) || urlHash.split('?')[1].match(reg)
  if (queryStr != null) {
    return unescape(queryStr[2])
  }
  return null
}

8、JS 解析URL 字符串，变成一个URL 对象：

　　　　https://www.cnblogs.com/qiuxiaozhen/p/10520300.html (通过创建 a 标签 实现，url上的所有属性都挂在a对象下面，如 host值： a.hostname )   或  

　　　　https://www.jb51.net/article/157127.htm (通过新的 URL 构造函数实现)   或 

　　　　https://www.cnblogs.com/chanruida/archive/2012/05/16/2505544.html (使用正则，通过 字符串 拆解 实现)

9、判断JS对象是否拥有某属性：https://blog.csdn.net/lianjiuxiao/article/details/88819773

注意 ：js中变量  不可用来调用方法（或属性）的值的值有  undefined(声明未赋值)、null、''(初始化的值)、NaN(计算后产生的值，一般判断是否有值不用判断它)。这些值，调用方法或属性，浏览器就不会报错。