开发用到的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 相关文章推荐
javascript克隆对象深度介绍
Nov 20 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
使用 Opentype.js 生成字体子集的实例代码详解
May 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
配置支持SSI
2006/11/25 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
Yii框架登录流程分析
2014/12/03 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
python算法表示概念扫盲教程
2017/04/13 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
小学生操行评语
2014/04/22 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2019新员工心得体会
2019/06/25 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
js前端图片加载异常兜底方案
2022/06/21 Javascript