常用前端相关知识

1.字符串.replace(正则, function(v,i,str){ return 'xxx' })        //xxx为替换掉匹配到的内容

    'myTestJob'.replace(/[A-Z]/g, (v,i,str) => `_${v.toLowerCase()}`)        //v为匹配到的值，i是下标，str是'myTestJob'这个字符串

    输出结果为 'my_test_job'

2.如何用异步post请求 文件流数据，并触发浏览器的下载功能

    //以下例子是在vue中的写法

    downloadFile(url, params, fileName) {        //下载文件
      this.$http.post(url, params, {'responseType': 'blob'}).then(res => {
        const blob = new Blob([res.data], {type: res.headers['content-type']});
        const a = document.createElement('a');
        if ('download' in a) {                    // 非IE下载
          a.style.display = 'none';
          a.download = fileName;
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(a.href);            //不释放的话会一直占用资源
          document.body.removeChild(a);
        }else{                                    // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      })
    }

注意：html5中a标签新增了download属性，用于重命名下载文件，不指定则使用默认文件名；但当a标签用于下载文件流的时候，必须指定download，否则无法触发浏览器的下载模块。

3.canvas内容实现水平翻转(垂直翻转同理)

    1) 先ctx.scale(width缩放倍数,height缩放倍数)进行水平翻转
        ctx.scale(-1, 1)

    2) 再ctx.translate(x坐标移动距离, y坐标移动距离)把翻转后的结果移回画布
        ctx.translate(100, 0)    //假设画布宽为100px

4.前端计算文件md5最快最准的插件使用（其他插件在计算大文件会算错）

    import BMF from 'browser-md5-file';        //该插件是在js-spark-md5插件的基础上进行封装的
     
    const el = document.getElementById('upload');
    const bmf = new BMF();
     
    el.addEventListener('change', handle, false);
     
    function handle(e) {
      const file = e.target.files[0];
      bmf.md5(file, (err, md5) => {
          console.log('md5 string:', md5);
        }, progress => {                    //计算的进度值
          console.log('progress number:', progress);
          bmf.abort();                        //中止md5计算
        },
      );
    }

5.--save-dev 和 --save的区别

    --save会写入package.json的dependencies下；    //指定 生产环境 下需要安装的依赖
    当npm install --production 或 当NODE_ENV变量值 为production时，会将dependencies的依赖下载到node_modules中

    --save-dev会写入package.json的devDependencies下；    //指定 非生产环境 下需要安装的依赖
    当npm install 或 当NODE_ENV变量值 不为production时，会将devDependencies的依赖下载到node_modules中

6.替代eval的方法

    function myEvil(str) {    //str指表达式字符串
        var Fn = Function;  //一个变量指向Function，防止有些前端编译工具报错
        return new Fn('return ' + str)();
    }

    注意：str中如果涉及外部变量，会变成undefined

7.字符串插入值，比如千分位

    '12312312'.replace(/\d{1,3}(?=(\d{3})+$)/g, "$&,")        //输出结果为"12,312,312"

    注意：$&表示匹配到的部分

8.正则匹配括号：/[(]/

9.初始化数组的值

    new Array(num).fill(val, startIdx, endIdx);        //含头不含尾

  例子：
    new Array(5).fill(10);            //结果为[10, 10, 10, 10, 10]
    new Array(5).fill(10, 0, 2);    //结果为[10, 10, undefined, undefined, undefined]

10.将某个html内容块转为图片 - 插件 html2canvas

    <div id="result">1234</div>
    <div id="resultImg"></div>

    html2canvas(document.getElementById('result')).then(function (canvas) {
      var newImg = new Image();
      newImg.width = window.innerWidth;
      newImg.height = window.innerHeight;
      newImg.src = canvas.toDataURL("image/jpeg");    //生成的jpeg图片为base64数据(比png小很多)
      newImg.onload = function(){
        document.getElementById('resultImg').appendChild(newImg);
      }
    })

11.flex布局常用写法

    display: flex;

    /* flex-direction 决定主轴的方向 row(默认)|row-reverse|column|column-reverse*/
    /* flex-direction: row; */

    /* flex-wrap决定当排列不下时是否换行以及换行的方式,nowrap(默认)|wrap|wrap-reverse */
    /* flex-wrap:wrap; */

    /* flex-flow是lex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行 */
    flex-flow:row wrap;

    /* !当主轴沿水平方向时!justify-content,决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around */
    justify-content:center;

    /* !主轴水平时!决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch */
    align-items:center;

12.input上传文件反应很慢 问题解决

  问题描述：
      input标签上传文件，当选中文件后，会卡顿2-3秒才触发onchange事件（vue里会，原生的写法不会），同时上传的文件越多，卡顿越久，且无法监听到在选中文件之后触发loading

  解决办法：
      1) 在input标签上监听click事件，当点击"浏览"时弹出loading
    2) 在loading标签上监听mousemove事件，触发时隐藏loading，用于点击"取消"选择文件
    3) 在input标签上监听change事件，触发时隐藏loading

13.数组的every()和some()

  用法：
      arr.every((v) => { return 布尔值 });  //每一个元素经回调方法处理后都返回true该方法才返回true,否则返回false
    arr.some((v) => { return 布尔值 });     //只要有一个元素经回调方法处理返回true该方法就返回true,否则返回false

14.H5获取经纬度方法(参考:https://www.cnblogs.com/God-is-with-me/articles/10294027.html)

  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(success, error, option);
  }
  
  success为成功的回调:
      success(res){ console.log(res.coords.latitude, res.coords.longitude) }

  error为失败的回调:
      error(err){ console.log(err) }

  option为配置对象:
      {
        enableHighAccuracy: true,    //是否使用高精度
        timeout: 3000,                //设置超时时间，单位ms
    }

15.谷歌地图vue插件vue2-google-maps(https://www.npmjs.com/package/vue2-google-maps)

    谷歌官方api文档：https://developers.google.com/maps/documentation/javascript/tutorial

    1) 在main.js引入：

        import * as VueGoogleMaps from 'vue2-google-maps';
        Vue.use(VueGoogleMaps, {
          load: {
            key: 'AIzaSyAd1qk6XSs2u-Ea5Muc1hCf-ibL2mXOZKw',   //需要一个结算账户才可正常使用
            libraries: 'places',
            language: 'cn',                                      //语言码根据国际标准即可
          }
        });
    
    2) vue页面中：

      html部分：
        <GmapMap class="deviceMap" ref="gMap" :center="centerInfo" :zoom="zoom" :options="{
          zoomControl: false,          //放大、缩小
          mapTypeControl: false,       //卫星地图
          scaleControl: false,         //距离尺
          streetViewControl: false,    //街景视图
          rotateControl: false,        //旋转立体地图
          fullscreenControl: false,    //全屏
          //disableDefaultUi: false
        }">
          <GmapMarker @click="fillAddress" :visible="true" :position="centerInfo" :icon="{url: markUrl, scaledSize: {width: 20, height: 20}}" :animation="1"/>
          <!-- animation 1：循环跳动 2：水滴落下 -->
        </GmapMap>

      js部分：
        import { gmapApi } from 'vue2-google-maps';
        computed: {
          google: gmapApi
        },
        mounted: {
          this.$refs.gMap.$mapPromise.then((map) => {
            this.gMap = map;                                    //渲染完获取地图对象
            this.geocoder = new this.google.maps.Geocoder();    //实例化Geocoder对象，用于定位功能
          })
        },
        methods: {
          reset(){
            this.gMap.setCenter({lat: xx, lng: xx});    //动态设置中心点
            this.gMap.setZoom(12);                        //动态设置地图缩放倍数
          },
          search(){            
            this.geocoder.geocode({address: 'xxx'}, (results, status) => {    //搜地址返回经纬度
              if (status === 'OK') {
                this.centerInfo = {
                  lng: results[results.length - 1].geometry.location.lng(),
                  lat: results[results.length - 1].geometry.location.lat()
                }
              }
            });
            this.geocoder.geocode({location: {lat: x, lng: x}}, (results, status) => {    //根据经纬度返回地址
              if (status === 'OK') {
                this.searchAddr = results[results.length - 1].formatted_address;
              }
            });
          }
        }

16.ios的兼容问题

  onkeyup事件在有些ios手机上不生效，一般要用oninput事件（支持ie8以上）或onpropertychange事件（支持ie8及以下）来实时监听用户输入

17.计算某元素到页面顶部的距离

  function getToTop(){
      const elem = document.getElementById('elem');
      let top = 0;
      while(elem = elem.offsetParent){
        top += elem.offsetTop;
      }
      return top;
  }

18.二维码生成插件qrcodejs2 (直接用npm安装)

  <div id="twoCode"></div>

  import QRCode from 'qrcodejs2';

  components: { QRCode },

  makeCode() {
    document.getElementById('twoCode').innerHTML = '';    //清除上一次的二维码
    new QRCode('twoCode', {  
          width: 180,        // 二维码宽度 
          height: 180,        // 二维码高度
          text: codeUrl,    //转二维码的url
    });
  }

19.堆排序

    原理：https://blog.csdn.net/u010452388/article/details/81283998

    const target = [6,30,1,9,2,8,5,7,4,10,20,5,14,13,88,-1];

    function stackSort(arr, n){                                //大根堆(结果为升序)
        if(arr.length && n < arr.length - 1){        //限制组成堆的最小节点数(本例中限制最小为2)
            let stackNum = arr.length - n;                //每次组成堆的所有节点数
            let last = parseInt(stackNum/2 - 1);    //从最后一个节点(除叶子节点)开始往根方向做对比，把本次堆的最大值冒出到根节点
            for(let i=last; i>=0; i--){
                let parentIdx = (i-1)/2;
                let leftIdx = 2*i + 1;
                let rightIdx = 2*i + 2;
                if(leftIdx < stackNum && arr[i] < arr[leftIdx]){        //(1)跟左子节点比较
                    arr[leftIdx] = [arr[i], arr[i] = arr[leftIdx]][0];
                }
                if(rightIdx < stackNum && arr[i] < arr[rightIdx]){        //(2)跟右子节点比较
                    arr[rightIdx] = [arr[i], arr[i] = arr[rightIdx]][0];
                }
                if(parentIdx >= 0 && arr[parentIdx] < arr[i]){        //(3)跟父节点比较
                    arr[parentIdx] = [arr[i], arr[i] = arr[parentIdx]][0];
                }
            }
            arr[0] = [arr[stackNum - 1], arr[stackNum - 1] = arr[0]][0];
            stackSort(arr, n+1);
        }
    }
    stackSort(target, 0);            //结果为[-1, 1, 2, 4, 5, 5, 6, 7, 8, 9, 10, 13, 14, 20, 30, 88]

    注意：小根堆 则把(1)(2)(3)中第2个条件的 < 改为 > 即可(结果为降序)

20.将字符串false转为布尔值false

    JSON.parse('false')        //false

21.css中隐藏的几种方式和区别

    display: none;                //脱落文档流，不占位置
    visibility: hidden;        //隐藏，占位置(元素自身的事件不可触发，如：input框中的内容 不可选中)
    opacity: 0;                        //隐藏，占位置(元素自身的事件可触发，如：input框中的内容 可选中，$('#input').select())

22.类型对比

    1）实例化结果对比的是值、或者内存地址，且有些值的对比会进行隐式转换；

        例如：let a = new Array(); let b = new Array(); a === b;   // false

    2）实例化结果的constructor指向其构造函数

        例如：let a = new Array();  a.constructor === Array;     // true

    3）构造函数的对比其实就是类型直接对比（构造函数也可看成类型）

        例如：Array === Object;         // false

    4）任何构造函数本身的constructor都指向Function

        例如：Array.constructor === Function;     // true

                  Object.constructor === Function;     // true

本文地址：https://blog.csdn.net/s18813688772/article/details/107463192

如对本文有疑问， 点击进行留言回复！！