精心收集的代碼片斷

代碼

用最短的代碼長度爲m（6）值都爲n（{name:'jahn'}）的數組

let arr = Array(3).fill({name:'jahn',age:18})
  console.log(arr)
  [ { name: 'jahn', age: 18 },
    { name: 'jahn', age: 18 },
    { name: 'jahn', age: 18 } ]
複製代碼

根據對象數組中對象的某一個屬性進行排序

let arr = [
    {nmae:'jahn',age:18},
    {name:'tom',age:12},
    {name:'Jay',age:30}
  ]

  arr.sort((a, b) => a.age - b.age);

  console.log(arr)

  [ { name: 'tom', age: 12 },
    { nmae: 'jahn', age: 18 },
    { name: 'Jay', age: 30 } ]
複製代碼

獲取指定時間範圍內的全部日期

const getDateRange = (startTime,endTime) =>{
    let bd = new Date(startTime), be = new Date(endTime);
    let
        bd_time = bd.getTime(),
        be_time = be.getTime(),
        time_diff = be_time - bd_time;
    let arr = [];
    for (let i = 0; i <= time_diff; i += 86400000) {
      let ds = new Date(bd_time + i);
      arr.push( `${ds.getMonth()+1}-${ds.getDate()}`);
    }
    return arr
  }

  let result = getDateRange(Date.parse(new Date()) - 1000 * 60 * 60 * 24 * 6, Date.parse(new Date()))

  console.log(result)
  // [ '8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7' ]
複製代碼

對象數組的元素去重

let array = [  
      {a:1,b:2,c:3,d:4},  
      {a:11,b:22,c:333,d:44},  
      {a:111,b:222,c:333,d:444},  
      {a:11,b:22,c:33,d:44},  
      {a:11,b:22,c:33,d:444}  
  ];  


  //將對象元素轉換成字符串以做比較 
  function obj2key(obj, keys){  
      var n = keys.length,  
          key = [];  
      while(n--){  
          key.push(obj[keys[n]]);  
      }  
      return key.join('|');  
  }  
  //去重操做 
  function uniqeByKeys(array,keys){  
      var arr = [];  
      var hash = {};  
      for (var i = 0, j = array.length; i < j; i++) {  
          var k = obj2key(array[i], keys);  
          if (!(k in hash)) {  
              hash[k] = true;  
              arr .push(array[i]);  
          }  
      }  
      return arr ;  
  }  

  //進行去重 
  let arr = uniqeByKeys(array,['a','b']);  

  console.log(arr)
  [ { a: 1, b: 2, c: 3, d: 4 },
    { a: 11, b: 22, c: 333, d: 44 },
    { a: 111, b: 222, c: 333, d: 444 } ]
複製代碼

數字、金額格式化

let str = '123456789'
  let result = str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

  console.log(result)
  // 123,456,789
複製代碼

封裝

LocalStorage封裝

const storage = {
    // 存儲storage
    setStore(name,content){
      if (!name) return;
      if (typeof content !== 'string') {
        content = JSON.stringify(content);
      }
      window.localStorage.setItem(name, content);
    },
    // 獲取storage
    getStore(name){
      if (!name) return;
      return window.localStorage.getItem(name);
    },
    // 刪除storage
    removeStore(name){
      if (!name) return;
      window.localStorage.removeItem(name);
    }
  }

  storage.setStore("name",'jahn')
  storage.getStore("name")
  storage.removeStore("name")
複製代碼

IconFont 封裝

// 首先建立一個公共組件Icon的單頁文件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClass"></use>
  </svg>
</template>

props: {
  //  使用icon的圖標類型
  iconName: {
    type: String,
    required: true,
  },
  // 是否添加class樣式
  className: {
    type: String,
    default: ""
  }
}

computed: {
  iconClass() {
    return `#icon-${this.iconName}`;
  },
  svgClass() {
    if (this.className) {
      return `icon ${this.className}`;
    } else {
      return `icon`;
    }
  }
}

<style lang="less"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
複製代碼

時間格式化

/* formatDate 接受倆個參數, oldDate 類型能夠是 Date，String，Number。 由於如今用時間戳傳遞時間真的是蠻多，也蠻方便的，而JS 是一門弱類型語言，因此我將 String 和 Number 類型的數據統一當作時間戳來處理。 fmt 是格式化的類型： yyyy-MM-dd hh:mm， 其中的連字符是能夠隨意替換的，只展現年月將其餘關鍵字去掉便可。 例子： yyyy年MM月dd -> 2019年09月7日 hh分mm秒 -> 16分53秒 */
export function dateFormat (oldDate, fmt){  
  let date = new Date()  
  if (typeof oldDate === 'string' || typeof oldDate === 'number') {    
    date = new Date(+oldDate)  
  } else {    
    date = oldDate  
  }  
if (/(y+)/.test(fmt)) {    
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))  }  
  let o = {    
  'M+': date.getMonth() + 1,    
  'd+': date.getDate(),    
  'h+': date.getHours(),    
  'm+': date.getMinutes(),    
  's+': date.getSeconds()  }  
  function padLeftZero (str) {    
    return ('00' + str).substr(str.length)  
  }  
  for (let k in o) {    
    if (new RegExp(`(${k})`).test(fmt)) {      
      let str = o[k] + ''      
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))    
    }  
  }  
  return fmt
}
複製代碼

Less

Flex對齊方式

// flex 對齊方式
.flex(@justify: flex-start, @align:stretch){
  display: flex;
  justify-content:@justify;
  align-items:@align ;
}
複製代碼

文字溢出省略

// 文字溢出省略
.omit(@lines) when(@lines = 1){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omit(@lines) when(@lines > 1){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@lines;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
}
複製代碼