经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
开发用到的js封装方法(20种)
来源:jb51  时间:2018/10/15 8:59:53  对本文有异议

1、判断是否是一个数组

  1. function isArray(arr){
  2. return Object.prototype.toString.call(arr) ==='[object Array]';
  3. }
  4. isArray([1,2,3]) //true

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

  1. function isFunction(fn) {
  2. return Object.prototype.toString.call(fn) ==='[object Function]';
  3. return fn.constructor == Function;
  4. return fn instanceof Function;
  5. return typeof (fn) == Function;
  6. }

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

  1. function newarr(arr){
  2. var arrs = [];
  3. for(var i =0;i<arr.length;i++){
  4. if(arrs.indexOf(arr[i])== -1){
  5. arrs.push(arr[i])
  6. }
  7. }
  8. return arrs;
  9. }

4、动态去重

  1. var arr = [1,2, 3, 4];
  2. function add() {
  3. var newarr = [];
  4. $('.addEle').click(() => {
  5. var rnd = Math.ceil(Math.random() * 10);
  6. newarr.push(rnd)
  7. for (var i =0; i < newarr.length; i++) {
  8. if (arr.indexOf(newarr[i]) == -1) {
  9. arr.push(newarr[i])
  10. arr.sort(function (a, b) {
  11. return b - a //降序
  12. });
  13. }
  14. }
  15. console.log(arr)//[1,2,3,4,5,6,7,8,9]
  16. })
  17. }
  18. add()

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

  1. function trim(str) {
  2. return str.replace(/^[" "||" "]*/,"").replace(/[" "|" "]*$/,"");// 去除头和尾
  3. return str.replace(/\s/g,'');//去除所有空格
  4. return str.replace(/(\s*$)/g,"");//去除右边所有空格
  5. }

6、判断是否为邮箱地址

  1. function isEmail(emailStr) {
  2. var reg = /^[a-zA-Z0-9]+([._-]*[a-zA-Z0-9]*)*@[a-zA-Z0-9]+.[a-zA-Z0-9{2,5}$]/;
  3. var result = reg.test(emailStr);
  4. if (result) {
  5. alert("ok");
  6. } else {
  7. alert("error");
  8. }
  9. }

7、判断是否是手机号

  1. function isMobilePhone(phone) {
  2. var reg = /^1\d{10}$/;
  3. if (reg.test(phone)) {
  4. alert('ok');
  5. } else {
  6. alert('error');
  7. }
  8. }

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

  1. function getObjectLength(obj){
  2. var i=0;
  3. for( var attrin obj){
  4. if(obj.hasOwnProperty(attr)){
  5. i++;
  6. }
  7. }
  8. console.log(i);
  9. }
  10. var obj = {name:'kob',age:20};
  11. getObjectLength(obj) //2

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

  1. function getPosition(element) {
  2. var offsety = 0;
  3. offsety += element.offsetTop;
  4. var offsetx = 0;
  5. offsetx += element.offsetLeft;
  6. if (element.offsetParent != null) {
  7. getPosition(element.offsetParent);
  8. }
  9. return { Left: offsetx, Top: offsety };
  10. }

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

  1. var str = 'To be, or not to be, that is the question.';
  2. var count = 0;
  3. var pos = str.indexOf('e');
  4. while (pos !== -1) {
  5. count++;
  6. pos = str.indexOf('e', pos + 1);
  7. }
  8. console.log(count) //4

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

  1. var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5];
  2. var tepm = '',count =0;
  3. var newarr = new Array();
  4. for(var i=0;i<arrayObj.length;i++){
  5. if (arrayObj[i] != -1) {
  6. temp = arrayObj[i];
  7. }
  8. for(var j=0;j<arrayObj.length;j++){
  9. if (temp == arrayObj[j]) {
  10. count++;
  11. arrayObj[j] = -1;
  12. }
  13. }
  14. newarr.push(temp + ":" + count);
  15. count = 0;
  16. }
  17. for(var i=0;i<newarr.length;i++){
  18.   console.log(newarr[i]);
  19. }

12、数组filter(搜索功能)

  1. var fruits = ['apple','banana', 'grapes','mango', 'orange'];
  2. function filterItems(query) {
  3. return fruits.filter(function(el) {
  4. return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  5. })
  6. }
  7. console.log(filterItems('ap')); // ['apple', 'grapes']

13、copy 对象(第一种)

  1. //第一种
  2. var cloneObj =function(obj) {
  3. var newObj = {};
  4. if (obj instanceof Array) {
  5. newObj = [];
  6. }
  7. for (var keyin obj) {
  8. var val = obj[key];
  9. newObj[key] = typeof val === 'object' ? cloneObj(val) : val;
  10. }
  11. return newObj;
  12. };
  13. //第二种
  14. function clone(origin , target){
  15. var target = target || {};
  16. for(var propin origin){
  17. target[prop] = origin[prop];
  18. }
  19. return target;
  20. } 

14、深度克隆

  1. var newObj ={};
  2. function deepClone(origin,target){
  3. var target = target || {},
  4. toStr = Object.prototype.toString,
  5. arrStr = "[object Array]";
  6. for(var propin origin){
  7. if(origin.hasOwnProperty(prop)){
  8. if(origin[prop] != "null" && typeof(origin[prop]) == 'object'){//判断原型链
  9. target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {}//判断obj的key是否是数组
  10. deepClone(origin[prop],target[prop]);//递归的方式
  11. }else{
  12. target[prop] = origin[prop];
  13. }
  14. }
  15. }
  16. return target
  17. }
  18. deepClone(obj,newObj);
  19. console.log(newObj)

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

  1. Array.prototype.max = function(){
  2. return Math.max.apply({},this)
  3. }
  4. Array.prototype.min = function(){
  5. return Math.min.apply({},this)
  6. }
  7. console.log([1,5,2].max())

16、json数组去重

  1. function UniquePay(paylist){
  2. var payArr = [paylist[0]];
  3. for(var i =1; i < paylist.length; i++){
  4. var payItem = paylist[i];
  5. var repeat = false;
  6. for (var j =0; j < payArr.length; j++) {
  7. if (payItem.name == payArr[j].name) {
  8. repeat = true;
  9. break;
  10. }
  11. }
  12. if (!repeat) {
  13. payArr.push(payItem);
  14. }
  15. }
  16. return payArr;
  17. } 

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

  1. Array.intersect = function () {
  2. var result = new Array();
  3. var obj = {};
  4. for (var i =0; i < arguments.length; i++) {
  5. for (var j =0; j < arguments[i].length; j++) {
  6. var str = arguments[i][j];
  7. if (!obj[str]) {
  8. obj[str] = 1;
  9. }
  10. else {
  11. obj[str]++;
  12. if (obj[str] == arguments.length)
  13. {
  14. result.push(str);
  15. }
  16. }//end else
  17. }//end for j
  18. }//end for i
  19. return result;
  20. }
  21. console.log(Array.intersect(["1","2", "3"], ["2","3", "4", "5", "6"]))

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

  1. var arr = ['F00006','F00007','F00008'];
  2. var obj = {'F00006':[{'id':21}],'F00007':[{'id':11}]}
  3. var newobj = {};
  4. for(var itemin obj){
  5. if(arr.includes(item)){
  6. newobj[item] = obj[item]
  7. }
  8. }
  9. console.log(newObj)

19、删除数组中某个元素

  1. //第一种
  2. Array.prototype.remove = function(val){
  3. var index = this.indexOf(val);
  4. if(index !=0){
  5. this.splice(index,1)
  6. }
  7. }
  8. [1,3,4].remove(3)
  9. //第二种
  10. function remove(arr, indx) {
  11. for (var i =0; i < arr.length; i++) {
  12. var index = arr.indexOf(arr[i]);
  13. if (indx == index) {
  14. arr.splice(index, 1)
  15. }
  16. }
  17. return arr
  18. }

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

  1. Array.prototype.contains = function (val) {
  2. for (var i =0; i < this.length; i++) {
  3. if (this[i] == val) {
  4. return true;
  5. }
  6. }
  7. return false;
  8. };
  9. [1, 2,3, 4].contains(2)//true

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号