前端常用的js函数方法整理指南攻略_函数菜鸟教程下载

1.判断js类型 js有自己判断方法 typeof 但是当他遇到引用类型的时候得到的结果往往不是我们想要的,例如typeof [] // object
typeof null // object于是自定义判断类型就出现了// 自定义判断元素类型JS
function toType(obj) {return Object.prototype

前端常用的js函数方法整理指南攻略

1.判断js类型

前端常用的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;
},
海计划公众号
(0)
上一篇 2020/03/24 05:42
下一篇 2020/03/24 05:42

您可能感兴趣的内容

  • ES6中扩展运算符(spread)和剩余运算符(rest)小白教程_运算指南教程

    /******************扩展运算符(spread)********************///demo 1 传递数据代替多个字符串的形式function test(a,b,c){console.log(a);console.log(b);console.log(c);}var arr = [1, 2, 3];test(…arr);//

    2020/03/26
  • 为什么要用css动画替换js动画?小白知识_动画入门指南

    导致JavaScript效率低的两大原因:操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大,用户肉眼几乎看不见页面动画产生的repaint和reflow,所以工程师几乎无需过

    2020/03/24
  • screenfull.js基础指南_浏览器全屏插件

    screenfull.js基础指南 官方网址:https://sindresorhus.com/screenfull.js GitHub:https://github.com/si…

    2020/03/06
  • 写业务代码最容易掉的8种坑使用攻略_代码入门指南

    1、客户端的使用我们在使用Redis、ElasticSearch、RabbitMQ、Mongodb等中间件或存储的时候肯定都会使用客户端包来和这些系统通讯,我们也会使用Http的一些客户端来发Http请求。在使用这些客户端包的时候,非常容易犯错的一个地方就是Client的使用方式,比如有一个叫做RedisClient的类,是Redis操作的入口。你应该是每次

    2020/03/29
  • 精准准确的统一社会信用代码正则(js)基础知识_正则菜鸟教程

    参照标准:《GB_32100-2015_法人和其他组织统一社会信用代码编码规则.》按照编码规则:统一代码为18位,统一代码由十八位的数字或大写英文字母(不适用I、O、Z、S、V)组成,由五个部分组成:第一部分(第1位)为登记管理部门代码,9表示工商部门;(数字或大写英文字母)第二部分(第2位)为机构类别代码;(数字或大写英文字母)第三部分(第3-8位)为登记

    2020/03/24
  • Habitica菜鸟教程_游戏化Todo

    Habitica菜鸟教程 官方网址:https://habitica.com/ 简介描述:游戏化Todo Habitica是一个免费的习惯养成及生产力应用,让你“游戏人生”。游戏里…

    2020/03/11
  • 接口使用说明_接口小白常识

    接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的

    2020/03/23
  • 深入解析 Node.js 事件循环工作机制入门基础_机制入门指南

    本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明,进一步探索了 Node 的核心工作原理。每当人们谈论 Node.js 时,都会出现很多问题,比如它 究竟是什么 、这项技术有什么用、它是否 有未来 等等。让我们尝试讨论第一部分。回答这个问题最简单的方法是列出 Node 在技术上的许多定义,如:Node.js 是一个基于 Chrome V8 Ja

    2020/03/29
  • reframe.js教程视频_将非响应式的元素变成响应式元素的 Js插件

    reframe.js教程视频 官方网址:https://dollarshaveclub.github.io/reframe.js/ GitHub:https://github.co…

    2020/03/06
  • CC防御过程中,WAF的主要特点有哪些?零基础入门_攻击使用帮助

    一部分网站和游戏,以及金融的企业网站负责人员对于流量攻击应该属于耳熟能详。对此问题一直也是他们最头疼的。因此在解决DDoS攻击和CC攻击防御的过程中,运用了WAF指纹识别架构去做相对应的权限策略,以此避免误封正常的用户访问请求。这里的WAF是什么呢?主要的特点有哪些呢?WAF俗称WEB应用防火墙,也称应用级入侵防御系统。主要通过检测应用层数据对其应用进行控制

    2020/03/29
  • WebDev小白入门_在线网站优化检测工具

    WebDev小白入门 官方网址:https://web.dev/ 简介描述:在线网站优化检测工具 WebDev是由谷歌发布的全新网站优化检测工具,让你的网站贴切搜索引擎,输入网址即…

    2020/03/10
  • 实现简易版Promise指南教程_Promise指南教程

    实现之前,我们先看看Promise的调用const src = ‘https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223×125&quality=100’const promise = new Pro

    2020/03/29
  • 开发直播软件可能会用到的第三方服务有哪些?小白常识_直播基础教程

    直播软件的开发,虽然现在很多技术都已经趋向成熟,但是有些东西不是仅仅技术就可以实现的,在考虑到时间、成本、风险、功能稳定性等多种因素的情况下,大部分直播平台开发时都会预留第三方服务的接口来节约开发的成本。一、第三方服务器1.CDN在玩游戏或看电影时经常会出现画面撕裂、卡顿等现象,为了解决网络延迟卡顿的问题,就需要用到CDN服务。CDN即内容分发网络,是构建在

    2020/03/23
  • Flutter官方WebView使用零基础入门_webview小白知识

    使用过人气很高的flutter_webview_plugin,但是缺少2个重要的功能。也在打开多个WebView时会出错。不能在JS中调用Flutter方法不能在H5进入某个URL之前拦截虽然该插件不够完整,但是使用起来很方便,封装了很多功能。如果交互不多可以用该插件。官方的 webview_flutter之后使用官方的webview_flutter插件。附

    2020/03/29
  • React Hooks实践基础入门_Hooks小白常识

    9月份开始,使用了React16.8的新特性React Hooks对项目进行了重构,果然,感觉没有被辜负,就像阮一峰老师所说的一样,这个 API 是 React 的未来。HooksReact Hooks是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。说是新的特性,但是与其他的版本的

    2020/03/22
  • Js代码中的span拼接基础指南_代码教程视频

    今天遇到一个小需求,用bootstrap的table只有两个字段,占用太宽,页面不美观,组长要求用拼接,一行几列的形式展现出来。我在form表单中拼接了span,遇到以下问题:1.点击查询,以前生成的span不消失,新的拼接在后面2.span中的复选框,值的取出,复选框的状态更换对于职场老手来说,这没什么,但是js代码没接触多久的我来说,只能撞墙寻出口,边撞

    2020/03/26