小白致力於成為前後端開發程式設計師

BOBO~發表於2023-01-05
後端程式設計師

小白有個煩惱，做前端專案的時候，遇到兩種情況
一種是在vue框架下，使用HTML寫頁面，script部分程式碼裡面的方法基本上使用JS來寫；
一種同樣在vue框架下，透過安裝的框架來構建頁面，script中使用的方法也多是安裝的框架中封裝好的方法。
小白是個倒黴催的孩子，負責的專案比較多，常常在兩種情況下切來切去，以至於在寫JS處理資料時，常常用不對方法，
再加上小白JS基礎本來就不雄厚，常常花費很長時間處理一個JS問題，這還是透過搜尋解決的。
於是小白就想寫一點總結的內容，把遇到的點滴問題記錄下來，逐步增加處理VUE中JS的方法
那麼第一個問題就寫JS物件處理吧。

1.物件屬性的刪除

1   let object = {key:value,key1:value1}
2   this.$delete(this.object, 'key')
3   或者 delete this.object[key]

2.判斷是否存在某屬性

1   let object = {key:value,key1:value1}
2   this.object.hasOwnProperty('key')

第二個問題寫JQuery陣列處理
1.陣列物件的刪除

1   let array = []
2 　delete this.array[index]

2.陣列物件的查詢

1   let array = [{field:v1},{field:v2}]
2   let index = this.array.findIndex(a => a.field == 'v2')
3   let item = this.array.find(a => a.field == 'v1')

這邊需要注意一個方法：remove，remove方法應該是JQuery用於處理刪除html元素的，在處理資料時不應考慮

3.陣列的批次刪除

1   let array = ['mark', 'go', 'C#']
2   this.array.splice(index, num)

4.最後一個問題不是一個JQuery的問題，而是一個關於CSS的問題，記錄下來一是因為對於CSS真的會的不多，一是覺著這個問題應該會普遍。
就是input type='date'的html時間控制元件，只能點選一個小圖示選擇日期，透過修改CSS使可點選範圍擴大到選擇的時間，不多說直接上CSS程式碼

 1     input[type="date"]::-webkit-calendar-picker-indicator {
 2         background: transparent;
 3         bottom: 0;
 4         color: transparent;
 5         cursor: pointer;
 6         height: auto;
 7         left: 0;
 8         position: absolute;
 9         right: 0;
10         top: 0;
11         width: auto;
12     }

經過梳理小白發現整理的都是最基礎的問題，也瞭解了本質是自己對JQuery掌握不熟練才會有混亂的感覺，才會不知道如何去用方法處理資料。
事實上，NodeJs是在JS的基礎上開發出來的，只要掌握JS JQuery的方法，直接拿到開發VUE中同樣是可以使用的，不管VUE如何封裝，
如何包裝方法，其本質是不會變的，就是在JS和html的基礎上做了封裝。雖然小白整理的方法都很基礎，但是透過整理小白發現了本質，解決了困惑這個才是最重要的。

關於掌握不熟練有混亂的感覺，小白想起來在學習 go 的時候，碰到各種列印方法——Print、Fprint、Sprint，同樣會有混亂的感覺。好在 Go 的所有原始碼在安裝好Go後都會在安裝目錄中找到，
於是小白檢視了fmt包中的 print.go 的原始碼並對其中的Print的方法做了筆記和整理，下面是小白整理的筆記：

透過檢視包fmt中的print.go檔案，查詢到print的相關方法有：
Fprintf、Printf、Sprintf、Fprint、Print、Sprint、Fprintln、Println、Sprintln
print.go檔案中有以上9個方法的具體實現，在這僅僅做一下總結，想看原始碼就直接開啟print.go檔案檢視即可

 1         1.Fprintf 方法簽名：Fprintf(w io.Writer, format string, a ...interface{}) (n int, err error)
 2                   具體使用：甲：n, err := fmt.Fprintf(os.Stdout, "%s is %d years old.\n", name, age)，返回寫的位元組數和是否有錯誤
 3                           乙：fmt.Fprintf(os.Stderr, "Fprintf: %v\n", err)，其中返回值也可以忽略    
 4 
 5         2.Fprint   方法簽名：Fprint(w io.Writer, a ...interface{}) (n int, err error)
 6         
 7         3.Fprintln 方法簽名：Fprintln(w io.Writer, a ...interface{}) (n int, err error) 列印到指定輸出並換行
 8         
 9         4.Printf   方法簽名：Printf(format string, a ...interface{}) (n int, err error)
10                    具體使用：fmt.Printf("%d bytes written.\n", n) 
11                    內部呼叫Fprintf並指定標準輸出
12         
13         5.Print    方法簽名：Print(a ...interface{}) (n int, err error)
14                    內部呼叫Fprint並指定標準輸出
15         
16         6.Println  方法簽名：Println(a ...interface{}) (n int, err error)
17                    內部呼叫Fprintln並指定標準輸出
18         
19         7.Sprintf  方法簽名：Sprintf(format string, a ...interface{}) string                
20         
21         8.Sprint   方法簽名：Sprint(a ...interface{}) string
22                    具體使用：s := fmt.Sprint(name, " is ", age, " years old.\n")
23                 
24         9.Sprintln 方法簽名：Sprintln(a ...interface{}) string
25                    具體使用：s := fmt.Sprintln(name, "is", age, "years old.")
26                    使用其運算元的預設格式格式化並返回結果字串。運算元之間總是新增空格並附加換行符。
27         
28         區別：1.F 開頭輸出到指定輸出，S 開頭返回字串，P 開頭輸出到標準輸出
29              2.f 結尾，指定格式化方式格式化字串，t 結尾，使用運算元預設的格式化方式，ln 結尾，使用運算元預設的格式化方式，並換行

 透過這次整理，小白完全弄清楚了Print不同的使用方式，再也沒有了混亂的感覺！

相關文章