开发用到的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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
基于mysql的bbs设计(四)
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python中随机函数random用法实例
2015/04/30 Python
python实现log日志的示例代码
2018/04/28 Python
Python调用Windows命令打印文件
2020/02/07 Python
python交互模式基础知识点学习
2020/06/18 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
介绍一下SQL Server的全文索引
2013/08/15 面试题
几道Java和数据库的面试题
2013/05/30 面试题
优秀党支部事迹材料
2014/01/14 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
创业计划书之面包店
2019/09/17 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python