前端常用的js函数方法整理

更新日期: 2019-08-27阅读: 2.2k标签: 函数

1.判断js类型

 js有自己判断方法 typeof 但是当他遇到引用类型的时候得到的结果往往不是我们想要的,例如

typeof []      // object   
typeof null   // object

于是自定义判断类型就出现了

// 自定义判断元素类型JS
function toType(obj) {
  return Object.prototype.toString.call(obj).match(/\s+(\w+)/)[1].toLowerCase()
}

//来我们测试一下 
filterNull(undefined)  //'undefined'
filterNull(null)    //'null'
filterNull(NaN)    //'number'
filterNull(function(){})  //'function'
filterNull({})   //'object'
filterNull([])    //'array'
filterNull(0)    //'number'
filterNull(false)   //'boolean'

 

2.过滤参数

有没有时候后台返回的参数是null或者undefined然后就被丢到了页面上,很难看,要每一个地方都去处理,很不好,如果你也遇到过这样情况,那么你就可以用到这个小工具

// 参数过滤函数(处理参数 格式化参数)
function filterNull(o) {
  for (var key in o) {
    if (o[key] === null) {
      o[key] = '/'
    }
    if (o[key] === undefined) {
      o[key] = '/'
    }
    if (toType(o[key]) === 'string' && o[key] === '') {
      o[key] = '/'
    //   debugger
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
// 自定义判断元素类型JS
function toType(obj) {
  return Object.prototype.toString.call(obj).match(/\s+(\w+)/)[1].toLowerCase()
}

 

3.截取视频第一帧

//截取视频第一帧
//需要后台配合视频资源的跨域
  initialize() {
      var video, output;
      var scale = 0.8;
      var captureImage = function() {
                  var canvas = document.createElement("canvas");
                  canvas.width = video.videoWidth * scale;
                  canvas.height = video.videoHeight * scale;
                  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                  var img = document.createElement("img");
                  img.src = canvas.toDataURL("image/png");
                  output.appendChild(img);
      }
      output = document.getElementById("output");  //输出的div
      video = document.getElementById("VIDEO");    //要截取的目标video
      video.setAttribute('crossorigin', 'anonymous');  //允许跨域
      video.addEventListener('loadeddata',captureImage); //当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
},


4.根据字节数截取字符串

    //根据字节截取字符串
    mySubString(str, len){
        var regexp = /[^\x00-\xff]/g;// 正在表达式匹配中文
        // 当字符串字节长度小于指定的字节长度时
        if (str.replace(regexp, "aa").length <= len) {
        return str;
        }
        // 假设指定长度内都是中文
        var m = Math.floor(len/2);
        for (var i = m, j = str.length; i < j; i++) {
        // 当截取字符串字节长度满足指定的字节长度
        if (str.substring(0, i).replace(regexp, "aa").length >= len) {
        return str.substring(0, i);
        }
        }
        return str;
    }
    


5.js复制到剪切板

  //input框不能有disabled属性
  // 根据第一条扩展,input的width || height 不能为0;
  //input框不能有hidden属性  
<input id='input_url' v-model='product_url' type="text">
  var input = $('#input_url');
  input.select();
  document.execCommand("Copy");


  https://www.cnblogs.com/leong-min/p/6483523.html


6.rem适配字体大小

import vue from 'vue'
function resizeFont() {
  var docEl = document.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 10 * (clientWidth / 360) + 'px'
  }
  if (!document.addEventListener) return
  window.addEventListener(resizeEvt, recalc, false)
  recalc()
  document.addEventListener(onload, recalc, false)
}
Vue.prototype.$resizeFont = resizeFont


7.获取当前域名

window.location.protocol+"//"+window.location.host; //   返回https://www.cnblogs.com

window.location.host; //返回url 的主机部分,例如:mp.csdn.net  
window.location.hostname; //返回"www.cnblogs.com
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)   "https://www.cnblogs.com/Qqqing/p/11417738.html"
window.location.pathname; //返回 /Qqqing/p/11417738.html 
window.location.protocol; //返回url 的协议部分,例如: http:,ftp:,maito:等等。  
window.location.port //url 的端口部分,如果采用默认的80端口,那么返回值并不是默认的80而是空字符  

 

 8.获取url里的参数

//获取url里的参数     
 function GetQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = window.location.search.substr(1).match(reg)// search,查询?后面的参数,并匹配正则
        if (r != null) return unescape(r[2]); return null
   }
getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
},


链接: https://www.fly63.com/article/detial/4959

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!