Rumah > hujung hadapan web > tutorial js > 开发时候常用到的的js方法封装(总结)

开发时候常用到的的js方法封装(总结)

青灯夜游
Lepaskan: 2018-10-11 15:45:46
ke hadapan
1891 orang telah melayarinya

本文给大家介绍开发时候常用到的的js方法封装,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

1、判断是否是一个数组

1

2

3

4

5

function isArray(arr){

return Object.prototype.toString.call(arr) ==='[object Array]';

}

  

isArray([1,2,3]) //true

Salin selepas log masuk

2、判断是否是一个函数(三种)

1

2

3

4

5

6

function isFunction(fn) {

return Object.prototype.toString.call(fn) ==='[object Function]';

return fn.constructor == Function;

return fn instanceof Function;

return typeof (fn) == Function;

}

Salin selepas log masuk

3、数组去重,只考虑数组中元素为数字或者字符串

1

2

3

4

5

6

7

8

9

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;

}

Salin selepas log masuk

4、动态去重

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var arr = [1,2, 3, 4];

function add() {

var newarr = [];

$(&#39;.addEle&#39;).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()

Salin selepas log masuk

5、去除字符串空格(包含三种情况)

1

2

3

4

5

function trim(str) {

return str.replace(/^[" "||" "]*/,"").replace(/[" "|" "]*$/,"");// 去除头和尾

return str.replace(/\s/g,&#39;&#39;);//去除所有空格

return str.replace(/(\s*$)/g,"");//去除右边所有空格

}

Salin selepas log masuk

6、判断是否为邮箱地址

1

2

3

4

5

6

7

8

9

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");

}

}

Salin selepas log masuk

7、判断是否是手机号

1

2

3

4

5

6

7

8

function isMobilePhone(phone) {

var reg = /^1\d{10}$/;

if (reg.test(phone)) {

alert(&#39;ok&#39;);

} else {

alert(&#39;error&#39;);

}

}

Salin selepas log masuk

8、获取一个对象里面第一次元素的数量

1

2

3

4

5

6

7

8

9

10

11

function getObjectLength(obj){

var i=0;

for( var attrin obj){

if(obj.hasOwnProperty(attr)){

i++;

}

}

console.log(i);

}

var obj = {name:&#39;kob&#39;,age:20};

getObjectLength(obj) //2

Salin selepas log masuk

9、获取元素相对于浏览器窗口的位置,返回一个{x,y}对象

1

2

3

4

5

6

7

8

9

10

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 };

} 

Salin selepas log masuk

10、判断某个字母在字符串中出现的次数

1

2

3

4

5

6

7

8

var str = &#39;To be, or not to be, that is the question.&#39;;

var count = 0;

var pos = str.indexOf(&#39;e&#39;);

while (pos !== -1) {

count++;

pos = str.indexOf(&#39;e&#39;, pos + 1);

}

console.log(count) //4

Salin selepas log masuk

11、计算出数组中出现次数最多的元素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5];

var tepm = &#39;&#39;,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]);

}

Salin selepas log masuk

12、数组filter(搜索功能)

1

2

3

4

5

6

7

8

var fruits = [&#39;apple&#39;,&#39;banana&#39;, &#39;grapes&#39;,&#39;mango&#39;, &#39;orange&#39;];

function filterItems(query) {

return fruits.filter(function(el) {

return el.toLowerCase().indexOf(query.toLowerCase()) > -1;

})

}

 

console.log(filterItems(&#39;ap&#39;)); // [&#39;apple&#39;, &#39;grapes&#39;]

Salin selepas log masuk

13、copy 对象(第一种)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//第一种

var cloneObj =function(obj) {

var newObj = {};

if (obj instanceof Array) {

newObj = [];

}

for (var keyin obj) {

var val = obj[key];

newObj[key] = typeof val === &#39;object&#39; ? cloneObj(val) : val;

}

return newObj;

};

//第二种

function clone(origin , target){

var target = target || {};

for(var propin origin){

target[prop] = origin[prop];

}

return target;

} 

Salin selepas log masuk

14、深度克隆

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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]) == &#39;object&#39;){//判断原型链

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)

Salin selepas log masuk

15、求数组最大值和最小值

1

2

3

4

5

6

7

8

9

Array.prototype.max = function(){

return Math.max.apply({},this)

}

  

Array.prototype.min = function(){

return Math.min.apply({},this)

}

  

console.log([1,5,2].max())

Salin selepas log masuk

16、json数组去重

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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;

} 

Salin selepas log masuk

17、对比两个数组,取出交集

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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"]))

Salin selepas log masuk

18、数组和对象比较。取出对象的key和数组元素相同的

1

2

3

4

5

6

7

8

9

var arr = [&#39;F00006&#39;,&#39;F00007&#39;,&#39;F00008&#39;];

var obj = {&#39;F00006&#39;:[{&#39;id&#39;:21}],&#39;F00007&#39;:[{&#39;id&#39;:11}]}

var newobj = {};

for(var itemin obj){

if(arr.includes(item)){

newobj[item] = obj[item]

}

}

console.log(newObj)

Salin selepas log masuk

19、删除数组中某个元素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//第一种

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

}

Salin selepas log masuk

20、判断数组是否包含某个元素

1

2

3

4

5

6

7

8

9

10

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

Salin selepas log masuk

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程

相关推荐:

php公益培训视频教程

JavaScript图文教程

JavaScript在线手册

Atas ialah kandungan terperinci 开发时候常用到的的js方法封装(总结). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:cnblogs.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan