JS小技巧

• CSS 穿透覆盖默认样式

  input标签 上传type="file"，使用img遮盖，防止img阻隔点击事件
  
  img {
    pointer-events: none;
  }
  

• 自定义原生 select 控件的样式

  select {
    -webkit-appearance: none;
  }
  

• 文本溢出处理

  //单行
  .single {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  //多行
  .more {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    work-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //指定行数
  }
  

• 全屏居中 JS 函数

  function autoCenter(el) {
    var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
    var bodyY = document.documentElement.offsetHeight || document.body.offsetHeight;
  
    var elementX = el.offsetWidth;
    var elementY = el.offsetHeight;
  
    el.style.left = (bodyX - elementX) / 2 + "px";
    el.style.top = (bodyY - elementY) / 2 + "px";
  }
  

• 防止鼠标选中事件

• 一像素边框设置

  .folder li {
    position: relative;
    padding: 5px;
  }
  .folder li + li:before {
    position: absolute;
    top: -1px;
    left: 0;
    content: " ";
    width: 100%;
    height: 1px;
    border-top: 1px solid #ccc;
    -webkit-transform: scaleY(0.5);
  }
  

• 彻底屏蔽鼠标右键

  oncontextmenu=”window.event.returnValue=false”
  

• 取消选取、防止复制

  < body onselectstart=”return false”>
  

• JS不允许粘贴

  onpaste=”return false”
  

• JS防止复制

  oncopy=”return false;” oncut=”return false;”
  

• 禁用输入法

  < input style=”ime-mode:disabled”>
  

• 防止被人 frame

  if (top.location != self.location)top.location=self.location;
  

• 网页禁用另存为

  < no>< iframe src=*.html>< /iframe>< /no>
  

• 判断两个数组是否相同

  export function scalarArrayEquals(array1, array2) {
    return array1.length === array2.length && array1.every(function(v, i) { return v ===array2[i]})
  }
  

• 对象转换为数组

   var obj = {
      0: 'a',
      1: 'b',
      2: 'c',
      3: 'd',
      length: 4
  }
  var objArr = Array.prototype.slice.call(obj);
  

• 使用扩展运算符可以快速扁平化二维数组

  const arr = [1,[2,3],[4,5]]
  const flatArr = [].concat(...arr)
  console.log(flatArr)//[1, 2, 3, 4, 5]
  

• 扁平化任意纬度数组

  function flattenArray(arr){
    const flatArr = [].concat(...arr)
    return flatArr.some(item=>Array.isArray(item))?flattenArray(flatArr):flatArr
  }
  const arr = [1,[2,3],[4,5,[6,7,[8,9]]]]
  console.log(flattenArray(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9]
  

• 对数组中的所有值求和

  var numbers = [3, 5, 7, 2];
  var sum = numbers.reduce((x, y) => x + y);
  console.log(sum); // returns 17