原生 JS 雜談

前言

前端基礎可謂很是重要，這一篇是我對一些原生js的概念和使用上的一些小記錄，也就是一些原生js的雜談，看博文的同窗，但願咱們能夠互相交流哈哈哈

正文

判斷對象的類型

使用toString()方法進行判斷，toString方法是寫在Object原型上的，也就是說在默認狀況下每個Object對象都會繼承toString方法，若是此方法沒有在自定義對象裏被覆蓋，那麼toString返回的是[object type]，type就是該對象的類型，那麼咱們使用.call()或者.apply()的調用方式就能夠在不一樣對象類型上使用這個toString，好比下面toString().call(val),這裏的toString()是Object.prototype.toString，這樣我再進行一些替換和切分操做就能夠得到對象的type

let val = new Date()
toString.call(val).replace(/[\[\]]/g,'').split(' ')[1].toLowerCase()
複製代碼

一個更新states的塊

(function () {
  //狀態
  const states = {
    a: null,
    b: {}
  }
  //獲取對應屬性的值
  function get(name) {
    return states.mame
  }
  //獲取states對象
  function getStates() {
    return states
  }
  //判斷對象類型
  function type(elem) {
    if (elem == null) {
      return elem + ''
    }
    return toString.call(elem).replace(/[\[\]]/, '').split(' ')[1].toLowerCase()
  }
  //設置或更新states
  function set(options, target) {
    const keys = Object.keys(options)
    let o = target ? target : states
    keys.map(item => {
      if (o[item] === undefined) {
        o[item] = options[item]
      } else {
        type(o[item]) == 'object' ? set(options[item], o[item]) : o[item] = options[item]
      }
      return item
    })
  }
  //經過外部環境保持引用變爲公用方法
  window.get = get
  window.getStates = getStates
  window.set = set
})();
set({
  a: 1,
  b: {
    name: 'joe',
    age: 24
  }
})
console.log(getStates())
複製代碼

url轉碼

解碼 decodeUrlComponent 打碼 encodeUrlComponent

數組操做

.pop()刪除數組最後一個值，返回被刪除的值 .shift()刪除數組第一個值，返回被刪除！！的值 .push() 在數組最後添加一個值，返回數組長度 .unshift() 在數組最前面添加一個值，返回數組長度 不改變原來數組:slice(),join(),concat() 改變原來數組:pop(),push(),shift(),unshift(),reverse(),splice()

運算符+的轉換

今天在羣裏有同窗提問一個問題，題目是[+[]][+[]]的結果是多少，這個就要聯繫到+號運算符的隱式轉換，在一元運算符中使用加法運算時會把加號後面的值轉化成Number類型

Number([])//0
[+[]][+[]] => [0][0] => 0
複製代碼

forEach、map、reduce、filter

forEach是遍歷數組每一項的值，而後讓每一個值都執行一次回調函數，會改變原數組 map 是對數組每一項進行操做，而後返回一個新的數組，，不改變原數組 reduce 是利用遞歸的原理對全部數值進行操做返回一個值 filter 是把符合條件的數值給挑選出來，返回一個新數組，不改變原數組，新數組的值是淺拷貝也就是引用傳遞，能夠經過filter來篩選出想操做的值，而後直接對返回的數組進行操做

set結構作數組去重

很是簡單的方法，直接將數組轉化成set結構，而後再將set結構轉爲數組，Array.from能夠將set結構轉化爲數組結構，固然也能夠直接用解構的方式[...new Set(array)]

//去重函數
function dedupe (array) {
  return Array.from(new Set(array))
}
複製代碼