js封装常用函数

最新推荐文章于 2023-02-21 09:29:07 发布

Start2019

最新推荐文章于 2023-02-21 09:29:07 发布

阅读量218

点赞数

分类专栏： js基础笔记

本文链接：https://blog.csdn.net/Start2019/article/details/101350845

版权

js基础笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

自己封装函数时，参数最好不要超过3个，若要超过，可以用数组或者对象；
1. 利用（Math.random）写指定范围的随机数
 2. 补零
 3. 数组去重
 4. 排序
 5. 敏感词过滤
 6. 判断数组中是否存在某一条数据，结果返回布尔值
 7. 商品列表
 8. 格式化日期
 9. 获取行内样式

1. 利用（`Math.random`）写指定范围的随机数；

（1）随机数的公共方法

//Math.random()//0~1之间的随机数
//Math.round(Math.random()) 随机数四舍五入取整；
function random(a,b){
	return Math.round(Math.random()*(b-a) + a);
}

（2）数字字母的数据验证码

  var str = "";//用来生成一个随机验证码库
  for(var i=0; i<4; i++){
    var num = random(48,57);
    var sStr = random(97,122);
    var lStr = random(65,90);
    str = str + String.fromCharCode(num) + String.fromCharCode(sStr) + String.fromCharCode(lStr)
  }

  var result = "";
  for(var i=0; i<4; i++){
    var index = random(0,str.length-1);
    result += str[index];
  }
  console.log(result);


  function random(a,b){
    return Math.round(Math.random()*(b-a)+a);
  }

（3）十六进制的随机色

  var r = random(0,255).toString(16);
  var g = random(0,255).toString(16);
  var b = random(0,255).toString(16);

  var str = "#"+createZero(r)+createZero(g)+createZero(b);
  document.body.style.backgroundColor = str;

  function createZero(n){
    if(n < 10 || n.length < 2){
      return "0" + n;
    } else {
      return "" + n;
    }
  }
  function random(a,b){
    return Math.round(Math.random()*(b-a)+a);
  }

2. 补零

function crateZero(n){
	if(n < 10 || n.length < 2){//数值和字符的补零
		return "0" + n;
	} else {
		return "" + n;
	}
}

3. 数组去重

（1）利用对象添加属性得到undefined；
优点：可以计算出重复的个数；
缺点：当数字和字符形式的数字相同时，且同时出现在同一个数组中，该方法不好用；

var arr = ['a','b','a','a','b','a'];
var obj = {};
for(var i=0; i<arr.length; i++){
	if( obj[arr[i]] ){
		obj[arr[i]]++;
	} else {
		obj[arr[i]] = 1
	}
}
console.log(obj);//{a:4, b:2}
var newArr = [];
for(var key in obj){
	newArr.push(key);
}
console.log(newArr);//[a,b]

（2）用 indexOf() 方法

var arr = [3,5,6,2,1,8,5,4,2,"2"];

var newArr = [];
for(var i = 0;i<arr.length; i++){
	if(newArr.indexOf(arr[i]) == -1){
		newArr.push(arr[i]);
	}
}
console.log(newArr);//(8) [3, 5, 6, 2, 1, 8, 4, "2"]

（3）利用 ES6 的 Set() 方法去重（不严格）

function norepeat(arr){
	var s = new Set(arr);
	var newArr = [];
	for(var i of s){
		newArr.push(i);
	}
	return newArr;
}

4. 排序

（1）冒泡排序

var arr = [12,9,6,8,3,4];
for(j = 0; j<arr.length-1; j++){
	for(var i = 0; i<arr.length-1-j; i++){
		if(arr[i] > arr[i+1]){
			var temp  = arr[i];
			arr[i] = arr[i+1];
			arr[i+1] = temp;		
		}
	}
}

（2）比较排序

var arr = [3,1,2,4,6,9];
  console.log(arr);
  for(var i = 0;i<arr.length; i++){
    var min = arr[i];//假设为最小值
    var minIndex = i;//最小值的index

    for(var j = i+1; j<arr.length; j++){ //i与后面所有的值做比较
      if(min > arr[j]){
        min = arr[j];
        minIndex = j;
      }
    }

    arr[minIndex] = arr[i];
    arr[i] = min
  }
  console.log(arr);

（3）用 sort() 方法排序（解决 sort() 按位排序问题）

//升序：
var arr2 = [2,101,6,58,3]
arr2.sort(function(a,b){return a-b;})
console.log(arr2);//(5) [2, 3, 6, 58, 101]

//降序：
arr2.sort(function(a,b){return b-a;})
console.log(arr2);//(5) [101, 58, 6, 3, 2]

5. 敏感词过滤

（1）利用字符的 replace() 方法（这种方法耗内存，最好用正则）

var msg = ['fuck','tm','nnd','sb','sx'];//敏感词库
var str = "fuck，你tm真让人无语";//要说的话
for(var i=0;i<str.length;i++){
	msg.forEach( function (val,index){
		str = str.replace(val,"**");
	})
}
console.log(str);//**，你**真让人无语

（2）正则

var msg = ['fuck','tm','nnd','sb','sx'];//敏感词库
var str = "fuck，你tm真让人无语";//要说的话
for(var i=0; i<msg.length; i++){
	var reg = new RegExp(msg[i],"g");
	str = str.replace(reg,"**")
}
console.log(str);//**，你**真让人无语

6. 判断数组中是否存在某一条数据，结果返回布尔值；

var arr = [2,4,6,5,8,1]
function has(arr,num){
	for(var i=0; i<arr.length; i++){
		if(arr[i] === num){
			return true;
		}
	}
	return false;
}
console.log(has(arr,"1"));//false
console.log(has(arr,1));//true

7. 商品列表

（1）字符串拼接的方法

  var str = "";
  for(var i=0; i<data.length; i++){
    str += '<li>'+
            '<img src="'+data[i].src+'" alt="暂无图片">'+
            '<p>'+data[i].title+'</p>'+
            '<span>￥ '+data[i].price+'</span>'+
          '</li>'
  }
  var ul = document.querySelector('ul');
  ul.innerHTML = str;

8. 格式化日期

console.log(new Date()); //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)

（1）将标准格式的时间改为： yyyy-mm-dd hh:mm:ss

var date = createDate("-");
console.log(date);  //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)
function createDate(sign){
	var d = new Date();
	var y = d.getFullYear();
	var m = d.getMonth()+1;
	var mydate = d.getDate();
	var day = d.getDay();

	var h = d.getHours();
	var min = d.getMinutes();
	var s = d.getSeconds();
	
	switch(day){
	  case 0: day = "星期日";bread;
	  case 1: day = "星期一";bread;
	  case 2: day = "星期二";bread;
	  case 3: day = "星期三";bread;
	  case 4: day = "星期四";bread;
	  case 5: day = "星期五";bread;
	  case 6: day = "星期六";bread;
	};
	return y +sign+ createZone(m) +sign+ createZone(mydate) +" "+ day +" "+ createZone(h) +":"+ createZone(min) +":"+ createZone(s);
}

function createZone(n){
	if(n<10 || n.length<2){
		return "0"+n;
	} else {
		return ""+n;
	}
}

（2）时间戳转日期格式
时间戳为10位需*1000，时间戳为13位的话不需乘1000

console.log(new Date(1570518752234)); //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)

9. 获取行内样式

function getStyle(ele,""){
	if(ele.currentStyle){
		//return ele.currentStyle.width;//当对象身上的属性是变量时，要用 [] 来访问，而不用 .
		return ele.currentStyle[attr];
	} else {
		return getComputedStyle(ele,false)[attr];
}
console.log( getStyle(obox,"height") )

10. 事件

（1）事件冒泡

var e = eve || window.event;
function stopBubble(e){
	if(e.stopPropagation){
		e.stopPropagation();
	} else {
		e.cancelBubble = true;
	}
}

（2）阻止默认事件

function stopDefault(e){
	if(e.preventDefault){
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
}

（3）事件监听

添加监听：

function addEvent(ele,type,callback){
	if(ele.addEventListener){
		ele.addEventListener(type,callback,false);
	} else if(ele.attachEvent){
		ele.attachEvent("on"+type,callback);
	} else {
		ele["on"+type] = callback;
	}
}

addEvent(obox,"click",function(){
	console.log(1);
})

//或者
addEvent(obox,"click",function())

删除事件监听：

function removeEvent(ele,type,callback){
	if(ele.removeEventListener){
		ele.removeEventListener(type,callback,false);
	} else if(ele.detachEvent){
		ele.detachEvent("on"+type,callback):
	} else {
		ele["on"+type] = null;
	}
}

removeEvent(obox,click,fn);

11. 封装 cookie

（1）添加：

function setCookie(key,value,num){
//不传num，默认会话级别。
	if(num){
		var  d = new Date();
		d.setDate(d.getDate()+num);
		document.cookie = key+"="+value+";expires="+d;
	} else {
		document.cookie = key+"="+value;	
	}
}

（2）删除：

function removeCookie(key){
	setCookie(key,"suiyizhi"，-1);
}

（3）获取：

function getCookie(key){
	var str = document.cookie;
	for(var i=0; i<str.split("; ").length; i++){
		if(str.split("; ")[i].split("=")[0] == key){
			return str.split("; ")[i].split("=")[1];
		}
	}
	return ""; //没有该cookie时返回""，若不写这一句，则会显示成undfined。
}

12. 判断一个字符串是否以数字开头？

var str1 = "1a3";
var str2 = "aaa";
console.log( isNaN(parseInt(str1)) ); //false   是数字开头
console.log( isNaN(parseInt(str2)) ); //true  不是数字开头

13. 过滤空白节点

var list = obox.childNodes;
for(var i=0; i<list.length; i++){ //遍历所有节点
	if(list[i].nodeType == 1){  //元素节点的nodeType=1
		console.log(list[i]);
	}
}

Start2019

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js封装常用函数

利用（Math.random）写指定范围的随机数；//Math.random()//0~1之间的随机数//Math.round(Math.random()) 随机数四舍五入取整；2. 补零function zone(n){ if(n < 10){ n = "0" + n; } else { n = n; }}...
复制链接

扫一扫