开发用到的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 弹出登录窗口实现代码
Dec 24 Javascript
js word表格动态添加代码
Jun 07 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php设计模式小结
2013/02/15 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
javascript如何创建对象
2016/08/29 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
学习Vue组件实例
2018/04/28 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
python实现flappy bird小游戏
2018/12/24 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
幼儿园英语教学反思
2014/01/30 职场文书
教师教学评估方案
2014/05/09 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA