记录 前端常用知识

css写出一个三角形角标

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}

水平垂直居中
定位

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

fiex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

css一行文本超出

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本超出显示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

隐藏/修改 div元素的滚动条

div::-webkit-scrollbar {
    display: none;
}

设置计算宽度/高度

div {
    width: calc(25% - 20px);
}

解析get参数

location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);

数组快速去重

const arr = [1, 2, 3, 4, 5, 6];

const arr2 = new Set(arr);

const arr3 = [...arr2];

Object.keys, values, entries

const obj = {name: 'yd', age: 18};

Object.keys(obj); // ['name', 'age'];

Object.values(obj); // ['yd', 18];

const l = Object.entries(obj); // [['name', 'yd'], ['age': 18]];

const m = new Map(l);

/**
 * 检测数组中是否有对应值
 * @param data
 * @param key
 * @param value
 * @returns {boolean}
 */
export function hasMatchValue(data, key, value) {
  if (data && key && value) {
    if (isArray(data)) {
      for (let i = 0; i < data.length; i += 1) {
        const item = data[i];
        if (item[key] === value) {
          return true;
        }
      }
    } else if (isObject(data) && data[key] === value) {
      return true;
    }
  }
  return false;
}

// 截取时间
export function filterDate(val) {
  let newDate = '-';
  if (val) {
    if (val.length > 10) {
      newDate = val.slice(0, 10);
    } else {
      newDate = val;
    }
  }
  return newDate;
}

/**
 * 校验手机号
 * @param source
 * @returns {boolean}
 */
export function isMobile(source) {
  return /^((\(\d{2,3}\))|(\d{3}\-))?(1[3456789]\d{9})$/.test(source);
}

/**
 * 校验email
 * @param source
 * @returns {boolean}
 */
export function isEmail(source) {
  return /^[A-Z_a-z0-9-\.]+@([A-Z_a-z0-9-]+\.)+[a-z0-9A-Z]{2,4}$/.test(source);
}

//数组中 取最大值/最小值
const numbers = [6, 8, 1, 3, 9];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1 

获取鼠标位置
可以使用 MouseEvent 对象下 clientX 和 clientY 的属性值，获取鼠标的当前位置坐标信息

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});  

简写条件判断语句

// 普通写法
if (condition) {
    doSomething();
}

// 简写
condition && doSomething(); 

//将字符串转换为数字
const str = '404';

console.log(+str) // 404;   

//将数字转换为字符串
const myNumber = 403;

console.log(myNumber + ''); // '403'   

reduce 对数组求和

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100