2020、2021、2022年常用总结

一、常用的js函数总结

(1)判断一个对象是否为空对象Object.keys()

let a = {} ;
如果为空对象，那么Object.keys(a).length 的值 0;
所以判断是否为空直接判断Object.keys(a).length == 0

(2)判断一个元素是否在数组中
indexOf()、includes()

//indexOf()方法返回给定元素能找到数组中找到的第一个索引值，找不到则返回-1
let arr = ['1','2','3','4']
arr.indexOf('3'); //打印的结果是2
arr.indexOf('5');//打印的结果是-1
//includes()方法的,存在则为true，不存在则为false
arr.includes(1) //true
arr.includes(5) //false

(3)字符串和数组相互转化

//字符串转化为数组 split()韩式
let str= "1,2,3,4,5";
let array = str.split(",");
//数组转化为字符串join()
let arr = ['1','2','3','4','5'];
let str2 = arr.join(',');

(4)截取字符串函数slice(),substring()

str.substring(0,i); //取字符串的前i个字符
str.subString(i); //截取i前面的字符

(5)截取数组，并返回截取后的数组

let  list = ['1','2','3','4','5','6','7'];
let index = list.indexOf('4');//返回4在数组中的下标
list.splice(index, 1);//返回截取后的数组，结果是['1','2','3','5','6','7']

(6)shift、push、unshift、pop、splice、sort、reverse操作数组的用法：

var arr = ['a','b','c','d','e','f','g','h']
1、shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
let item = arr.shift();
//item的值是a，arr数组的长度发生改变，此时已变为['b','c','d','e','f','g','h']
2、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
let length =  arr.unshift('1','2');
//length的值是10,arr数组已变为['1','2','a','b','c','d','e','f','g','h']
3、push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
let len = arr.push('1','2','3');
//len的值是11，arr数组已变为['a','b','c','d','e','f','g','h','1','2','3'];
4、pop() 方法用于删除数组的最后一个元素并返回删除的元素。
let ele = arr.pop();
//ele的值是h,arr数组长度发生了改变，次数已经变为['a','b','c','d','e','f','g']
5、sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序，参数看下图：。
let arr1 = [100,120,1,2,0];
let arr2 = ['a','s','b','e','c'];
//数字升序
arr1.sort(function(a,b){return a-b});//arr1已变为0,1,2,100,120
//数字降序
arr1.sort(function(a,b){return b-a});//arr1已变为120,100,2,1,0
//字母升序
arr2.sort()//arr2输入a,b,c,e,s
//字母降序,先对数组进行升序排列，在反转数组
arr2.sort();
arr2.reverse();//arr2输出s,e,c,b,a;
6、reverse() 方法用于颠倒数组中元素的顺序。
arr.reverse();
//arr的值变为['h','g','f','e','d','c','b','a']
7、splice() 方法用于添加或删除数组中的元素。
let arr3 = arr.splice(2,3);
//arr3输出的值是['c','d','e'],arr的值是['a','b','f','g','h'];

（7）替换url链接中某个参数值

/**
 * 替换url的指定参数
 * @param {*} url 需要替换的url
 * @param {*} name 参数名称
 * @param {*} value 替换的值
 */
 function replaceQueryString (url, name, value) {
  const re = new RegExp(name + '=[^&]*', 'gi')
  return url.replace(re, name + '=' + value)
}

（8）js根据身份证号获取年龄、性别、出生年月

//获取出生年月
function getBirth(idCard){
    let  birthday = "";
    if(idCard){  
        birthday = idCard.slice(6,14);
        birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
    }   
    return birthday;
}
//获取性别
function getSex(idCard){
    let sex = '';
    if(idCard){
        if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
            sex = '男';
        }
        else {
            sex = '女';
        }
   }
   return sex;
}
//获取年龄
function getAge(idCard){
    let age = '';
    if(idCard){
        let currTime = new Date()
        let month = currTime.getMonth() + 1
        let day = currTime.getDate()
        age = currTime.getFullYear() - idCard.slice(6, 10) - 1;
        if (idCard.slice(10, 12) < month || idCard.slice(10, 12) === month && idCard.slice(12, 14) <= day) {
            age++
        }
        if (age <= 0) {
            age = 1
        }
    }
     return age;
}

(9)、hasOwnProperty函数用法

//hasOwnProperty这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。
let obj = {
		id:'123',
  		name:'张三',
  		people:{
  		   userId:'123456'
  		}
	}
	console.log(obj.hasOwnProperty('id')); //true
	console.log(obj.hasOwnProperty('userId'));//false

(10)、将元素滚动到顶部、底部

//滚动到顶部
 document.getById('#id').scrollIntoView({ behavior: "smooth", block: "start" });
 //滚动到底部
 document.getById('#id').scrollIntoView({ behavior: "smooth", block: "end" });

(11)、检测手机主题的明暗

//检测是不是暗色主题
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

(12)、生成随机的颜色

let randomColor = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

(13)、Array.from()
将一个类数组或者对象或者可遍历的对象转化为一个真正的数组。
接收的参数必须具备以下条件：
必须具有length属性，用于指定数组的长度，该参数的属性名必须为数值型或者字符串类型的数字。
使用：

//参数是字符串
let str = "qwertyu";
console.log(Array.from(str));
//['q','w','e','r','t','y','u'];
//参数是真的的数组，返回一个相同的数组
let arr = [1,2,3,4,5,6,7]; 
console.log(Array.from(arr));
//[1,2,3,4,5,6,7]

Array.from()还可以接收第二个参数，用于对每个元素进行处理

let arr = [1,2,3,4,5];
console.log(Array.from(arr,item=> item+1));
// [2, 3, 4, 5, 6]

(14)匹配空格正则

let str = 'a   b c '
 str.match(/\S+/g);
 //去除空格
 str.replace(/\S+/g,'');

(15) reduce()函数

reduce()是js数组对象上的一个高阶函数，可以用来迭代数组中的所有元素，并返回一个单一的值。
使用语法：array.reduce(callback, initialValue)
其中callback是一个回调函数,它接收四个参数：累加器(初始值或者上一次回调函数的返回值)、当前元素、当前索引、操作数组的本身。initialValue 是一个可选的初始值，如果提供了该值，则作为累加器的初始值，否则累加器的初始值为数组的第一个元素

用法示例：
计算数组的和

let arr = [0,1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr);

扁平化处理多维数组

let arr = [[1, 2], [3, 4], [5, 6]];
let arr1 = arr.reduce((acc, curr) => acc.concat(curr), []);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

(16) flat()函数
ES6新增的flat()函数可以用于处理扁平化处理多维数组，并返回新数组的能力。由于这个函数产生了一个全新的数组，所以不会改变原数组，flat() 函数返回的新数组将删除原始数组中存在的所有空值。
flat()函数仅采用一个参数，该参数可选，唯一的参数就是depth参数,如果原始数组包含一个或者多个嵌套数组结构，则此参数决定将多少数组层处理为单层，此参数默认值是1，可设置正深度、负深度（-Infinity）、无限深度（Infinity）、零深度（0）
例如：

//正深度
var arr1 = [1,2[3,4],[5,6],[[7,8]]];
var result1 = arr1.flat(1);
// result1: [1,2,3,4,5,6,[7,8]]
//无限深度
//如果在不知道数组有多少层的情况下，推荐使用
var arr2 = [[[1,2]],[[[[3,4],[]]]]]
var result2 = arr2.flat(Infinity);
//result2:[1,2,3,4]

二、vue常用总结
(1)、this.$set(obj,key,value)的用法

let vote = {}
this.$set( vote , 'name','小明');

这个主要用于我今天遇到的一个bug,在编辑时，我给一个输入框赋值了，但是在修改输入框的值时候，输入删除都没反应，当我点击了别的输入框就改变了，查找原因发现我打印的这一个属性没有set和get函数，所以不能进行双向绑定，用set赋值就完美的解决了。
(2)、使用input标签上传文件，触发input的点击事件
需要使用dispatchEvent()方法(dispatchEvent()方法可以用来广播事件)：
语法如下所示：
dispatchEvent(eventObj)，eventObj参数是一个描述事件的ActionScript对象。
广播事件的引用事件一般如下三种：
click事件、change事件、scroll事件
下面触发上传文件的代码如下所示：

 <div class="upload">
        <input type="file" ref="file" />
        <img src="../imgs/uoload@2x.png" alt="" class="photo-img" @click="triggerClick">
  </div>
  //triggerClick函数
   triggerClick(){
        this.$refs.file.dispatchEvent(new MouseEvent('click'))
     }

(3)在main.js里面设置公共的请求头，一般用于设置公共的图片地址的前缀

//1、可以直接定义一个baseUrl挂载到vue实例上面
const baseUrl = 'https://api.888time.cn/';
Vue.prototype.$baseUrl = baseUrl;//挂载到Vue实例上面
//2、可以引入其他页面的定义的公共地址
import baseUrl from './api/config.js'//引用文件
Vue.prototype.$baseUrl = baseUrl.baseUrl//挂载到Vue实例上面
//此时的baseUrl是定义在config.js里面的。例如：
const baseUrl = 'https://api.888time.cn/';
module.exports = {
	baseUrl: baseUrl,
}

(4)实现手写电子签名功能，使用组件vue-esign
使用方法主要查看官网：

vue-esign官网
(5)ios中时间显示NAN问题解决方案
ios直接使用Date()方法获得到的时间再苹果系统上显示NaN，安卓手机则是正常显示
原因是 Date() 内时间格式问题
解决方法是将时间中的’ -’ 字符替成 ‘/’ 字符 ,然后再对时间进行格式化展示

var vTime = "2019-01-01 00:00:00".replace(/\-/g, '/');
var vTime1 = new Date(vTime);

(6)watch监听器的使用

//监听data中的某个字符串：keyWord
 watch: {
    keyWord: function (val) {
      console.log(val);
    },
  },
  //监听data中某个对象的某个属性值的变化：query:{ keyWord:'' }
   watch:{
    "query.keyWord":{
      handler(val){
        if(!val){
           console.log(val)
        }
      }
    }
  }

(7)路由的方式新建一个导航栏打开新页面

 const { href } = this.$router.resolve({
     path: "路由地址",
     query: {},
  });
  window.open(href, '_blank');

（8）拨打电话

    //在index.html中加入
   <meta name="format-detection" content="telephone=yes" />
   在js文件中
   call () {
    		window.location.href = `tel:${Phone}`;
 		 	  // 或者：
			const a = document.createElement("a");
			a.href = `tel:${Phone}`;
			a.click();
   }
  
  

（9）列表自动滚动插件
vue-seamless-scroll
vue2版本的插件：git地址
支持Vue3的插件：git地址
（10）监听生命周期函数
父组件需要监听子组件的声明周期函数，进而触发某些操作时可以使用此方法； @hook

 <div>
     <!-- 可以监听created,mounted ...都可以 -->
   <Child @hook:mounted="doSomething"/>
 </div>

(11)vue-cropper 图片裁剪插件

具体使用查看官网：https://www.npmjs.com/package/vue-cropper

(12)移动端抽奖组件 NutUI-Bingo

官网地址：https://nutui.jd.com/bingo/?from=thosefree.com#/