前言

紀錄一些檢查型別的方法，以及陣列去重比較乾淨的寫法

大綱

• typeof 檢查型別
• 檢查是否為 undefined
• 檢查是否為 null
• 檢查是否為 Object
• 檢查是否為 Array / 為空陣列
• 陣列去重 indexOf() / includes()
• 陣列去重 filter()
• 陣列去重 ES6 Set (推薦)

typeof 檢查型別

• 可以檢查 字串、數字、布林値

• typeof null 結果為 'object'
• typeof function(){} 結果為 'function '

  const str = 'String'
  typeof str //'string'

  typeof NaN  // 結果為 'number'
  typeof null // 結果為 'object'
  typeof function(){} // 結果為 'function '

檢查是否為 undefined

• typeof

  // 使用 let , const 宣告不給予值會直接噴錯
  var test
  typeof test // 'undefined'

  if(typeof test !=='undefined'){
    // test is defined
  }

檢查是否為 null

• Falsy包含: 正負0,'',"",null,undefined,false,NaN
• Falsy 之外 Boolean() 後皆為正，包含物件
• 因此 Boolean() 為 false 且 typeof 為物件者為 null

  const test = null;
  // 先判斷是否為 Falsy 在判斷是否 typeof 回傳 object
  if (!test && typeof test === 'object') {
    console.log('Var is null');
  }

檢查是否為 Object

• 注意!! 必須排除 null 的可能性

  const nullObj = null  // 不會噴 console
  const obj = {}  // 會噴 console
  if(typeof obj === 'object' && obj !== null){
    console.log('Var is Object')
  }

檢查是否為 Array / 為空陣列

• isArray 回傳 Boolean值
• length 利用長度判斷是否為空陣列
• stack overflow 參考資料

  const arr = [1]
  Array.isArray(arr) // true

  // 先判斷是否為陣列 或者存在
  // length 為 0 時 falsy 經過 ! 轉為 true
  // 因此 arr 空陣列時會符合結果
  if ( arr && !arr.length) {
    console.log('Var is Empty Array')
  }

  if (arr && arr.length) {
    console.log('Var is Array But Not Empty')
  }

陣列去重

indexOf() includes()

• includes 回傳 Boolean
• indexOf 回傳 Index 無則-1

  const arr = [1, 1, 2, 2, 3, 4, 5, 6]
  const includesArray = []
  const indexOfArray = []
  arr.forEach((el) => {
    // 當 includes 為 false 即不在暫存陣列時，將其加入
    if (!includesArray.includes(el)) { includesArray.push(el) }
    // 當 indexOf 為 -1 即不在暫存陣列時，將其加入
    if (indexOfArray.indexOf(el) < 0) { indexOfArray.push(el) }
  })
  console.log(includesArray)
  console.log(indexOfArray)

filter()

• filter 自身會產生 新陣列，省去自行建立
• 同樣用 indexOf() / includes 去判斷是否存在

  const filterArr = arr.filter(function(el, index, array) {
    return array.indexOf(el) === index
  })
  console.log(filterArr)

ES6 Set

• Set 為新的資料結構，類似陣列，但成員值不重複
• IE 11 有支援!!

  // ES6 SET
  const arr = [1, 1, 2, 2, 3, 4, 5, 6]
  const setArr = Array.from(new Set(arr))
  console.log(setArr)

參考資料

• Summer 桑莫
• IT READ
• stack overflow