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 /^(0\d{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对象是否拥有某属性:https://blog.csdn.net/lianjiuxiao/article/details/88819773

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

js 常用功能实现(函数)的更多相关文章

  1. JS 常用功能收集

    JS 常用效果收集 1. 回到顶部>>    爱词霸

  2. js常用加解密函数汇总

    1. JS自定义加密解密函数,及用法 function compile(code) { )+code.length); ;i<code.length;i++){ c+=String.fromCh ...

  3. js常用的工具函数

    JS选取DOM元素的方法注意:原生JS选取DOM元素比使用jQuery类库选取要快很多1.通过ID选取元素document.getElementById('myid');2.通过CLASS选取元素do ...

  4. js常用关键字和函数

    document.createElement("div"): 创建一个div元素申明一个变量 document.body.appendChild(div);   将创建好的div添 ...

  5. js常用的封装函数

    1.使用childNodes获取元素的元素节点 //使用childNodes获取元素节点 function cNodes(obj){ var arr=new Array(); for(var i=0; ...

  6. js常用功能汇总

    var Utils = function() { this.Tools; this.ui; }; Utils = new Utils(); Utils.prototype.Tools = { year ...

  7. js常用自编函数整理

    1.替换js地址栏参数值 //destiny是目标字符串,比如是http://www.huistd.com/?id=3&ttt=3 //par是参数名,par_value是参数要更改的值,调用 ...

  8. js 常用的工具函数

    1 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } i ...

  9. js - 常用功能方法汇总(updating...)

    一.查值的类型(可用于拷贝) /* * @Author: guojufeng@ * @Date: 2017-12-20 15:07:06 * @purpose 获取一个值的类型 * @param {v ...

随机推荐

  1. paper 149:Deep Learning 学习笔记(一)

     1. 直接上手篇 台湾李宏毅教授写的,<1天搞懂深度学习> slideshare的链接: http://www.slideshare.net/tw_dsconf/ss-62245351? ...

  2. Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)

    题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...

  3. MySQL清除表数据而保留表结构TRUNCATE TABLE

    有时候我们会需要清除一个表格中的所有资料.要达到者个目的,一种方式是使用 DROP TABLE 指令,不过这样整个表格就消失,表无法再被用了.另一种方式就是运用 TRUNCATE TABLE 的指令. ...

  4. Weblgic安装应用报错:Caused by: com.bea.xml.XmlException: failed to load java type corresponding to e=web-a

    文章目录 报错如下 解决: 报错如下 Exception in AppMerge flows' progression 后台日志报错: Caused by: com.bea.xml.XmlExcept ...

  5. 面试题57:数组中2个数的和(也是leetcode题目)

    题目:给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 示例: 给定 nums = [2, 7, 11, 15], target = 9 因 ...

  6. django4-模板,templates

    如何使用templates呢? 在views.py文件中,函数或者方法通过return render(request,"userInfor.html",{"info_li ...

  7. POJ 2112 /// 最大流+floyd+二分

    题目大意: 有 k台挤奶机 和 c头奶牛 每台挤奶机最多为m头奶牛服务 给定所有挤奶机和奶牛两两之间的距离 求一种分配 使得 奶牛与挤奶机之间的最远距离 最小化 floyd求得所有挤奶机与奶牛两两之间 ...

  8. boby标签中相关标签

    有关字体相关的标签 h1~h6   字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...

  9. 重读ORB_SLAM之LoopClosing线程难点

    1. DetectLoop 这里有个ConsistenGroup概念,比较难懂.这里是最让人迷惑的地方.一旦vbConsistentGroup为真,其他帧的spCanditateGroup就进不来了. ...

  10. getopts举例