js封装的一些常用方法

senntyou 发布于2019-08-23 16:55 / 3163人阅读

摘要：整理自己常用的一些封装方法数组按照指定长度拆分数组按指定长度拆分删除数组中指定元素删除数组中指定元素将小数指定到精确位置将小数字符串精确到指定位数字符串类型的小数精确到小数点第几位根据微妙时间戳获取年月日时分秒根据微妙时间戳获取年月日时分秒

整理自己常用的一些封装方法 1.数组按照指定长度拆分

// 数组按指定长度拆分
export function chunk (data, count) {
  var result = []
  for (var i = 0, len = data.length; i < len; i += count) {
    result.push(data.slice(i, i + count))
  }
  return result
}

2.删除数组中指定元素

/**
 * 删除数组中指定元素
 * @param arr
 * @param val
 */
function removeByValue (arr, val) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == val) {
      arr.splice(i, 1)
      break
    }
  }
}

3.将小数指定到精确位置

/**
 *  将小数字符串精确到指定位数
 * @param num string 字符串类型的小数
 * @param index int 精确到小数点第几位
 */
function roundFloat (num, index) {
  return Number(num).toFixed(index)
}

4.根据微妙时间戳获取年月日时分秒

/**
 *  根据微妙时间戳获取年月日时分秒
 * @param microtime unix微妙时间戳
 * @returns {string} yyyy-mm-dd hh:mm:ss
 */
function getNowFormatDate (microtime) {
  var date = new Date(microtime)
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  var strHour = date.getHours()
  var strMinute = date.getMinutes()
  var strSeconds = date.getSeconds()
  if (month >= 1 && month <= 9) {
    month =`0${month}`
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = `0${strDate}`
  }
  if (strHour >= 0 && strHour <= 9) {
    strHour = `0${strHour}`
  }
  if (strMinute >= 0 && strMinute <= 9) {
    strMinute = `0${strMinute}`
  }
  if (strSeconds >= 0 && strSeconds <= 9) {
    strSeconds = `0${strSeconds}`
  }
 var currentdate =`${date.getFullYear()}-${month }-${strDate} ${strHour}:${strMinute}:${strSeconds}`
return currentdate
}

5.获取指定日的当周周一

/**
 * 获取指定日的当周周一
 * @param time 毫秒时间戳
 * @returns {string}
 */
function getMonday (time) {
  let today = new Date(time).getDay() === 0 ? 7 : new Date(time).getDay()
  let timeStr = new Date(time).getTime()
  let mondayStr = timeStr - (today - 1) * 3600 * 24 * 1000
  return getNowFormatDate(mondayStr).split(" ")[0] + " 00:00:00"
}

6.获取指定日的当周周日

/**
 * 获取指定日的当周周日
 * @param time 毫秒时间戳
 * @returns {string}
 */
function getSunday (time) {
  let today = new Date(time).getDay() === 0 ? 7 : new Date(time).getDay()
  let timeStr = new Date(time).getTime()
  let sundayStr = timeStr + (7 - today) * 3600 * 24 * 1000
  return getNowFormatDate(sundayStr).split(" ")[0] + " 23:59:59"
}

7.二维数组分组排序

/*
@params arr 要排序的数组
 @params group 要分组的键
 */
function arrayGroupby (arr, key) {
  var result = {}
  arr.forEach(function (child, i) {
    if (!(child[key] in result)) {
      result[child[key]] = []
    }
    result[child[key]].push(child)
  })
  return result
}

8.输入正确的数值

/**
 * 输出正确的数值
 * @param val
 * @param changedVal
 * @returns {Number}
 */
function echoTrueNumber (val, changedVal) {
  if (val === 0 || val === "0") {
    return parseFloat(val)
  }
  return val ? parseFloat(val) : changedVal
}

9.根据数字字符串获取小数位位数

/**
 * 根据数字字符串获取小数位位数
 * @param num
 * @returns {number}
 */
function getIndexLength (num) {
  num = Number(num).toString()
  let length = 0
  if (typeof num.split(".")[1] === "undefined") {
    if (num.indexOf("-") > 0) {
      // 0.0000001,1e-7科学计数法
      length = Number(num.split("-")[1])
    } else {
      // 整数
      length = 0
    }
  } else {
    // 普通的小数0.121562
    length = num.split(".")[1].length
  }

  return length
}

10.去字符串所有空格

/**
 * 去掉字符串所有空格
 * @param {String} Str 
 */
//去字符串所有空格
function stringTrim(Str) {
  return Str.replace(/(^s+)|(s+$)/g, "")
}

11.数组去重

/**
 * 数组去重
 * @param {Array} arr 
 * @returns {Array}
 */
function arrayUnique(arr) {
  var newArr = []
  for (var i = 0, len = arr.length; i < len; i++) {
    for (var j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        //获取没重复的最右一值放入新数组
        ++i
      }
    }
    newArr.push(arr[i])
  }
  return newArr
}

12.判断是pc端还是移动

 function IsPC() {
  let userAgentInfo = navigator.userAgent
  let Agents = [
    "Android",
    "iPhone",
    "SymbianOS",
    "Windows Phone",
    "iPad",
    "iPod"
  ]
  let flag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}


//判断手机端域名
export const DeviceState = (function Device() {
  if (window.location.host.slice(0, 1) === "m" || !IsPC()) {
      console.log("手机端")
    return true
  } else {
      console.log("pc端")
    return false
  }
})()

常用的一些方法会不断的更新，之前做的老项目没有整理过，会在以后的项目中不断整体新的东西，让自己更好的学习前端的技术！！！

云服务器 GPU云服务器 linux的一些常用命令数据分析的一些方法 js可以封装方法么 js有哪些常用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103516.html

项目中常用js封装（持续更新）

摘要：我们日常开发中经常会碰到各种各样的需求，但很多需求都是重复的，因此我就把平时开发中遇到的一些常见方法做了个总结和归纳。我们日常开发中经常会碰到各种各样的需求，但很多需求都是重复的，因此我就把平时开发中遇到的一些常见方法做了个总结和归纳。1、金额的格式化比如2.00，1,222,2.00像这样格式的数据在很多电商或者后台数据显示上见到，然而这些数据后台往往只是给我们前端返回2或者12...

myeveryheart 2019-08-23 16:44 评论0 收藏0
vue封装axios基本思路

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择，因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios. 1 为什么选择axios？使用axios可以统一做请求-响应拦截，例如响应时我们将响应信息拦截起来，判断状态码，从而弹出报错信息设定请求超时,例如3000ms未响应...

microcosm1994 2019-08-26 12:10 评论0 收藏0
基于vue-cli3.0的项目工程重新构建空白版，拿来即用

摘要：写在前面使用框架开发时，很多人会选择官方提供的脚手架，最新的已经更新到完全无配置，只需下载就能方便的使用构建的项目工程，但基础的并不能满足正常的项目开发，在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。写在前面使用vue框架开发时，很多人会选择vue官方提供的cli脚手架，最新的cli已经更新到3.0完全无配置，只需下载就能方便的使用vuecli构建的项目工程，但基础的c...

xingpingz 2019-08-26 10:33 评论0 收藏0
react中后台管理界面

摘要：是一个用开发的一个企业级中后台管理包含常用的业务，组件，及数据流转方案，前后端分离的开发方式，按业务划分的目录结构，可以大大提高我们的开发效率下面是整体的介绍，感兴趣的同学可以去官网详加了解。 dva-boot-admin 是一个用React开发的一个企业级中后台管理UI,包含常用的业务，组件，及数据流转方案，前后端分离的开发方式，按业务划分的目录结构，可以大大提高我们的开发效率下面...

dongfangyiyu 2019-08-26 11:54 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

nevermind 2019-08-30 15:55 评论0 收藏0