JS重新開始全紀錄

20230428
關於如何將json object的多層級對象，進行展開的方法

const flattenJSON = (obj = {}, res = {}, extraKey = '') => {
   for(key in obj){
      if(typeof obj[key] !== 'object'){
         res[extraKey + key] = obj[key];
      }else{
         flattenJSON(obj[key], res, `${extraKey}${key}.`);
      };
   };
   return res;
};

透過此方法即可以單一層級的方式將所有層級關係以key的方式來進行賦值，藉此可以進行陣列轉換等等的工作

如果想要取出特定資料，不需要全部取出賦值，可以透過以下方法進行方法調整

const flattenJSON = (obj = {}, res = {}, extraKey = '') => {
   for(key in obj){
      if(typeof obj[key] !== 'object'){
         if(key === 'active') res[extraKey + key] = obj[key]; //這邊可以針對自己要取出的key進行判斷取出，以此例儘輸出key為active的子元素
      }else{
         flattenJSON(obj[key], res, `${extraKey}${key}.`); //這邊可以不要繼承父層級的key，直接把該層級的key給繼承下來就好
      };
   };
   return res;
};

20221109

關於Scroll event的停止事件

20221108

補充關於history state api的使用規範

1. 在IOS上如果連續觸發，會報錯，請一定要設置延遲。整體呈現只是URL改寫的速度會稍有延遲，但不會影響到任何操作行為

20220906

關於history.pushState的使用紀錄

1. 使用window.history.pushState()，這樣一來window會針對當下ajax的response來做當前頁面的暫存資料，這樣如果在不關閉頁面的情況下關閉瀏覽器，再次開啟瀏覽器時，瀏覽器會直接取用暫存資料來開啟該連結，連帶先前的歷史紀錄皆會以暫存資料來直接顯示。這對ajax回傳值為整頁html是有用的，但不適合針對json等資料型態的回傳方式做處理，以及回傳資料有關係到隱私資料的情況，須避免使用在window上。

2. 使用如pushState事件來進行無刷新瀏覽歷程修改，可以用window.addEventListener('popstate', (e)=>{}) 的方式來進行歷程跳躍的動作調整，如，回上頁也要繼續使用無刷新，則可以將無刷新的ajax動作寫在這個事件中

3. 重複定義history.pushState()會依序執行，所以要特別注意頁面中定義的地方和執行位置

4. pushState()有三個參數，第一個是標記狀態，通常為物件類型，但也可以不定義。第二個為標題，有些瀏覽器沒再用，所以可以忽略。最後一個是網址，就是要改寫用的網址，這個一定要給。

5. pushState()是用來增加歷程，replaceState()是用來取代當前歷程，所以，如果你的應用，不希望有歷程，但又需要網址更改但不刷新，那就用replaceState()

20220428

Object.assign

更新後的物件 = Object.assign(預設的物件，預更新的物件);