前端日常總結-9個

1.對象的深拷貝問題

方式一：

var clone2 = function(v) {
  return (
    JSON.parse(JSON.stringify(v))
  );
}

方式二：

var clone = function(obj) {
  var newObj = obj.constructor === Array ? [] : {};
  for( var key in obj) {
    newObj[key] = typeof obj[key] === 'Object' ? clone(obj[key]) : obj[key];
  }
  return newObj;
}

方式一是通過序列化和反序列化進行實現。愛掏網 - it200.com
方式二是循環遞歸 對象屬性進行遍歷。愛掏網 - it200.com
但是方式一存在一定的缺陷。愛掏網 - it200.com比如：當屬性值是undefined時，該屬性就會刪除。愛掏網 - it200.com
案例： 詳情：https://www.imooc.com/article/70653

2.關于es6的let的問題

關于 let name ={userName:name} 報錯問題，可與 var name ={userName:name} 對比。愛掏網 - it200.com
截圖1：
截圖2：
該錯是es6中let 暫時性死區引起的。愛掏網 - it200.com

資料說明：ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。愛掏網 - it200.com凡是在聲明之前就使用這些變量，就會報錯。愛掏網 - it200.com

資料：http://es6.ruanyifeng.com/#docs/let

3.關于封裝 DOM 屬性

在 JavaScript 中，我們可以獲取HTML元素的屬性值，例如 element.id 。愛掏網 - it200.com但是，因為 for 和 class 是 JavaScript 中的關鍵字，所以在 JavaScript 中這兩個屬性名稱分別用 htmlFor 和 className 代替，于是在封裝的時候需要先對這兩個屬性進行特殊判斷。愛掏網 - it200.com通常，我們會這么寫：

function getAttr(el, attrName){
    var attr;
    if ('for' == attrName) {
        attr = 'htmlFor';
    } else if ('class' == attrName) {
        attr = 'className';
    } else {
        attr = attrName;
    }
}

但是會發現 JavaScript 發現了一種很妙的寫法，是這么寫的：

function getAttr(el, attrName){
    var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
}

構建了一個對象來做判斷，實在是巧妙！這樣一來節省了很多代碼，也就減少了BUG出現的可能性，而且也沒有喪失其可讀性，是很值得學習的。愛掏網 - it200.com
代碼案例：過濾器

 filters: {
    genderFilter(val) {
      return { '-1': '空', '0': '男', '1': '女', '2': ':不限' }[val]
    }
}

4.Vue 父傳子方式：1、屬性 2、vuex 3、事件廣播 4.bus

例如：子組件

1、在子組件中就可以 通過porps獲取fcompanyName
2、vuex、bus 不再贅述。愛掏網 - it200.com
3、然而,我們還可以通過 方法3獲取

在父組件 執行 子組件中showSingleAddModal() 方法// 單個導入

showSingleAddModal () {
    this.$refs.singleAddModal.showSingleAddModal(company.name，12)
},

這樣子組件的方法就會被執行

showSingleAddModal(name, age) {
    //我們就可以在這里進行賦值操作了
    this.showModal = true
},

事件廣播 可以有效的讓我們對子組件的事件進行操作，該方法可以多加靈活利用。愛掏網 - it200.com

比如：彈窗事件

//父組件執行


showSingleAddModal () {
    this.$refs.singleAddModal.showSingleAddModal()
},
 // 子組件方法
// 彈窗
showSingleAddModal() {
    this.showModal = true
},

5.setTimeout時間設置為0

js是單線程的，單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。愛掏網 - it200.com
如果前一個任務耗時很長，后一個任務就不得不一直等著。愛掏網 - it200.com

setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。愛掏網 - it200.com
它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。愛掏網 - it200.com
應用:當初始化方法時，某個參數還沒有取到值，可對方法進行

setTimeout(()=>{
  // 初始化方法  this.xxxx()
})

6.CSS3原生變量var()

今天碰到個新的css屬性。愛掏網 - it200.comCSS3原生變量var 。愛掏網 - it200.com資料：https://blog.csdn.net/HY_358116732/article/details/78729839
例子：

：root{
  --main-color：red;
}

//在子元素就可以：
div{
  color:var(--main-color, blue)
}

注意事項：
1.CSS中原生的變量定義語法是：--，變量使用語法是：var(--)，其中*表示我們的變量名稱
2.變量名大小寫敏感，--header-color和--Header-Color是兩個不同變量。愛掏網 - it200.com
3.CSS變量使用的完整語法為：var( [, ]"7es6-關于-（擴展運算符）小應用-數組的push">7.es6 關于... （擴展運算符）小應用-數組的push

let arr =[]
function(item) {
  arr.push(item)
}
// 而es6可以直接
function(item) {
  arr=[...arr,item]
}

8.cookie 和 session 小結

cookie一般用來記錄用戶的登錄信息，隨請求一起發送到服務器端，cookie安全性相對于session較低些，cookie可以被截取和欺騙服務器。愛掏網 - it200.com
session是服務器記錄用戶狀態信息的技術，當客戶端首次請求服務器時，服務器會為該客戶端創建一個唯一的對象，稱之為session對象，并且會生成sessionID返回給客戶端，當客戶端再次請求的時候，攜帶著這個sessionID，服務器就會識別出這個客戶sessionID并處理相應的操作。愛掏網 - it200.com
可以在http攜帶cookic來進行登錄保持，識別等功能。愛掏網 - it200.com

9.關于 react的 this.setState() 的 "異步"。愛掏網 - it200.com【batch和queue 】

https://www.jianshu.com/p/a883552c67de

setState 方法其實是 “異步” 的。愛掏網 - it200.com即立馬執行之后，是無法直接獲取到最新的 state 的，
需要經過 React 對 state 的所有改變進行合并處理之后，才會去計算新的虛擬dom，再根據最新的虛擬dom去重新渲染真實dom。愛掏網 - it200.com

this.setState({
  nane: this.state.name
})
console.log(this.state.name)

有時候我們會發現值的更新滯后，比如我們剛剛更新的name值，但是頁面中還是以前的name，出現這種情況的原因就是 setState() 有時候是異步的。愛掏網 - it200.com
1
2
3

在現在的react16（fiber版本） 之后，建議：要修復它，請使用第二種形式的 setState() 來接受一個函數而不是一個對象。愛掏網 - it200.com 該函數將接收先前的狀態作為第一個參數，將此次更新被應用時的props做為第二個參數。愛掏網 - it200.com

this.setState((prevState, props) =>{
  nane: prevState.name
})

第一個參數表示上一個狀態值，第二參數表示當前的 props

小結：
1.setState 只在合成事件（在js中onclick就是原生事件，而 onClick就是合成事件）和鉤子函數中是“異步”的，在原生事件和 setTimeout 中都是同步的。愛掏網 - it200.com

2.setState的“異步”并不是說內部由異步代碼實現，其實本身執行的過程和代碼都是同步的，只是合成事件和鉤子函數的調用順序在更新之前，導致在合成事件和鉤子函數中沒法立馬拿到更新后的值，形式了所謂的“異步”。愛掏網 - it200.com

3.setState 的批量更新優化也是建立在“異步”（合成事件、鉤子函數）之上的，在原生事件和setTimeout 中不會批量更新，在“異步”中如果對同一個值進行多次 setState ， setState 的批量更新策略會對其進行覆蓋，取最后一次的執行，如果是同時 setState 多個不同的值，在更新時會對其進行合并批量更新。愛掏網 - it200.com這個機制也極大的提高了性能。愛掏網 - it200.com

文檔：https://blog.csdn.net/b954960630/article/details/79822639