小白致力于成为前后端开发程序员

时间：2023-01-06 07:08:47

小白有个烦恼，做前端项目的时候，遇到两种情况
一种是在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不同的使用方式，再也没有了混乱的感觉！

相关文章