js篇（技术总结 持续更新）

20240104 win10锁屏壁纸存放位置目录路径

C:\Users\zhangdi\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets

20231120 jsonp格式的数据转化为json格式

function jsonpToJson (datas) {
  let jsonData = null
  datas = datas.replace(';','')
  if (typeof datas === 'string') {
    const reg = /^\w+\((\{[^()]+\})\)$/
    const matches = datas.match(reg)
    if (matches) {
      jsonData = JSON.parse(matches[1])
    }
  }
  return jsonData
}
const data = jsonpToJson('jsonpgz({"fundcode":"005928","name":"创金合信新能源汽车股票C","jzrq":"2023-11-17","dwjz":"1.7250","gsz":"1.7222","gszzl":"-0.16","gztime":"2023-11-20 15:00"})')
console.log(data)

20230807 js使用toFixed处理四舍五入的问题

export function roundToFixed(value, decimalPlaces) {
  const factor = Math.pow(10, decimalPlaces);
  return (Math.round(value * factor) / factor).toFixed(decimalPlaces);
}

20220728 输入银行卡号时每四位自动加空格 

this.bankNo2 = this.bankNo.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');

20220719 js跳出满足条件时跳出循环

try{
  this.PopupList.forEach(item=>{
    if(!this.clickedPopupList.includes(item)){
      this.PopupData = item;
      throw new Error();
    }
  })
}catch(e){
  //TODO handle the exception
}

20220221 js获取时间差异刚刚

getDateDiff(dateTimeStamp){
	var minute = 1000 * 60;
	var hour = minute * 60;
	var day = hour * 24;
	var halfamonth = day * 15;
	var month = day * 30;
	var now = new Date().getTime();
	var diffValue = now - dateTimeStamp;
	if(diffValue < 0){return;}
	var monthC =diffValue/month;
	var weekC =diffValue/(7*day);
	var dayC =diffValue/day;
	var hourC =diffValue/hour;
	var minC =diffValue/minute;
	var result;
	if(monthC>=1){
		result="" + parseInt(monthC) + "月前";
	}
	else if(weekC>=1){
		result="" + parseInt(weekC) + "周前";
	}
	else if(dayC>=1){
		result=""+ parseInt(dayC) +"天前";
	}
	else if(hourC>=1){
		result=""+ parseInt(hourC) +"小时前";
	}
	else if(minC>=1){
		result=""+ parseInt(minC) +"分钟前";
	}else
	result="刚刚";
	return result;
},

20210910 h5跳转到微信公众号

location.href = 'https://mp.weixin.qq.com/mp/getmasssendmsg?__biz=Mzg5MDU5NzgxNA==#wechat_redirect'
location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NDI1NDUzNQ==#wechat_redirect'

20210825 js判断是否为微信环境

// 判断微信环境
getWeixin () {
  let user= navigator.userAgent.toLowerCase();
  if(user.match(/MicroMessenger/i)=="micromessenger") {
    this.isWeixin = true;
  }else {
    this.isWeixin = false;
  }
},

20210820 js控制页面滚动到最顶部

document.documentElement.scrollTop = 0;

20210820 js控制页面滚动到指定位置

document.getElementById('id').scrollIntoView();

20210602 在线vconsole调试

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
  new VConsole();
</script>

20210520 从身份证号中提取性别

    getSex(idCard) {
      var sexStr = '';
      if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        sexStr = '男';
      }
      else {
        sexStr = '女';
      }
      return sexStr;
    },

20210520 从身份证号中提取年龄

    getAge(identify) {
      var UUserCard = identify;
      if (UUserCard != null && UUserCard != '') {
        var myDate = new Date();
        var month = myDate.getMonth() + 1;
        var day = myDate.getDate();
        var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
          age++;
        }
        return age;
      }
    },

20210413 !!的用法 避免取不到值而报错

created() {
  this.redirectUrl = sessionStorage.getItem("redirectUrl");
  this.show = !!this.redirectUrl;
}

20210319 js获取指定前几天的日期

getBeforeDate(days){
  var now = new Date().getTime();
  var ago = now - 86400000*days;
  var agoDate = new Date(ago);
  var year = agoDate.getFullYear();
  var mon = agoDate.getMonth()+1;
  var day = agoDate.getDate();
  mon = mon<10?'0'+mon:mon;
  day = day<10?'0'+day:day;
  var date = year+''+mon+''+day;
  return date;
}
this.getBeforeDate(7)

20210136 XMLHttpRequest 请求

// 创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
// 连接服务器 发送post请求
xmlHttp.open("post","http://api.tushare.pro");
// 设置请求头的Content-Type
xmlHttp.setRequestHeader("Content-Type","application/json");
// 发送数据 传参
xmlHttp.send(JSON.stringify(param)) ;   // 请求体数据
// 回调函数 success
xmlHttp.onreadystatechange = function() {
  if(this.status===200){
    console.log(JSON.parse(this.responseText));
  }
};

20210120 js异步处理之callback

function getData(callback){
  setTimeout(() => {
    let name = 'xxx'
    callback(name)
  }, 3000);
}
getData((e)=>{
  console.log(e)
})

20201230 js如何获取绝对值

Math.abs(item.plLc);    // 用Math对象的abs方法

20201203 如何获取对象的属性名

let obj = {
  name: '张三',
  age: 18
}
console.log(Object.keys(obj))
console.log(Object.getOwnPropertyNames(obj))

20200907 js阻止事件冒泡

event.stopPropagation();
event.cancelBubble=true;    // 默认为false

20200728 js如何判断字符串类型的数字

不管用Number还是parseInt转化 不能结合typeof判断其类型 而是直接if

20200312 如何获取用的当前ip地址

http://ip-api.com/json
https://pv.sohu.com/cityjson?ie=utf-8

20200220 获取周和月 截止日期

// 获取周 截止日期
  if(type==='currentWeek'){
    var d2 = date;  // 当前日 date等于传入的标准时间
    d2.setDate(date.getDate()+6); // 结束日 标准时间
    let weekEnd = d2.getFullYear()+'-'+(d2.getMonth()+1 < 10 ? '0'+(d2.getMonth()+1) : d2.getMonth()+1)+'-'+(d2.getDate() < 10 ? '0'+(d2.getDate()) : d2.getDate());
    return [Y+"-"+M+"-"+D,weekEnd];
  }
// 获取月 截止日期
  if(type==='currentMonth'){
    var nowMonth = date.getMonth(); // 当前月
    var nowYear = date.getFullYear(); // 当前年
    var d3 = new Date(nowYear, nowMonth+1, 0);  // 本月的结束时间 标准时间
    var monthEnd = d3.getFullYear()+'-'+(d3.getMonth()+1 < 10 ? '0'+(d3.getMonth()+1) : d3.getMonth()+1)+'-'+(d3.getDate() < 10 ? '0'+(d3.getDate()) : d3.getDate());
    return [Y+"-"+M+"-"+D,monthEnd];
  }
// 参考资料 js获取当前月份 第一天和最后一天
    var now = new Date(); // 当前日期 
    var nowYear = now.getFullYear(); // 当前年 
    var nowMonth = now.getMonth(); // 当前月 
    var monthStartDate = new Date(nowYear, nowMonth, 1); // 本月的开始时间
    var monthEndDate = new Date(nowYear, nowMonth+1, 0); // 本月的结束时间
    var timeStar = Date.parse(monthStartDate)/1000; //s
    var timeEnd = Date.parse(monthEndDate)/1000; //s

20200119 联图网在线二维码生成接口

// 获取支付二维码
      getPayCode() {
        let para = {
          "MemberId": this.employeeId,
          "orderId": this.orderId,
          "payType": 7,
        };
        this.adminApi(para,'获取支付二维码').then((res) => {
          if(res.code===200){
            let imgDiv = document.getElementById('imgDiv');
            let img = document.createElement("img");
            img.src = 'http://qr.topscan.com/api.php?&text='+encodeURIComponent(res.data.code_url);
            img.style = "width: 60px;height: 60px;margin: 15px;"
            imgDiv.appendChild(img)
          }
        });
      },

20200109 forEach和map的区别

forEach只是单纯的遍历数组，而map遍历数组后返回新的数组。

20200109 map和filter的用法及区别

map函数之后，数组元素个数不变，但元素属性发生了变化。
filter函数之后，数组元素个数改变，但是元素属性不会改变。
说的通俗一点，就是map一般用来处理元素属性，filter一般用来筛选想要的元素。

20191231 批量修改数组中每个对象的属性值

arr = arr.map(function(item,index,arr) {
  item.age = 1;
  return item;
})

20190923 对象合并

Object.assign({name:111},{age:18})

 常见的数组合并 用concat拼接 用的比较多 但对象合并 相对来说适应场景比价少
个人使用场景：封装小程序request请求时 header中要传默认的token 但是有些接口又特殊需要传入一些参数

手机端点击输入框时禁止调起键盘

<input type="text" onfocus="this.blur()">
<input type="text" readonly="readonly" />

H5页面唤起本地摄像头

  <!--只可进行拍照-->
  <input type="file" accept="image/*" capture="camera">
  <!--只可进行拍摄视频-->
  <input type="file" accept="video/*" capture="camcorder">
  <!--可选取本地照片和拍照-->
  <input type="file" accept="image/*">
  <!--可选取本地视频和拍摄视频-->
  <input type="file" accept="video/*">

同步(sync)和异步(async)的区别

js是属于单线程的，也就是我们说的同步，但有时候需要异步

单线程：所有的任务由一个线程来完成  
多线程：多个任务可分配给不同的线程来完成

同步：在进程中任务未结束时需等待结束才能执行下一个任务 
异步：在进程中任务未结束但在等待的过程中可先去执行下一个任务

简单来说：同步就是排队来执行，异步就是同时去执行

ajax请求时async属性默认为true，也就是说默认就是异步的，要想改成同步进行，修改async属性改为false
js逻辑中有三种解决方案，第一是方法嵌套，第二是setTimeout控制执行时间，第三是es6新增的promise特性

input type="file"时修改其默认样式

<label style="position: relative">
  <button style="margin-right: 5px;">选择文件</button>
  <input type="file" @change="getFile2" style="position: absolute;left: 0;top: 0;opacity: 0;width: 70px">
  <a v-if="form.S_SlnPdfUri!==''" target="_blank" :href="form.S_SlnPdfUri">{{form.S_SlnPdfUri}}</a>
  <span v-if="form.S_SlnPdfUri===''" style="color: gray">未选择任何文件</span>
</label>

h5如何动态设置meta标签的描述内容

<meta property="fb:app_id" name="description">    // 设置标签
var metaList = document.getElementsByTagName("meta");    // 拿到标签
for (var i = 0; i < metaList.length; i++) {
  if (metaList[i].getAttribute("property") == "fb:app_id") {
    metaList[i].content = '这是一段描述';    // 设置描述
  }
}

h5内嵌在app时，做微信分享，动态传递分享标题和图片路径给ios

// 前端在页面中动态绑定文字内容并将其隐藏掉
<div v-show="false" id="SeoDescription">{{obj.SeoDescription}}</div>
<div v-show="false" id="PhotoURL">{{obj.PhotoURL}}</div>

// ios那边通过id去获取相应的值 标题和路径
NSString *htmlTitle = @"document.title";
NSString *htmlNum = @"document.getElementById('PhotoURL').innerText";

js判断网页是否是在微信浏览器中打开

function isWeiXin(){
  var ua = window.navigator.userAgent.toLowerCase();    // 该属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息
  //通过正则表达式匹配ua中是否含有MicroMessenger字符串
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
    return true;
  }else{
    return false;
  }
}

js判断当前浏览器是否是在移动端

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  // console.log('移动端');
  this.isPc=false;
} else {
  // console.log('pc端');
  this.isPc=true;
}

js做消息通知声音提示

$('audio').remove();
let audioElementHovertree = document.createElement('audio');
audioElementHovertree.setAttribute('src', 'http://w.qq.com/audio/classic.mp3');
audioElementHovertree.setAttribute('autoplay','autoplay'); //打开自动播放

input type="number"时如何限制输入长度

<input type="number" oninput="if(value.length>11)value=value.slice(0,11)">

es6中promise的使用

new Promise(function(resolve, reject){
  // 先执行
  resolve();
}).then(function (data) {
  // 再执行
});

js开启和禁止页面滑动

// 定义方法
bodyScroll(event){
  event.preventDefault();
},
// 禁止滑动
document.body.addEventListener('touchmove',this.bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
// 开启滑动
document.body.removeEventListener('touchmove',this.bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});

js复制输入框和非输入框的内容

// 复制输入框的内容
<input id="input" type="text">
document.getElementById("input").select(); // 选择对象
document.execCommand("copy"); // 执行浏览器复制命令

// 复制非输入框中的内容
let target = document.createElement('input'); //创建input节点
target.value = this.h5Url; // 给input的value赋值
target.style.zIndex = '-111111';
target.style.position = 'fixed';
document.body.appendChild(target); // 向页面插入input节点
target.select(); // 选中input
document.execCommand('Copy'); // 执行浏览器复制命令

// 以上方法在pc端没有任何问题 但在移动端 发现并未复制成功 存在一定的缺陷 故采用下面引入clipboard插件的方法
1. cnpm install clipboard --save  // 安装clipboard
2. import ClipboardJS from 'clipboard';  // 在需要的单个页面引入
3. <div>邀请码{{code}</div>
   <div class="copy_btn" :data-clipboard-text="code" @click="copy">复制</div>
4. copy() {
     const clipboard = new ClipboardJS('.copy_btn');
     clipboard.on('success', function(e) {
       e.clearSelection();
        alert('复制成功')
       });
       clipboard.on('error', function(e) {
        alert('复制失败');
      });
    },

js获取url后面多个参数的方法

// 网上搜索到的最常见的方法 此方法存在的缺陷 当url中有#(vue-cli项目)或者是微信QQ分享出来的链接会自动拼接参数(?from=)等都会影响location.search的正确获取
getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}
// ios
朋友圈 from=timeline&isappinstalled=0(或者appinstall=0)
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
// android
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage

// 刚开始对于#的处理采用的是定位?下标位置手动截取search的方式，后来有了?from=，采用的是定位?参数下标的位置手动截取search
// 接下来面临的第三个问题，app分享时并未安顺序给你拼接参数，也就是你这边截取的第一个参数它可能放在了其他位置，所以，采用的解决方案是 忽略# 忽略分享出来的& 将所有的?from=给替换掉 然后根据?下标去截取search
getQueryString(name) {
  var url = location.href.replace('?from=','');  // 只要替换掉?开头的即可 &不影响search的截取
  var search = url.substr(url.indexOf('?'));  // 根据?的位置 截取search
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

js进行图片压缩 

      // 图片压缩
      canvasDataURL(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
          var that = this;
          // 默认按比例压缩
          var w = that.width,
            h = that.height,
            scale = w / h;
          w = obj.width || w;
          h = obj.height || (w / scale);
          var quality = 0.7;  // 默认图片质量为0.7
          //生成canvas
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          // 创建属性节点
          var anw = document.createAttribute("width");
          anw.nodeValue = w;
          var anh = document.createAttribute("height");
          anh.nodeValue = h;
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          ctx.drawImage(that, 0, 0, w, h);
          // 图像质量
          if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
          }
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality);
          // 回调函数返回base64的值
          callback(base64);
        }
      },
      // 拍照
      makePhoto(e){
        var file = document.getElementById('photo').files[0];
        if (window.FileReader) {  //如果浏览器支持FileReader
          var reader = new FileReader();  //新建一个FileReader对象
          reader.readAsDataURL(file); //读取文件url
          let self = this;
          reader.onloadend = function (e) {
            // self.cardOrc(e.target.result.replace("data:image/jpeg;base64,",""));
            // console.log(e.target.result)
            self.canvasDataURL(e.target.result,{
              quality: 0.1
            },function (base64) {
              // console.log(base64)
              self.cardOrc(base64.replace("data:image/jpeg;base64,",""));
            });
          };
        }
        file = null;
      },

js解决ios11系统下input光标错位的问题

原因分析：iOS11对fixed不兼容导致的，外面的遮罩层引用了fixed定位，输入框弹出页面被顶上去了但是输入框光标还停留在原来的位置。
解决办法：网上看了一大堆，总结了一种最简单的方法，外面弹框改为absolute定位，弹框打开时将整个容器高度改为页面高度禁止其滚动，弹框关闭时又给还原回来。 

open(){
  this.isPopup = true;
  document.getElementById('vote').style.height = '100vh'
  document.getElementById('vote').style.overflow = 'hidden'
},
close(){
  this.isPopup = false;
  document.getElementById('vote').style.height = 'auto'
}

js兼容部分ios手机input失焦后页面上移问题

    (function() {
      let myFunction;
      let isWXAndIos = isWeiXinAndIos();
      if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
        document.body.addEventListener('focusin', () => { // 软键盘弹起事件
          clearTimeout(myFunction)
        });
        document.body.addEventListener('focusout', () => { // 软键盘关闭事件
          clearTimeout(myFunction);
          myFunction = setTimeout(function() {
            window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点  =======当键盘收起的时候让页面回到原始位置
          }, 200)
        })
      }
    })();
    function isWeiXinAndIos() {
      // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      let ua = '' + window.navigator.userAgent.toLowerCase();
      // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
      let isWeixin = /MicroMessenger/i.test(ua); // 是在微信浏览器
      let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua); // 是IOS系统
      return isWeixin && isIos
    }