开发用到的js封装方法(20种)
1、判断是否是一个数
1
2
3
4
5
|
function isArray(arr){ return Object.prototype.toString.call(arr) === '[object Array]' ; } isArray([1,2,3]) //true |
2、判断是否是一个函数(三种)
1
2
3
4
5
6
|
function isFunction(fn) { return Object.prototype.toString.call(fn) === '[object Function]' ; return fn.constructor == Function; return fn instanceof Function; return typeof (fn) == Function; } |
3、数组去重,只考虑数组中元素为数字或者字符串
1
2
3
4
5
6
7
8
9
|
function newarr(arr){ var arrs = []; for ( var i =0;i<arr.length;i++){ if (arrs.indexOf(arr[i])== -1){ arrs.push(arr[i]) } } return arrs; } |
4、动态去重
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var arr = [1,2, 3, 4]; function add() { var newarr = []; $( '.addEle' ).click(() => { var rnd = Math.ceil(Math.random() * 10); newarr.push(rnd) for ( var i =0; i < newarr.length; i++) { if (arr.indexOf(newarr[i]) == -1) { arr.push(newarr[i]) arr.sort( function (a, b) { return b - a //降序 }); } } console.log(arr) //[1,2,3,4,5,6,7,8,9] }) } add() |
5、去除字符串空格(包含三种情况)
1
2
3
4
5
|
function trim(str) { return str.replace(/^[ " " || " " ]*/, "" ).replace(/[ " " | " " ]*$/, "" ); // 去除头和尾 return str.replace(/\s/g, '' ); //去除所有空格 return str.replace(/(\s*$)/g, "" ); //去除右边所有空格 } |
6、判断是否为邮箱地址
1
2
3
4
5
6
7
8
9
|
function isEmail(emailStr) { var reg = /^[a-zA-Z0-9]+([._-]*[a-zA-Z0-9]*)*@[a-zA-Z0-9]+.[a-zA-Z0-9{2,5}$]/; var result = reg.test(emailStr); if (result) { alert( "ok" ); } else { alert( "error" ); } } |
7、判断是否是手机号
1
2
3
4
5
6
7
8
|
function isMobilePhone(phone) { var reg = /^1\d{10}$/; if (reg.test(phone)) { alert( 'ok' ); } else { alert( 'error' ); } } |
8、获取一个对象里面第一次元素的数量
1
2
3
4
5
6
7
8
9
10
11
|
function getObjectLength(obj){ var i=0; for ( var attrin obj){ if (obj.hasOwnProperty(attr)){ i++; } } console.log(i); } var obj = {name: 'kob' ,age:20}; getObjectLength(obj) //2 |
9、获取元素相对于浏览器窗口的位置,返回一个{x,y}对象
1
2
3
4
5
6
7
8
9
10
|
function getPosition(element) { var offsety = 0; offsety += element.offsetTop; var offsetx = 0; offsetx += element.offsetLeft; if (element.offsetParent != null ) { getPosition(element.offsetParent); } return { Left: offsetx, Top: offsety }; } |
10、判断某个字母在字符串中出现的次数
1
2
3
4
5
6
7
8
|
var str = 'To be, or not to be, that is the question.' ; var count = 0; var pos = str.indexOf( 'e' ); while (pos !== -1) { count++; pos = str.indexOf( 'e' , pos + 1); } console.log(count) //4 |
11、计算出数组中出现次数最多的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5]; var tepm = '' ,count =0; var newarr = new Array(); for ( var i=0;i<arrayObj.length;i++){ if (arrayObj[i] != -1) { temp = arrayObj[i]; } for ( var j=0;j<arrayObj.length;j++){ if (temp == arrayObj[j]) { count++; arrayObj[j] = -1; } } newarr.push(temp + ":" + count); count = 0; } for ( var i=0;i<newarr.length;i++){ console.log(newarr[i]); } |
12、数组filter(搜索功能)
1
2
3
4
5
6
7
8
|
var fruits = [ 'apple' , 'banana' , 'grapes' , 'mango' , 'orange' ]; function filterItems(query) { return fruits.filter( function (el) { return el.toLowerCase().indexOf(query.toLowerCase()) > -1; }) } console.log(filterItems( 'ap' )); // ['apple', 'grapes'] |
13、copy 对象(第一种)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//第一种 var cloneObj = function (obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for ( var keyin obj) { var val = obj[key]; newObj[key] = typeof val === 'object' ? cloneObj(val) : val; } return newObj; }; //第二种 function clone(origin , target){ var target = target || {}; for ( var propin origin){ target[prop] = origin[prop]; } return target; } |
14、深度克隆
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var newObj ={}; function deepClone(origin,target){ var target = target || {}, toStr = Object.prototype.toString, arrStr = "[object Array]" ; for ( var propin origin){ if (origin.hasOwnProperty(prop)){ if (origin[prop] != "null" && typeof (origin[prop]) == 'object' ){ //判断原型链 target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {} //判断obj的key是否是数组 deepClone(origin[prop],target[prop]); //递归的方式 } else { target[prop] = origin[prop]; } } } return target } deepClone(obj,newObj); console.log(newObj) |
15、求数组最大值和最小值
1
2
3
4
5
6
7
8
9
|
Array.prototype.max = function (){ return Math.max.apply({}, this ) } Array.prototype.min = function (){ return Math.min.apply({}, this ) } console.log([1,5,2].max()) |
16、json数组去重
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function UniquePay(paylist){ var payArr = [paylist[0]]; for ( var i =1; i < paylist.length; i++){ var payItem = paylist[i]; var repeat = false ; for ( var j =0; j < payArr.length; j++) { if (payItem.name == payArr[j].name) { repeat = true ; break ; } } if (!repeat) { payArr.push(payItem); } } return payArr; } |
17、对比两个数组,取出交集
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Array.intersect = function () { var result = new Array(); var obj = {}; for ( var i =0; i < arguments.length; i++) { for ( var j =0; j < arguments[i].length; j++) { var str = arguments[i][j]; if (!obj[str]) { obj[str] = 1; } else { obj[str]++; if (obj[str] == arguments.length) { result.push(str); } } //end else } //end for j } //end for i return result; } console.log(Array.intersect([ "1" , "2" , "3" ], [ "2" , "3" , "4" , "5" , "6" ])) |
18、数组和对象比较。取出对象的key和数组元素相同的
1
2
3
4
5
6
7
8
9
|
var arr = [ 'F00006' , 'F00007' , 'F00008' ]; var obj = { 'F00006' :[{ 'id' :21}], 'F00007' :[{ 'id' :11}]} var newobj = {}; for ( var itemin obj){ if (arr.includes(item)){ newobj[item] = obj[item] } } console.log(newObj) |
19、删除数组中某个元
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//第一种 Array.prototype.remove = function (val){ var index = this .indexOf(val); if (index !=0){ this .splice(index,1) } } [1,3,4].remove(3) //第二种 function remove(arr, indx) { for ( var i =0; i < arr.length; i++) { var index = arr.indexOf(arr[i]); if (indx == index) { arr.splice(index, 1) } } return arr } |
20、判断数组是否包含某个元素
1
2
3
4
5
6
7
8
9
10
|
Array.prototype.contains = function (val) { for ( var i =0; i < this .length; i++) { if ( this [i] == val) { return true ; } } return false ; }; [1, 2,3, 4].contains(2) //true |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通