开发用到的js封装方法(20种)


Posted in Javascript onOctober 12, 2018

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<arr.length;i++){
if(arrs.indexOf(arr[i])== -1){
arrs.push(arr[i])
}
}
return arrs;
}

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 = /^1\d{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<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(搜索功能)

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 i
return 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

 

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
优化网页之快速的呈现我们的网页
Jun 29 Javascript
js 内存释放问题
Apr 25 Javascript
jQuery cdn使用介绍
May 08 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
You might like
聊天室php&amp;mysql(二)
2006/10/09 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript中this详解
2015/09/01 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
判断单链表中是否存在环
2012/07/16 面试题
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
工程班组长岗位职责
2013/12/30 职场文书
网络编辑职责
2014/03/01 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
我是特种兵观后感
2015/06/11 职场文书
单位更名证明
2015/06/18 职场文书
大学升旗仪式主持词
2015/07/04 职场文书