js 项目中常用的方法记录用

js 项目中常用的方法记录用

1.求平均值

 let num = arr.reduce((num, item, index) => {
         if (index != arr.length - 1) {
                 return num + item;
          } else {
                  return (num + item) / arr.length;
          }
});

2. 当前时间 xxxx-xx-xx xx:xx:xx

let date = new Date();
     let year = date.getFullYear();
     let month = date.getMonth() + 1;
     let strDate = date.getDate();
     let curHour = date.getHours();      //获取当前小时数(0-23)
     let curMinute = date.getMinutes();   // 获取当前分钟数(0-59)
     let curSec = date.getSeconds();      //获取当前秒数(0-59)
     if (month >= 1 && month <= 9) {
           month = "0" + month;
      }
     if (curHour >= 1 && curHour <= 9) {
           curHour = "0" + curHour;
      }
     if (curMinute >= 0 && curMinute <= 9) {
           curMinute = "0" + curMinute;
     }
    if (curSec >= 0 && curSec <= 9) {
           curSec = "0" + curSec;
     }
    let currentdate = year + '-' + month + '-' + strDate + ' ' + curHour + ':' + curMinute + ':' + curSec;

3.最大值、最小值

let maxNum = Math.max(...arr).toFixed(3);
let minNum = Math.min(...arr).toFixed(3);

4.数组去空、去重

利用对象的属性不能重复的特点进行去重。
let contactItemList1 = [
   {name: '', id: 1, childLabelId: 1,},
   {name: '1', id: 2, childLabelId: 2,},
   {name: '2', id: 3, childLabelId: 3,},
   {name: '', id: 4, childLabelId: 1,},
   {name: '3', id: 5, childLabelId: 4,},
   {name: '4', id: 6, childLabelId: 2,},
    
];
let arr = [];
contactItemList1.forEach(item => {
    if (item.name != ''){
        arr.push(item);
    }
});
let obj = {};
let arr1 = arr.reduce((cur,next) => {
    obj[next.childLabelId] ? "" : obj[next.childLabelId] = true && cur.push(next);
    return cur;
},[]);
console.log(arr1);

5.vue元素拖动

<div class="form" @mousedown.self="move"></div>

move(e) {
    let odiv = e.target;        //获取目标元素
    //算出鼠标相对元素的位置
    let disX = e.clientX - odiv.offsetLeft;
    let disY = e.clientY - odiv.offsetTop;
    document.onmousemove = (e) => {       //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        //移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
    };
    document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
    };
},

6.ctrl+鼠标左键事件

<div class="form" @click.stop="deploy"></div>
deploy() {  
	// 判断是否按下ctrl键
    if (e.ctrlKey) {
       
     } else {
        
     }
 }

7.元素内鼠标样式 vue/iview

<div class="table-box" :style="{cursor: theoryFlag ? 'crosshair' : 'default',}"></div>
<Button icon="md-ionic" @click="theoryChoose" slot="append">触发鼠标样式</Button>
// 点击触发元素内鼠标样式
theoryChoose() {
    this.theoryFlag = true;
},

8.键盘事件 (Esc取消7的鼠标样式)

// 键盘事件一般都放到created中
created() {
    let g = this;
    document.onkeydown = function (e) {
        let key = window.event.keyCode;
        // Esc键盘码 27
        if (key === 27) {
            g.theoryFlag = false;
        }
    };
}

9.localStorage存取值

localStorage.setItem('userurl', '张三');
console.log(localStorage.getItem('name'));

10.输入框自动获取焦点

<Input id="username" placeholder="用户名"/>

mounted() {
   // 登录前输入框自动获取焦点
   this.$nextTick(() => {
       document.querySelector('#username').querySelector('input').focus();
   });
},

就写这么些吧,啥时候想更了,再更新下,最近忘性大,记录下用过又不常用的方法