博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js方法封装
阅读量:4086 次
发布时间:2019-05-25

本文共 4823 字,大约阅读时间需要 16 分钟。

1、判断是否是一个数组

function isArray(arr){return Object.prototype.toString.call(arr) ==='[object Array]';} isArray([1,2,3]) //true

2、判断是否是一个函数(三种)

function isFunction(fn) {return Object.prototype.toString.call(fn) ==='[object Function]';return fn.constructor == Function;return fn instanceof Function;return typeof (fn) == Function;}

3、数组去重,只考虑数组中元素为数字或者字符串

function newarr(arr){var arrs = [];for(var i =0;i

4、动态去重

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、去除字符串空格(包含三种情况)

function trim(str) {return str.replace(/^[" "||" "]*/,"").replace(/[" "|" "]*$/,"");// 去除头和尾return str.replace(/s/g,'');//去除所有空格return str.replace(/(s*$)/g,"");//去除右边所有空格}

6、判断是否为邮箱地址

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、判断是否是手机号

function isMobilePhone(phone) {var reg = /^1d{10}$/;if (reg.test(phone)) {alert('ok');} else {alert('error');}}

8、获取一个对象里面第一次元素的数量

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}对象

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、判断某个字母在字符串中出现的次数

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、计算出数组中出现次数最多的元素

var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5];var tepm = '',count =0;var newarr = new Array();for(var i=0;i

12、数组filter(搜索功能)

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 对象(第一种)

//第一种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、深度克隆

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、求数组最大值和最小值

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数组去重

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、对比两个数组,取出交集

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 ireturn result;}console.log(Array.intersect(["1","2", "3"], ["2","3", "4", "5", "6"]))

18、数组和对象比较。取出对象的key和数组元素相同的

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、删除数组中某个元素

//第一种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、判断数组是否包含某个元素

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

这些技术如何学习,有没有免费资料?

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好,欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有的架构经验哦!!

转载地址:http://bagni.baihongyu.com/

你可能感兴趣的文章
jbpm工作流引擎(1)----概述
查看>>
webService笔记(2)---入门示例
查看>>
nginx(1)---概述
查看>>
Nginx(5)---使用nginx作为负载均衡器
查看>>
mybatis---使用generator自动创建代码
查看>>
Hibernate(1)---概述
查看>>
hibernate(2)---入门示例
查看>>
struts2(2)---入门示例
查看>>
springmvc(2)---入门示例
查看>>
java(20)---克隆
查看>>
java(20)---克隆的第二种方式:串行化
查看>>
mybatis(2)---入门示例
查看>>
mybatis(3)---使用mybatis对表进行CRUD操作
查看>>
mybatis(4)---优化配置文件中的配置
查看>>
mybatis(6)---mapper动态代理方式
查看>>
mybatis(5)---如何解决实体类中字段和数据表字段不对应引发的问题
查看>>
Activity(1)---搭建环境
查看>>
jbpm(2)---搭建jbpm开发环境
查看>>
springSecurity(1)---入门示例
查看>>
jbpm(3)---jbpm入门示例
查看>>