小白致力于成为前后端开发程序员 - BOBO~
source link: https://www.cnblogs.com/pocn/p/16857245.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
小白致力于成为前后端开发程序员
小白有个烦恼，做前端项目的时候，遇到两种情况
一种是在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不同的使用方式，再也没有了混乱的感觉！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK