問題記錄 前端開發避坑 3 屬性迭代,分支結構

2022-10-10 18:03:13 字數 2168 閱讀 4386

利用過濾器,對後台資料做預處理,將不符合要求的資料替換為使用者可以理解的資料,如將表示特定狀態的**替換為字串,或將英文替換為指定中文等

鑑於vue官方不建議繼續使用內建的過濾器機制,嘗試在獲取到服務端資料後手動一次性過濾,再將過濾後的資料新增到**上

針對每個需要執行過濾的資料項,建立專門的過濾器方法,全域性過濾器置於公共模組內,區域性過濾器置於元件內

在元件內建立入口過濾器方法,將服務端資料作為引數傳入,並在內部迭代;當執行到指定資料時,呼叫專門的過濾器方法

最終返回過濾完全的新資料,再執行後續操作

為了方便根據鍵名將資料直接匹配到**的列,因此資料的每一行使用物件表示,一行資料為整個**陣列的乙個元素

js 中獲取物件鍵(屬性名)陣列的方式

通過靜態方法配合 for...of 迴圈:

通過 for...in 迴圈:返回物件的所有屬性名,包括繼承而來的屬性

一張表解決:

js 中獲取物件屬性值的方式

// 通過屬性訪問操作符配合屬性名

let obj = ;

obj.name; // 或 obj['name'] ,屬性名預設為字串型別,除非顯示建立了 symbol 型別的屬性名

// 通過靜態方法

object.keys(obj)

js 中獲取物件鍵值對的方式

object.entries(obj):返回鍵值對陣列,每個鍵值對用陣列表示 [key,value]

問題描述:迭代屬性失敗,沒有獲取到屬性

問題分析:

一開始沒有使用正確的迭代物件屬性的方法,甚至用了陣列的 foreach 方法,導致獲取屬性名和值失敗

改進後通過for (const key in obj )迴圈得到了屬性名,但屬性訪問方式有誤,導致新的值沒有設定到正確的屬性上:先是通過 obj.key 設定屬性值,導致過濾後的屬性值都在名為 'key' 的屬性中,而不是變數 key 實際表示的如 'name'、'age' 等屬性中

正確方式是通過 obj[key] 將 key 轉換成其所表示的字串屬性名,然後通過這個字串來訪問和設定指定的屬性

問題總結:對於屬性中鍵和值的概念以及 js 中獲取鍵和值的技術理解不到位

問題描述:迭代和過濾成功,但賦值後返回的物件屬性中不是預期的值

問題分析:將每一行資料過濾後的返回值物件初始化為空物件,即 let newrow = {},然後將過濾後的值賦予該物件對應的屬性中,但存在問題:

如圖所示,用過濾器替換性別,返回值物件的屬性值仍然是原來的值,通過控制台輸出發現,外面看到的值和物件實際的屬性值不一樣

原先以為是不同方式初始化物件導致了差異的產生,改成將原始資料的深拷貝作為 newrow 的初始化;但問題其實非常基礎,是由於我在swich塊內沒有新增返回會終止語句,導致switch塊每次都執行到最後一條defaul語句,因而前面成功賦值的過濾值又被原始值覆蓋了;而由於swich語句的終止語句(break或return)在語法上並不是強制性的,因此編譯通過而不會報錯

問題總結:對於基本控制結構的理解不到位,程式設計習慣也有很大的改進空間;在**實現階段,需要先將基本的語法結構搭建好,之後再補充具體的資料操作和計算過程,避免被難以發現的語法錯誤干擾

本次的錯誤是源於對基礎概念理解不深,各個api運用不熟練,並沒有太好的解決方案,只能靠多看、多寫、多思考來加深理解和強化記憶

// 過濾服務端原始資料表

filterserverdata(serverdata) ,

// 過濾單條(一行)服務端資料中的所有元素

filterserverdataitem(row) ;

for (const [key, val] of object.entries(row))

return newrow;

},// 過濾服務端資料中的單個資料,相當於元件所用到的所有篩選器的入口

filterserverdatafield(key, val)

},

React Native 開發問題記錄

上述 如果不需要刪除陣列元素,則沒問題,但是如果需要刪除某個陣列元素時,就會出現問題 無論刪除第幾個物件,看到的結果都是刪除了最後乙個元素。而問題的原因在於遍歷陣列生成view時的key,動態刪除陣列元素後,render方法並不是真的全部重新建立view物件,而是找到刪除掉的key,把對應key的v...

webapp開發問題記錄

問題1 mui.plusready只能在html首次建立時會觸發且自動觸發,而在mui中的所有關於plus的api只能在plusready之後執行 問題2 關於獲取某乙個標籤中具有相同class的多個p標籤中的某乙個 通常我們為了簡便直接使用 實際上,該函式省略了乙個引數context,即 sele...

PHP開發之問題記錄

header content type text html charset utf 8 新增一行 解決亂碼 echo 中文 ip server remote addr echo ip arr array array push arr,tt arr key1 value 新增帶鍵值的資料 echo t...