项目常用到的代码片段

• 生成随机数

getRandom (x) {
     let val = '';
     if (x <= 10) {
       val = Math.random().toString().slice(2, x + 2)
     } else {
       let mul = Math.floor(x / 10)
       let surplur = x - 10 * mul
       for (let i = 0; i < mul; i++) {
         val += Math.random().toString().slice(2, 12)
       }
       surplur && (val = val + Math.random().toString().slice(2, surplur + 2))
     }
     return val
 }
getRandom(5)       //48668
getRandom(10)      //0562732990
getRandom(15)      //704678389507757
getRandom(20)      //33237146706223721325

• 声明和初始化数组

const array = Array(5).fill('')
array   //['','','','','']

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0))
matrix  
//[Array(5),Array(5),Array(5),Array(5),Array(5)]
//0:[0,0,0,0,0]
//1:[0,0,0,0,0]
//2:[0,0,0,0,0]
//3:[0,0,0,0,0]
//4:[0,0,0,0,0]

• 找出总和、最小值、最大值

const array = [5,4,7,8,9,2]
array.reduce((a,b)=>a+b)        //35
array.reduce((a,b)=>a>b?a:b)    //9
array.reduce((a,b)=>a<b?a:b)    //2

• 对字符串、数字或对象数组进行排序

--排序字符串数组
const stringArr = ['Joe','Kapil','Steve','Musk']
stringArr.sort()   //["Joe", "Kapil", "Musk", "Steve"]
stringArr.reverse()  //["Steve", "Musk", "Kapil", "Joe"]

--排序数字数组
const array = [40,100,1,5,25,10]
array.sort((a,b)=>a-b)    //[1, 5, 10, 25, 40, 100]
array.sort((a,b)=>b-a)    //[100, 40, 25, 10, 5, 1]

--对象数组排序
const objectArr = [
	{first_name:'Lazslo',last_name:'Jamf'},
	{first_name:'Pig',last_name:'Bodine'},
	{first_name:'Pirate',last_name:'Prentice'},
]
objectArr
//[{...},{...},{...}]
0:{first_name:'Pig',last_name:'Bodine'}
1:{first_name:'Lazslo',last_name:'Jamf'}
2:{first_name:'Pirate',last_name:'Prentice'}

• 从数组中过滤出虚假值

const array = [3,0,6,7,'',false]
array.filter(Boolean)   //[3,6,7]

• 使用逻辑运算符代替if…else嵌套

function doSomething(arg1){
	arg1 = arg1 || 10
	return arg1
}
let foo = 10
foo === 10 && doSomething()     //10
foo === 5 || doSomething()      //10
foo === 10 || doSomething()     //true

• 三元运算符

function Fever(temp){
	return temp > 97 ? 'Visit Doctor!' : temp < 97 ? 'Go Out and Play!!' : temp === 97 ? 'Take  Some Rest!'
}
Fever(97)   //'Take some Rest!'
Fever(100)  //'Visit Doctor!'

• 创建计数器对象或映射

let string = 'kkkapiliekty'
const table = {}
for(let char of string){
	table[char] = table[char] + 1 || 1 
}
table     //{a: 1,e: 1,i: 2,k: 4,l: 1,p: 1,t: 1,y: 1}

• 使用解构简单交换两值

let a = 5
let b = 8
[a,b] = [b,a]
[a,b]   //[8,5]

• 将数组扁平化并去除其中重复数值返回新数组,并计算出剩余全部数据总值

function(arr){
	let newArr,total;
	newArr= Array.from(new Set(arr.join().split(','))).map(x=>Number(x))
	total = newArr.reduce((a,b)=> a + b )
	return {arr,total}
}

• Vue中的v-html如何识别\n换行符

<span v-html="value.replace(/\n/gm, '<br>')" /><br>

• 网站跳转其他网站时显示403，解决方法：在index.html上加上

<meta name=referrer content=no-referrer>

• 按照一个汉字两个字符计算字符串的长度

export function strlen(is, str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
      var c = str.charCodeAt(i);
      //单字节加1
      if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
        len++;
      } else {
        len += 2;
      }
    }
    return len;
}

• element中日期选择器禁止选择今天此刻之前的时间

<template>
	 <el-date-picker
	     :disabled="isDetail"
	     v-model="time"
	     type="datetimerange"
	     :picker-options="pickerOptions"
	     start-placeholder="开始时间"
	     range-separator="至"
	     end-placeholder="结束时间"
	     value-format="yyyy-MM-dd HH:mm:ss"
	   >
	</el-date-picker>
</template>
<script>
export default{
	data(){
		return{
			 pickerOptions: {
		        disabledDate(time) {
		          return time.getTime() < Date.now() - 8.64e7; // 如果没有后面的-8.64e6就是不可以选择今天的
		          //  return time.getTime() < moment().format('x')
		        },
	        	selectableRange: "00:00:00 - 23:59:59"
	      	},
		}
	},
	watch:{
		time(){
			this.selectable()
		}
	},
	methods:{
		selectable(){
			const data = moment(this.time).startOf('day').format('x')
			const nowDate = moment().startOf('day').format('x')
			if(date<=nowDate){
				//如果选的是今天 则需要禁用已经过去的时间节点
				this.pickerOptions.selectableRange = `${moment().format('HH:mm:ss')} - 23:59:59`
			}else{
				//如果是以后的日期，则不需要禁用时间节点
				this.selectableRange.selectableRange = "00:00:00 - 23:59:59"
			}
		}
		
	}
}
</script>

• element中日期选择器禁止选择今天此刻之后的时间

<template>
	 <el-date-picker
	     :disabled="isDetail"
	     v-model="time"
	     type="datetimerange"
	     :picker-options="pickerOptions"
	     start-placeholder="开始时间"
	     range-separator="至"
	     end-placeholder="结束时间"
	     value-format="yyyy-MM-dd HH:mm:ss"
	   >
	</el-date-picker>
</template>
<script>
export default{
	data(){
		return{
			 pickerOptions: {
		        disabledDate(time) {
		          return time.getTime() > Date.now() ; 
		        },
	        	selectableRange: "00:00:00 - 23:59:59"
	      	},
		}
	},
	watch:{
		time(){
			this.selectable()
		}
	},
	methods:{
		selectable(){
			const data = moment(this.time).startOf('day').format('x')
			const nowDate = moment().startOf('day').format('x')
			if(date>nowDate){
				//如果选的是今天 则需要禁用此刻以后的时间节点
				this.pickerOptions.selectableRange = `00:00:00 - ${moment().format('HH:mm:ss')}`
			}else{
				//如果是之前的日期，则不需要禁用时间节点
				this.selectableRange.selectableRange = "00:00:00 - 23:59:59"
			}
		}
		
	}
}
</script>

• 借助element上传Excel文件并读取文件内容

<template>
 <el-upload
     :disabled="isDetail"
      action=""
      :show-file-list="false"
      :http-request="uploadRequest"
      style="display: inline-block;"
 >
      <el-button :disabled="isDetail" type="primary" class="import-file"
        ><i class="el-icon-plus"></i>上传附件</el-button
      >
</el-upload>
</template>
<script>
import XLSX from "xlsx";
export default{
	methods:{
		uploadRequest(file){
			const extension = file.file.name.substring(file.file.name.lastIndexOf('.') + 1)
			//判断上传的文件是Excel文件，禁止上传其他类型的文件
			if(extension !== 'xls' && extension !== 'xlsx'){
				this.$message.warning('只能上传Excel文件')				
			}
			//下面步骤读取文件内容，借助XLSX
			const fileReader = new FileReader()
			fileReader.readAsBinaryString(file.file)
			fileReader.onload = ev => {
				try{
					const data = ev.target.result
					const workbook = XLSX.read(data,{type:'binary'})
					const wsname = workbook.She etNames[0] //取Excel中的第一张表
					const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])  //生成JSON表格内容
					const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname],{range:1})  //生成JSON表格内容，从表格第二行开始读取
					const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname])  //输出表格对应位置是什么值
					const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[waname])  //生成HTML输出
					const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[waname])   //生成分隔符分隔值输出
					const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[waname])   //生成公式列表
					const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[waname])    //生成UTF16格式的文本
					this.list = []
					for(let i = 0;i<ws.length;i++){
						this.list.push(ws[i])
					}
					
				}
			}
			
		}
	
	}
}
</script>

• 前端Aes加密

npm i crypto-js --save
import CryptoJS from 'crypto-js';
let key = 'xxxxxxxx'
let iv = 'xxxxxx'
export function getAES (originData) {
  let data = CryptoJS.enc.Utf8.parse(originData);
  let key = CryptoJS.enc.Utf8.parse(key);
  let iv = CryptoJS.enc.Utf8.parse(iv);
  let encrypted = CryptoJS.AES.encrypt(data, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.ciphertext.toString();
}

• 前端Aes解密

export function getDecryptAES(word) {
  var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  //上面这两行是对前面解密方法用了ciphertext做了处理
  //ciphertext 是处理为16进制，不加的话是base64
  //如果是处理为16进制，解密的时候就要先处理成base64再进行解密
  //上面加密方法如果是return encrypted.toString() 就不需要上面两行
  var decrypted = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding,
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}