收集整理工作中重复用到的日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数，这些工具类函数
常用函数汇总
Array
arrayEqual
1 | /** |
indexOf()
indexOf()方法 返回根据给定元素找到的第一个索引值，否则返回-1。array.indexOf(searchElement[, fromIndex = 0])
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(ele) {
// 获取数组长度
var len = this.length;
// 检查值为数字的第二个参数是否存在，默认值为0
var fromIndex = Number(arguments[1]) || 0;
// 当第二个参数小于0时，为倒序查找，相当于查找索引值为该索引加上数组长度后的值
if(fromIndex < 0) {
fromIndex += len;
}
// 从fromIndex起循环数组
while(fromIndex < len) {
// 检查fromIndex是否存在且对应的数组元素是否等于ele
if(fromIndex in this && this[fromIndex] === ele) {
return fromIndex;
}
fromIndex++;
}
// 当数组长度为0时返回不存在的信号：-1
if (len === 0) {
return -1;
}
}
}
forEach()
forEach()方法让数组的每一项都执行一次给定的函数。forEach()方法可以修改原数组。
语法：array.forEach(callback[, thisArg])
参数：
callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。thisArg：可选参数。用来当作callback函数内this的值的对象，即callback函数的执行上下文；forEach方法按升序为数组中含有效值的每一项执行一次callback函数，那些已删除（使用delete方法等情况）或者从未赋值的项将被跳过（但不包括哪些值为undefined的项）。
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17if ( !Array.prototype.forEach) {
Array.prototype.forEach = function forEach(callback) {
// 获取数组长度
var len = this.length;
if(typeof callback != "function") {
throw new TypeError();
}
// thisArg为callback 函数的执行上下文环境
var thisArg = arguments[1];
for(var i = 0; i < len; i++) {
if(i in this) {
// callback函数接收三个参数：当前项的值、当前项的索引和数组本身
callback.call(thisArg, this[i], i, this);
}
}
}
}
map()
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。array.map(callback[, thisArg])
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19if (!Array.prototype.map) {
Array.prototype.map = function(callback) {
// 获取数组长度
var len = this.length;
if(typeof callback != "function") {
throw new TypeError();
}
// 创建跟原数组相同长度的新数组，用于承载经回调函数修改后的数组元素
var newArr = new Array(len);
// thisArg为callback 函数的执行上下文环境
var thisArg = arguments[1];
for(var i = 0; i < len; i++) {
if(i in this) {
newArr[i] = callback.call(thisArg, this[i], i, this);
}
}
return newArr;
}
}
filter()
filter() 方法利用所有通过指定函数测试的元素创建一个新的数组，并返回。array.filter(callback[, thisArg])
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21if (!Array.prototype.filter) {
Array.prototype.filter = function(callback) {
// 获取数组长度
var len = this.length;
if(typeof callback != "function") {
throw new TypeError();
}
// 创建新数组，用于承载经回调函数修改后的数组元素
var newArr = new Array();
// thisArg为callback 函数的执行上下文环境
var thisArg = arguments[1];
for(var i = 0; i < len; i++) {
if(i in this) {
if(callback.call(thisArg, this[i], i, this)) {
newArr.push(val);
}
}
}
return newArr;
}
}
some()
some()方法测试数组中的某些元素是否通过了指定函数的测试。返回布尔值。被调用时不会改变数组。arr.some(callback[, thisArg])
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17if (!Array.prototype.some) {
Array.prototype.some = function(callback) {
// 获取数组长度
var len = this.length;
if(typeof callback != "function") {
throw new TypeError();
}
// thisArg为callback 函数的执行上下文环境
var thisArg = arguments[1];
for(var i = 0; i < len; i++) {
if(i in this && callback.call(thisArg, this[i], i, this)) {
return true;
}
}
return false;
}
}
every()
every()方法测试数组的所有元素是否都通过了指定函数的测试。返回布尔值。不会改变原数组。arr.every(callback[, thisArg])
兼容IE6～8的写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17if (!Array.prototype.every) {
Array.prototype.every = function(callback) {
// 获取数组长度
var len = this.length;
if(typeof callback != "function") {
throw new TypeError();
}
// thisArg为callback 函数的执行上下文环境
var thisArg = arguments[1];
for(var i = 0; i < len; i++) {
if(i in this && !callback.call(thisArg, this[i], i, this)) {
return false;
}
}
return true;
}
}
Class
hasClass
1 | /** |
addClass
1 | /** |
removeClass
1 | /** |
Cookie
getCookie
1 | /** |
setCookie
1 | /** |
removeCookie
1 | var getCookie = require('./getCookie'); |
Device
getExplore
1 | /** |
getOS
1 | /** |
Dom
offset
1 | /** |
getScrollTop
1 | /** |
setScrollTop
1 | /** |
scrollTo
1 | var getScrollTop = require('./getScrollTop'); |
Keycode
getKeyName
1 | var keyCodeMap = { |
Object
deepClone
1 | /** |
isEmptyObject
1 | /** |
Random
randomColor
1 | /** |
randomNum
1 | /** |
Regexp
isEmail
1 | /** |
isIdCard
1 | /** |
isPhoneNum
1 | /** |
isUrl
1 | /** |
String
digitUppercase
1 | /** |
Support
isSupportWebP
1 | /** |
Time
formatPassTime
1 | /** |
formatRemainTime
1 | /** |
Format
1 | /** |
Url
parseQueryString
1 | /** |
getParam
1 | /** |
stringfyQueryString
1 | /** |
Function
throttle
1 | /** |
debounce
1 | /** |
金额千分位
1 | /** |
参考：
千位分隔符(逗号)表示web网页中的大数字
toLocaleString
转度分秒
1 | Number.prototype.toDfm = function (l) { |
Html
loadScript
1 | /* |
loadCss
1 | /* |
auto-font-size
1 | (function () { |
Ajax
1 | function ajax(options){ |
常用小工具
通过银行卡号得到银行卡信息
示例代码篇幅太长，点击查看
牛人通过支付宝的开放API封装的代码库，可以直接调用，参考github地址
ios输入法遮挡键盘的解决方案
1 | //解决第三方软键盘唤起时底部input输入框被遮挡问题， 改为fixed固定 |
计算字符串字符长度
1 | const GetLen = function(str) { |
计算两个坐标点偏转角度
1 | // 计算偏转角度，0度为向方向，逆时针方向，未启用 |
计算两个坐标点方向上的箭头坐标点
1 | // 计算一条直线的箭头方向跟箭头三个坐标 |
性能优化
createDocumentFragment
一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。
参考
js获取位置与尺寸
1、内高度、内宽度： 内边距 + 内容框
1 | element.clientWidth |
2、外高度，外宽度： 边框 + 内边距 + 内容框
1 | element.offsetWidth |
3、上边框、左边框
1 | element.clientTop |
4、元素的大小及其相对于视口的位置
1 | element.getBoundingClientRect() |
5、上边偏移量，左边的偏移量
1 | element.offsetTop |
6、可视区域的大小
1 | document.documentElement.clientWidth |
7、页面的实际大小
1 | document.documentElement.scrollWidth |
8、窗口左上角 与 屏幕左上角的 距离
1 | window.screenX |
9、屏幕宽高
1 | window.screen.width |
10、屏幕可用宽高（去除任务栏）
1 | window.screen.availWidth |
11、窗口的内高度、内宽度（文档显示区域+滚动条）
1 | window.innerWidth |
12、窗口的外高度、外宽度
1 | window.outerWidth |