实用JS代码块

开个博客记录日常开发中遇到的实用代码块

JS获取最近日期

 function getDate() {
     var myDate = new Date();
             var tYear = myDate.getFullYear()
             var tMonth = myDate.getMonth()
             tMonth = doHandleZero(tMonth + 1)
        
             return tYear + "-" + tMonth + "-01"
         }
         function getDay(day){
             var today = new Date();
             var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
             today.setTime(targetday_milliseconds);
             var tYear = today.getFullYear();
             var tMonth = today.getMonth();
             var tDate = today.getDate();
             tMonth = doHandleMonth(tMonth + 1);
             tDate = doHandleMonth(tDate);
             return tYear+"-"+tMonth+"-"+tDate;
         }
         function doHandleMonth(month){
             var m = month;
             if(month.toString().length == 1){
             m = "0" + month;
             }
             return m;
         }
   //getDay（30）30天后
   //getDay（-30）30天前

三位分节法展示数字

   toThousands(num) {
        var result = '', counter = 0;
         var dot = String(num).indexOf(".");
         if(dot != -1){
             // 获取小数点后面的数字(indexOf和substring都不支持数字，所以要先转字符串才可以用)
             var dotCnt = String(num).substring(dot+1,num.length);
             // 获取小数点前面的数字
             num = String(num).split('.')[0]
             num = (num || 0).toString();
             for (var i = num.length - 1; i >= 0; i--) {
                 counter++;
                 result = num.charAt(i) + result;
                 if (!(counter % 3) && i != 0) { result = ',' + result; }
             }
             result = result + '.' + dotCnt;
             return result;
             
         }else{
             // alert("没有小数点");
             return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
         }
     }

对象转为二维数组

Object.entries()

let obj= {
  school: 'aaa',
  name: 'bbb',
  age: 1
}
const arr = Object.entries(obj)
console.log(arr)
//[ [ 'producer', 'aaa' ], [ 'name', 'bbb' ], [ 'age', 1] ]

数组转对象

let arr = ['1','2','3']
let obj = {...arr}
console.log(obj)

//>{ 0 : 1 , 1 : 2 , 2 : 3 }

取出对象的值

Object.values()

let obj= {
  school: 'aaa',
  name: 'bbb',
  age: 1
}
const arr = Object.values(obj)
console.log(arr)
//['aaa','bbb',1]

找出数据中某一项

Array.find()

const pets = [{
    type: 'Dog',
    name: 'Max'
  },
  {
    type: 'Cat',
    name: 'Karl'
  },
  {
    type: 'Dog',
    name: 'Tommy'
  }
]
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy')
console.log(pet) // { type: 'Dog', name: 'Tommy' }

有条件的函数调用

function fn1() {
  console.log('I am Function 1')
}


function fn2() {
  console.log('I am Function 2')
}
/*
长的写法
*/
let checkValue = 3;
if (checkValue === 3) {
  fn1()
} else {
  fn2()
}


简短的写法：
(checkValue === 3 ? fn1 : fn2)()

JS数字金额转中文大写

1.新建tool.js文件

// 数字金额转大写
export const numToCny=(money)=>{
    // 汉字的数字
    var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆',
        '柒', '捌', '玖');
    // 基本单位
    var cnIntRadice = new Array('', '拾', '佰', '仟');
    // 对应整数部分扩展单位
    var cnIntUnits = new Array('', '万', '亿', '兆');
    // 对应小数部分单位
    var cnDecUnits = new Array('角', '分', '毫', '厘');
    // 整数金额时后面跟的字符
    var cnInteger = '整';
    // 整型完以后的单位
    var cnIntLast = '元';
    // 最大处理的数字
    var maxNum = 999999999999999.9999;
    // 金额整数部分
    var integerNum;
    // 金额小数部分
    var decimalNum;
    // 输出的中文金额字符串
    var chineseStr = '';
    // 分离金额后用的数组，预定义
    var parts;
    if (money == '') {
        return '';
    }
    money = parseFloat(money);
    if (money >= maxNum) {
        // 超出最大处理数字
        return '';
    }
    if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
    }
    // 转换为字符串
    money = money.toString();
    if (money.indexOf('.') == -1) {
        integerNum = money;
        decimalNum = '';
    } else {
        parts = money.split('.');
        integerNum = parts[0];
        decimalNum = parts[1].substr(0, 4);
    }
    // 获取整型部分转换
    if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
            var n = integerNum.substr(i, 1);
            var p = IntLen - i - 1;
            var q = p / 4;
            var m = p % 4;
            if (n == '0') {
                zeroCount++;
            } else {
                if (zeroCount > 0) {
                    chineseStr += cnNums[0];
                }
                // 归零
                zeroCount = 0;
                chineseStr += cnNums[parseInt(n)]
                    + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
                chineseStr += cnIntUnits[q];
            }
        }
        chineseStr += cnIntLast;
    }
    // 小数部分
    if (decimalNum != '') {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
            var n = decimalNum.substr(i, 1);
            if (n != '0') {
                chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
        }
    }
    if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
    } else if (decimalNum == '') {
        chineseStr += cnInteger;
    }
    return chineseStr;
}

2.组件中使用

<template>
    
</template>
<script>
import { numToCny } from '@/libs/tools'
export default {
    data(){
        return{
        }
    },
    mounted(){
        let num=numToCny('123456.78');
    }
}
</script>

数组去重8种方法

1.splice

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {  //  第一个数与比后面的数比较
        if (arr[i] === arr[j]) {
            arr.splice(j, 1); // 删除与第一个数比相等的数
            i--; //   因为删除了需要重新比较
        }
    }
}
console.log(arr);

2.indexOf

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let temp =[];
for(let i = 0 ; i < arr.length; i++){
    if(temp.indexOf(arr[i]) === -1){  // temp.indexOf(arr[i]) 通过数组的下标查找没有查找的值，始终为-1
        temp.push(arr[i]);   // temp数组没有相同的值，就加入数组。反之
    }
}
console.log(temp);

3.includes

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let temp = [];
for(let item of arr){  
     if(temp.includes(item) == false){   // 通过遍历的值，去查找新数组是否有该值，返回的是false就没有，加入新数组。
         temp.push(item);
   }
}
console.log(temp);

4.set

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let temp = new Set(arr); //  去重后得到一个集合
console.log([...temp]);   // 通过扩展运算符放进一个空数组

5.filter

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let result = arr.filter(function(value,index,self){
    return self.indexOf(value) == index;   // 数组中的每个元素执行相同的函数，将结果组合成一个新数组。
})
console.log(result)

6.sort

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
arr.sort((a, b) => a - b);  // 先通过数组的排序（升序）进行排列
for(let i = 0; i < arr.length; i++){
    if(arr[i] === arr[i+1]){   
        arr.splice(i+1,1)
        i--;
    }
}
console.log(arr);

7.forEach

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let temp = [];
arr.forEach(function(value){
    if(temp.indexOf(value) === -1){
        temp.push(value)
    }
})
console.log(temp);

8.Map

let arr = [1, 3, 7, 10, 10, 1, 6, 55, 3, 10, 10, 111];
let map = new Map();   // 利用Map的数据结构去重
let temp = [];
for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
        map.set(arr[i], true);
        temp.push(arr[i]);
    }
}
console.log(temp);

根据时间范围显示每一天时间

入参格式yyyy-mm-dd

   setXData(start,end){  
      this.chartXisArr=[]   //存储时间
      let st = start.split('-');
      let et = end.split('-');
      let startTime = new Date(st[0],st[1]-1,st[2]).getTime();
      let endTime = new Date(et[0],et[1]-1,et[2]).getTime();
      for( let i = startTime ; i <= endTime ; ){
          that.chartXisArr.push(formatTime(i,'-'));
          i += 24 * 60 * 60 * 1000;
        }

      function formatTime(time,spliter = '-'){
          let date = new Date(time);
          let year = date.getFullYear();
          let month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
          let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
          return `${year}${spliter}${month}${spliter}${day}`
      }
  }

CSS实现下拉三角形

  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid black

URL转码

JavaScript encodeURIComponent() 函数
JavaScript encodeURI() 函数

web端点击复制

      const btn = document.querySelector(".copy");
      btn.addEventListener("click", () => {
        const input = document.createElement("input");
        document.body.appendChild(input);
        input.setAttribute("value", "听说你想复制");
        input.select();
        if (document.execCommand("copy")) {
          document.execCommand("copy");
          that.alertInfo('success','复制成功');
        }
        document.body.removeChild(input);
      });