初級の先端はたわみを見て、高級な技師は笑って話をしないで、あなたはいくら書くことができますか?

フロントエンドの開発は、バックグラウンドからのデータの一部を処理したり、データに基づいて判断したりする場合があります.
この時には、よく使う工具類をカプセル化する必要があります.
本文はよく使うツール類によって59の方法をカプセル化しました.もちろんまだ多くの用途があります.
アール
1.arrAndSet:統合

/**
 *     ,       
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrAndSet = (arrOne, arrTwo) => {
  return arrOne.concat(arrTwo.filter(v => !arrOne.includes(v)))
}

2.arrIntersection:交差点

/**
 *     ,       
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrIntersection = (arrOne, arrTwo) => {
  return arrOne.filter(v => arrTwo.includes(v))
}

3.arrDifference:差集

/**
 *     ,       
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * eg: [1, 2, 3] [2, 4, 5]    [1,3,4,5]
 */
export const arrDifference = (arrOne, arrTwo) => {
  return arrOne.concat(arrTwo).filter(v => !arrOne.includes(v) || !arrTwo.includes(v))
}

4.arTwotoArObj:2つの配列を1つの配列オブジェクトに統合する

/**
 *              ,      ,            
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * @param {oneKey} oneKey   ,       ,    arrOne      key,arrTwo    value
 * @param {twoKey} twoKey
 */
export const arrTwoToArrObj = (arrOne, arrTwo, oneKey, twoKey) => {
  if(!oneKey&&!twoKey){
    return arrOne.map((oneKey, i) => ({ [oneKey]:arrTwo[i] }))
    //   ,       arrTwo       key    ,arrTwo      arrOne
   // return Object.assign({}, arrOne, arrTwo)
  }else{
    return arrOne.map((oneKey, i) => ({ oneKey, twoKey: arrTwo[i] }))
  }
}

5.arrObjSum:配列対象の合計

/**
 *       
 * @param {Object} arrObj     
 * @param {String} key       key  
 */
export const arrObjSum = (obj, key) => {
  return obj.reduce((prev, cur) => prev + cur.key, 0)
}

6.arrConcat:配列合併

/**
 *     ,      
 * @param {Array} arrOne   
 * @param {Array} arrTwo   
 */
export const arrConcat = (arrOne, arrTwo) => {
  return [...arrOne, ...arrTwo]
}

7.arSum:行列の合計

/**
 *     
 * @param {Array} arr   
 */
export const arrSum = arr => {
  return arr.reduce((prev, cur)=> {
    return prev + cur
  }, 0)
}

8.arrIncludeValue:配列はある値を含んでいますか?

/**
 *         
 * @param {Array} arr   
 * @param {}  value  ,      String,Number,Boolean
 */
export const arrIncludeValue = (arr,  value) => {
  return arr.includes( value)
}

9.arrMax:配列最大値

/**
 *      
 * @param {Array} arr    
 */
export const arrMax = arr => {
  return Math.max(...arr)
}

10.arrRemoveRepeat:配列が重い

/**
 *     
 * @param {Array} arr    
 */
export const arrRemoveRepeat = arr => {
  return Array.from(new Set(arr))
}

11.arrOrderAcend:配列並び替え

/**
 *     
 * @param {Array} arr    
 * @param {Boolean} ascendFlag     ,    true
 */
export const arrOrderAscend = (arr, ascendFlag=true) => {
  return arr.sort((a, b) => {
    return ascendFlag ? a - b : b - a
  })
}

12 arrJudge:配列かどうかを判断する

/**
 *        
 * @param {Array}} arr   
 */
export const arrJudge = arr => Array.isArray(arr)

ロック
13.checkNum:数字かどうかを判断する

/**
 *         
 * @param {Number} data
 */
export const checkNum = data => /^\d{1,}$/g.test(data)

14.checkLetter:字母かどうかを判断する

/**
 *         
 * @param {Number} data
 */
export const checkLetter = data => /^[a-zA-Z]+$/g.test(data)

15.checkLowercaseLetter:全部小文字かどうかを判断する

/**
 *             
 * @param {Number} data
 */
export const checkLowercaseLetter = data => /^[a-z]+$/g.test(data)

16.checkCapital Letter:大文字かどうかを判断する

/**
 *           
 * @param {Number} data
 */
export const checkCapitalLetter = data => /^[A-Z]+$/g.test(data)

17.checkNumOrLetter:文字か数字かどうかを判断する

/**
 *           
 * @param {Number || String} data       
 */
export const checkNumOrLetter = data => /^[0-9a-zA-Z]*$/g.test(data)

18.checkChinese:中国語かどうか判断する

/**
 *        
 * @param {String} data    
 */
export const checkChinese = data => /^[\u4E00-\u9FA5]+$/g.test(data)

19.checkChinese Numberreter:中国語かどうか、数字かアルファベットかどうかを判断する.

export const checkChineseNumberLettter = data => /^[a-zA-Z0-9\u4e00-\u9fa5]+$/g.test(data)

20.checkEmail:メールアドレスかどうかを判断する

/**
 *          
 * @param {String} data
 */
export const checkEmail = data => {
  const reg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g
  if (reg.test(data)) return true
}

21.1 checkTelphone:携帯番号かどうかを判断する

/**
 *         ，   13,14,15,16,17,18,19    
 * @param {String} data
 */
export const checkTelphone = data => {
  const reg = /^((\+|00)86)?1[3-9]\d{9}$/g
  if (reg.test(data)) return true
}

22.checkUrl:正しいURLかどうかを判断する

/**
 *           
 * @param {String} url   
 */
export const checkUrl = url => {
  const a = document.createElement('a')
  a.href = url
  return [
    /^(http|https):$/.test(a.protocol),
    a.host,
    a.pathname !== url,
    a.pathname !== `/${url}`
  ].find(x => !x) === undefined
}