本篇笔记是为整理本人的JS学习进度以及后续复习所准备的,在编写上可能还不熟练,如果有看不懂的,可以在本篇文章下面留言!或者前往下面的在线工具进行答疑

在线学习网站:菜鸟教程首页 / 在线编程工具

签到:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
2025.05.25 16.00: "clock on" =001 js实操

2025.05.24 17.46: "clock in" =116 js基础
2025.05.17 15.46: "clock in" =103 js基础
2025.05.15 15.46: "clock in" =099 js基础
2025.04.29 12.46: "clock in" =092 js基础
2025.04.28 23.46: "clock in" =087 js基础
2025.04.27 22.46: "clock in" =086 js基础
2025.04.26 16.46: "clock in" =084 js基础
2025.04.19 15.46: "clock in" =080 js基础
2025.04.17 13.46: "clock in" =078 js基础
2025.04.14 16.46: "clock in" =050 js基础
2025.04.12 15.46: "clock in" =040 js基础
2024.09.01 12:00: "clock in" =001 js基础

JS笔记列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
# |注意:本篇笔记存在一些自定义格式,请详细阅读下面说明,否则可能会产生语法上的理解错误和歧义!!
# |说明:"本页面js基础笔记的代码格式为:" [#]+[函数名称]+[函数格式]+[代码环境:js[>:|]+[备注]
# |说明:"本页面的代码格式举例代码:" [全局变量][var] js[>:| var ttt = 0 //这里是备注
# |说明:"???[????>:为引入脚本所需标签环境:其中???为文档类型(如css,html);"[????为"下级标签,">"为进入下一级或为空"
# |说明:"ttt"处为JS自定义文本,常用于属性或变量的自定义命名
# |说明:"hhh"处为JS自定义函数文本,用于函数的自定义命名
# |说明:"<???>"处为备注文本,并不算在代码中

# |脚本引入方式:
# |[内联式引入] html[body>:|<script var ttt = 0: //在html文档的body的script标签里直接写入js
# |[外部引入] html[body>:| <script src="./xx.js"></script> //在html文档的body的script标签内引入外部js表
=============================================================================================================

# -------------------------------------------------------------------------------------------------------

# [全局变量-函数作用域][var] js[>:| var ttt = 0 //组成:(字母+美元符号💲+下划线+数字)
# [局部变量-块级作用域][let] js[>:| let ttt = 0 //组成:(字母+美元符号💲+下划线+数字)
# [局部常量-块级作用域][const] const ttt = 0 //组成:(字母+美元符号💲+下划线+数字)

# [变量提升][console.log] js[>:| console.log(ttt);var ttt = 0 //先打印后声明:此处"ttt"未进行定义,浏览器执行顺序:定义"ttt"空值,打印"ttt",定义"ttt"为"0"
# [输出结果-后台][console.log()] js[>:| console.log(ttt)
# [输出结果-弹窗][alert()] js[>:| alert("ttt")
# [输出结果-页面][document.write()] js[>:| document.write("ttt")

# [数据类型-常规][...] js[>:| var ttt = 00<数值型>/"00"<字符串>/true<布尔类型,true或false>
# [数据类型-合成][...] js[>:| var ttt = {ttt1:00<数值型> ttt2:"00"<字符串> ttt3:true<布尔类型>}
# [数据类型-空值][...] js[>:| var ttt = null<空值>/undefined<尚未赋值> //"null"代表对象为"没有","undefind"代表数值为"没有"
# [数值类型-判断][typeof] js[>:| a= typeof ttt; //判断ttt:如果为数字返回number,如果为字符串返回string,如果为布尔类型返回boolean;如果为对象返回object

# [数值运算-常规][...] js[>:| a= ttt1 + ttt2 //直接计算ttt1与ttt2并赋值a,"+"可以为其他任意运算符*
# [数值运算-增减][...] js[>:| a= ++ttt1 //++为自增数值+1;--为自减数值-1*
# [数值运算-赋值][...] js[>:| var ttt = 00 //为ttt赋值00
# [数值运算-变体][...] js[>:| var ttt1 += ttt2 //等同于ttt1=ttt1+ttt2,"+"可以为其他任意运算符
# [数值运算-比较][...] js[>:| a= ttt1 > ttt2 //ttt1与ttt2进行比较,返回结果true或false
# [数值运算-取反][...] js[>:| a= !ttt1 //对ttt进行取反;注意:ttt = "undefined,null,false,0,NaN"等值时返回结果为flase,其他为true
# [数值运算-条件-且][...] js[>:| a= ttt1 < ttt2 && ttt1 = ttt2 //对ttt1与ttt2进行条件判断,同时满足所有条件时返回true,否则返回flase
# [数值运算-条件-或][...] js[>:| a= ttt1 < ttt2 || ttt1 = ttt2 //对ttt1与ttt2进行条件判断,满足其中一个条件时返回true,一个都没有则返回flase

# [判断语句-单条件][if(){}] js[>:| if(ttt1 == ttt2){...} //如果ttt1==ttt2为true则执行"..."中的内容,否则不执行
# [判断语句-多条件][if(){}else] js[>:| if(ttt1 == ttt2){...1}else{...2} //if嵌套的简化版变体语句:如果ttt1==ttt2为true则执行"...1"中的内容,否则执行"...2"的内容
# [判断语句-多条件][...] js[>:| ttt1 == ttt2 ? ...1 : ...2 //三目运算:if嵌套的超简化版语句格式:如果ttt1等于ttt2,则执行"...1",否则执行"...2"
# [判断语句-多条件][switch(){case;break}] js[>:| switch(ttt){case a: ...1;break; case b: ...2;break; case c: ...3;break; default : ...4} //如果ttt为a时,执行"...1",如果为b时,执行"...2",如果为c时,执行"...3",以上都不满足时,执行"...4"
# [循环语句-单条件][for(){}] js[>:| for(初始化表达式;条件;迭代因子){...1} //"初始化表达式"为一个初始值,"条件"为循环要达到的目标,"迭代因子"为每轮循环所要执行的操作,直到初始值达到"条件"设定的目标为止,"...1"为要循环的公式
# [循环语句-单条件][while(){}] js[>:| while(条件){...1;} //此语句"初始化表达式"可以写在while前面,"条件"为循环要达到的目标,"...1"为要循环的公式
# [跳过本轮循环][{break}] js[>:| for(初始化表达式;条件;迭代因子){...1;break} //在原有循环语句中"...1"处添加"break"以来跳出整个循环
# [终止本轮循环][{continue}] js[>:| for(初始化表达式;条件;迭代因子){...1;break} //在原有循环语句中"...1"处添加"continue"以来终止本轮循环,并返回头部进行下一轮循环

# [数值-查询][length] js[>:| a= ttt.length //获取ttt的数值长度或子集个数并赋值a
# [获取指定位置数值][charAt()] js[>:| a= ttt.charAt(?) //从数值左边第0个开始数,获取ttt的第?个数值赋值a
# [数值合并-不运算][concat()] js[>:| a= ttt1.concat(ttt2,ttt?) //连接ttt1,ttt2和ttt?并合并,赋值a
# [数值合并-运算][...] js[>:| a= ttt1+ttt2 //ttt1和ttt2合并,如果有数字类型先进行运算再转为字符串后合并,赋值a
# [数值截取-1][substring()] js[>:| a= ttt.substring(?1,?2) //从数值左边第0个开始数|获取ttt的第?1个数值和?2数值之间的所有数值并进行合并,赋值a,获取不包含?1和?2数值本身|如果仅有?1则返回?1后面所有数值
# [数值截取-2][substr()] js[>:| a= ttt.substring(?1,?2) //数值从左边第0个开始数|在ttt中获取从?1开始往后数?2个的数值,赋值a(?1如为负数则从后往前数);获取不包含?1和?2数值本身|如果仅有?1则返回?1后面所有数值
# [数值查找][indexOf()] js[>:| a= ttt.indexOf("?1",?2) //查找ttt中是否存在?1数值,存在则返回对应下标|?2是查找开始位置
# [清除前后空格][trim()] js[>:| a= ttt.trim() //清除ttt前后存在的空格
# [清除头部空格-ES6+][trimStart()] js[>:| a= ttt.trimStart() //清除ttt头部存在的空格
# [清除尾部空格-ES6+][trimEnd()] js[>:| a= ttt.trimEnd() //清除ttt尾部存在的空格
# [数值分割-部分][split(|)] js[>:| a= ttt.split("|",?) //"ttt=?1|?2|?3";将ttt分割成"?1","?2","?3"并合并为一个数值数组['?1','?2','?3']赋值a|"?"为从左数第?个数值处停止分割,不填则不停止
# [数值分割-全部][split()] js[>:| a= ttt.split(" ") //"()"为空时,分割ttt中的每一个数值并组成一个数组

# [数组-array][...] js[>:| var ttt = ["?1","?2","?3","?4"] //定义ttt为一个数组,结构:["?1","?2","?3"],"?1"下标为0,"?2"下标为1,"?2"下标为2|"?"可以为任意类型数据
# [数组-遍历][...] js[>:| for(var i=0;i<ttt.lenget;i++){a= ttt[i]} //获取ttt数组中的所有元素:"var定义i从0开始遍历","ttt.lenget获取数组长度,i<ttt.lenget定义i的遍历次数(次数已由lenget获取)","i++定义每次遍历i的下标序列进一位"
# [数组-判断][Array.isArray()] js[>:| a= Array.isArray(ttt) //a:true是数组,flase不是数组
# [数组-增加尾][push()] js[>:| a= ttt.push("?1","?2,"..."") //在数组ttt的末端添加一个新元素"?1",并返回ttt的数组长度
# [数组-删除尾][pop()] js[>:| a= ttt.pop() //在数组ttt的末端删除一个元素,并返回ttt的数组长度
# [数组-删除头][shift] js[>:| a= ttt.shift //在数组ttt的头部删除一个元素,并返回删除的元素
# [数组-增加头][unshift()] js[>:| a= ttt.unshift("?1","?2,"..."") //在数组ttt的头部添加一个新元素"?1",并返回ttt的数组长度
# [数组-遍历清空][shift] js[>:| while(ttt1 = ttt2.shift()){console.log(ttt1)} //
# [数组-元素组合][join] js[>:| a= ttt.join() //将一个数组中的所有元素合并成一个字符串|join括号内规范:join()逗号隔开;join(|)分割号隔开;join("")不隔开;join(" ")空格隔开
# [数组-翻转排列][reverse] js[>:| a= ttt.reverse() //将ttt中的数组进行倒序排列并赋值给a,此时ttt不变,此方法也可用于字符串的翻转
# [数组-元素查找][indexOf] js[>:| a= ttt.indexOf(?1,?2) //查找ttt数组中是否有?1元素,如果有返回对应下标,不存在返回-1|?2是查找开始位置

# [数组扩展ES6-展开符号][...]js[>:| (...a) a= [1,2,3,4]//...简单快速直接展开数组中的值
# [数组扩展ES6-运算符号替代][]js[>:| Math.max.apply(null,arr) ==> Math.max(...a) //令数组借用函数max找出已经展开的数组中的最大值
# [数组扩展ES6-类数组转换][]js[>:|

# [数据结构ES6-Set添加][set]js[>:| var ttt = new set() //类似于数组
# [数据结构ES6-Set-数组元素去重][set]js[>:| var ttt1=[1,2,3]|var ttt2 = new set(ttt1) //将ttt1数组中的重复数据进行去重并赋值给ttt2
# [数据结构ES6-Set-字符串字符去重][set]js[>:| var ttt1=[1,2,3]|a = ([...new set("abcabcdd")].join("")) //将ttt1中的重复字符进行去重并赋值给a
# [数据结构ES6-Set-数据判断][set]js[>:| var ttt = new set();ttt.add(100);ttt.add(200);ttt.delete(100);a=ttt;var ttt2=ttt.has(100);console.log(flag); //返回一个布尔值,判断该值是否为Set成员
# [数据结构ES6-Set-清除所有成员][clear]js[>:| var ttt = new set();ttt.add(100);ttt.add(200);ttt.delete(100);s.clear() //s.clear清除所有成员,没有返回值


# [函数-声明公式][function] js[>:| function + 函数名称(函数变量,函数变量) + {函数变量组成的公式} //函数一般读取方式:a= hhh(?1,?2),其中?1?2可以为任意数值
# [函数-参数模板][function] js[>:| function hhh(?1+?2){ttt ?1+?2} //函数一般读取方式: a= hhh(?1,?2),其中?1?2可以为任意数值
# [函数-参数引入][function] js[>:| function hhh(?1,?2){ttt ?1+?2} //{"ttt ?1+?2"后不能有计算,否则不执行}|函数一般读取方式: a= hhh(?1,?2),其中?1?2可以为任意数值
# [函数扩展ES6-箭头函数][=>]js[>:| var hhh = function(x,y){return x+y;} ===》var hhh =(x,y)=> x+y //相当于=>替代了function

# [对象-声明调用][key-value] js[>:| var ttt={ttt1:?1,ttt2:?2} //ttt内可以包含多个不同类型数据|对象一般读取方式: a= ttt.ttt1|对象链式读取方式: a= ttt.ttt1.ttta
# [对象扩展ES6-简洁表示法][]js[>:| return {x=1, y=2} ===> function getPoint(){const x=1;const y= 10;return {x, y};}getPoint() // {x:1,y:10}//这种写法用于函数的返回值,将会非常方便

# [数学-绝对值][Math.abs] js[>:| a= Math.abs.ttt //ttt转换为正数
# [数学-最大值][Math.max] js[>:| a= Math.max.ttt //ttt中取最大值
# [数学-最小值][Math.min] js[>:| a= Math.min.ttt //ttt中取最小值
# [数学-向下取整][Math.floor] js[>:| a= Math.floor.ttt //小数抹去
# [数学-向上取整][Math.ceil] js[>:| a= Math.ceil.ttt //小数抹去,进一位
# [数学-伪随机小数][Math.random] js[>:| a= Math.random() //随机生成0-1之间的数,不包括1本身
# [数学-伪随机整数][function getRandomArbitrary()] js[>:| function getRandomArbitrary(min,max){var hhh = Math.random()*(max-min)+min} //随机生成min-max之间的整数|函数一般调用方式: getRandomArbitrary(?1,?2)

# [时间-系统时间][data] js[>:| console.log(Data.now()) //获取当前时间栈|转换方法:a= new Data()| getTime():返回实例距离1970年1月1日00:00:00的亳秒数

# [仓库盒子][container] js[>:| container.

# //-------------------------------------------------------------------------------------------------------
# //DOM概述
# [文档获取-document][document] js[>:| a= document //获取整个网页文档并赋a
# [元素获取-标签][document.getElementsByTagName("")] js[>:| a= document.getElementsByTagName("ttt") //通过网页标签获取ttt元素并赋值a
# [元素获取-class][document.getElementsByClassName("")] js[>:| a = document.getElementsByClassName("ttt"); //获取class选择器的ttt元素并赋值a
# [元素获取-name][document.getElementsByName("")] js[>:| a= document.getElementsByName("ttt") //获取name选择器的ttt元素并赋值a
# [元素获取-id][document.getElementsById("")] js[>:| a= document.getElementsById("ttt") //获取Id选择器的ttt元素并赋值a
# [元素获取-H5新增][document.querySelector()] js[>:| a= document.querySelector(".ttt") //此方法仅获取选择器指定id的元素,赋值a
# [元素获取-H5新增][document.querySelectorAII()] js[>:| a= document.querySelectorAII(".ttt") //此方法仅获取选择器指定id的全部元素-成数组,赋值a

# [元素放置][.appendChild()] js[>:| ttt1.appendChild(ttt)的作用是把ttt标签放入ttt1标签中

# [元素创建-生成节点][createElement] js[>:| a= document.createElement('ttt') //生成元素标签并赋值a
# [元素创建-成成文本][createTextNode] js[>:| a= document.createTextNode('ttt') //生成元素文本并赋值a
# [元素创建-生成属性][createAttribute] js[>:| a= document.createAttribute('ttt') //生成元素属性并赋值a

# [元素操作-id更改][.id] js[>:| ttt1.id = "ttt2" //将ttt1的id改成ttt2
# [元素操作-添加样式][.className] js[>:| ttt.className = "ttt1 ttt2" //将ttt1和ttt2的样式赋值给class名称为ttt的元素
# [元素操作-添加或删除] [.classList] js[>:| ttt1.classList.add("ttt2")//添加或删除元素属性|可选属性:".add()"增加一个属性,".remover()"移除一个属性,".cintains()"检查当前元素是否包含某个属性,".toggle()"如果元素存在则移除,不存在则添加
# [元素操作-标签读取][.innerHTML] js[>:| ttt.innerHTML //读取ttt中的内容,可以识别标签
# [元素操作-文本读取][.innerText] js[>:| ttt.innerText //读取ttt中的内容,不支持识别标签,会把标签识别为一个字符串

# [位置获取-元素位置][Element.clientHeight, Element.clientWidth] js[>:| a= Element.clientHeight.ttt //获取ttt的元素高宽
# [位置获取-视口高度][document.documentElement.clientHeight] js[>:| a= document.documentElement.clientHeight //获取网页当前的可见高度(屏幕高度)
# [位置获取-网页高度][document.body.clientHeight] js[>:| a= document.body.clientHeight //获取网页的页面总高度
# [位置获取-滚动高度][document.documentElement.scro1lTop] js[>:| a= document.documentElement.scro1lTop //获取网页的上下滚动条的距离

# [CSS操作-网页style][setAttribute] js[>:| ttt.setAttribute("style""ttt1;ttt2;ttt3") //为网页内"style"中的ttt添加ttt1,ttt2,ttt3样式
# [CSS操作-元素style][.style] js[>:| a= document.querySelector("ttt").style //获取ttt元素,并通过.tyle修改ttt的样式,赋值a | 修改方法:box.style.width="??px";
# [CSS操作-cssText][csstext] js[>:| a= document.querySelector("ttt").style //获取ttt元素,并通过.tyle修改ttt的样式,赋值a | 修改方法:box.style.csstext ="width:??px;height:??px;

# [事件方式-HTML事件][onclick] js[>:|function hhh1(){a=1+2} http[button>:|<onclick>=:"hhh1" //使用function函数生成hhh1函数,在button中引入hhh1函数,当点击按钮后会执行hhh1函数中的内容
# [事件方式-DOM0级事件][onclick] js[>:|var ttt=document.getElementsById("ttt"); ttt.onclick=function(){a=1+2} //注释:("ttt")为id选择器声明变量|获取ttt内容并将其赋值给ttt.|ttt.onclick=function(){a=1+2}是指:函数内容赋值给ttt,onclick(鼠标点击)事件执行函数内容
# [事件方式-DOM2级事件][addEventListener] js[>:|var ttt=document.getElementsById("ttt"); ttt.addEventListener("click",function(){a=1+2} //注释:("ttt")为id选择器声明变量|获取ttt内容并将其赋值给ttt.|ttt.addEventListener("click",function(){a=1+2}是指:函数内容赋值给ttt,onclick(鼠标点击)事件执行函数内容

# [事件对象-Event-属性][Event.Target] js[>:|var ttt=document.getElementsById("ttt"); ttt.onclick = function(event){Event.Target.innerHTML="0"} //event返回事件当前所在节点参数|点击ttt按钮后同时用innerHTML="0"改变ttt文本参数为0
# [事件对象-Event-查询][Event.type] js[>:|var ttt=document.getElementsById("ttt"); ttt.onclick = function(event){a= Event.type} //{a= Event.type}获取Event当前的事件类型并赋值a
# [事件对象-Event-阻止事件][event.preventDefault] js[>:|var ttt=document.getElementsById("ttt"); ttt.onclick = function(event){event.preventDefault} //阻止默认事件
# [事件对象-Event-阻止冒泡][event.stopPropagation] js[>:|var ttt=document.getElementsById("ttt"); ttt.onclick = function(event){event.stopPropagation} //阻止事件冒泡(阻止传播,防止触发其他节点监听函数,但不影响当前节点的监听函数)

# [事件操作-鼠标事件][click] js[>:| 事件注意选择合适的事件方式执行函数|可选择鼠标事件
on+
click:按下鼠标时触发
dblclick:在同一个元素上双击鼠标时触发
mousedown:按下鼠标键时触发
mouseup:释放按下的鼠标键时触发
mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时,该事件会连触发
mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件
mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件
wheel:滚动鼠标的滚轮时触发
# [事件操作-键盘事件][key] js[>:|
on+
keydown:按下键盘时触发
keypress:按下有值时的健触发
keyup:松开键盘时触发的事件
keycode:每个键唯一标识ASCII码 //"13"为回车ASCII码,用于确认并进行下一步
# [事件操作-表单事件][key] js[>:|
on+
input:内容输入改变时触发 //input事件当 <input>、<select>、<textarea>的值发生变化时触发,对于复选(<input type=checkbox>或单选框( <inputtype=radio>),用户改变选项时,也会触发这个事件
select:选中输入时内容触发
Change:内容完全输入或修改回车后触发,或内容失去焦点后触发
reset: 重置表单时触发,同时返回默认值 //发生的对象为fron
submit: 将数据提交至服务器时触发 //发生的对象为fron
# [滚动事件-][window.onscro1l = showTop] js[>:|window.onscroll=debounce(scrollHandle,ttt)//此处ttt可以是任意时间数量
# [事件操作-事件代理-delegation][...] js[>:|var ul= document.querySelector('ul');ul.addEventListener('click',function(event){3if(event.target.tagName.toLowercase()==='i'){/*some code*/}}) //由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理
# [定时器-延时执行-Setlnterval][...] js[>:|hhh(function(){console.1og("定时器"),1000) //指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器
# [定时器-间隔执行-Setlnterval][...] js[>:| //指定某个函数或某段代码间隔多少秒执行1次,无限次执行

# [防抖事件1-滚动时间检测][] js[>:|
|window.onscroll=debounce(scrollHandle,ttt)
|function debounce(ttt1,ttt2){var timer = null;return function(){if(timer){clearTimeout(timer)}timer = setTimeout(ttt1,ttt2)} //需要搭配滚动事件调整时间检测频率
|window.onscroll=debounce(scrollHandle,ttt)//此处ttt可以是任意时间数量
|function scrollHandle(){var scrollTop =document.documentElement.scrollTop;a=scrollTop;} //获取滚动信息并赋值给a
# [防抖事件2-节流函数][] js[>:|
|function throttle(ttt1,ttt2){var valid = true;return function(){if(!valid){return false;}valid = false;setTimeout(function(){ttt1();valid = true;})}}
|window.onscroll=scrollHandle
|function scrollHandle(){var scrollTop =document.documentElement.scrollTop;a=scrollTop;} //获取节流信息并赋值给a
|window.onscroll=debounce(scrollHandle,ttt)//此处ttt可以是任意时间数量

# [命令行指令集-CMD]:
|打开命令行窗口:"win+r"
|选择盘符:"盘符名"+"冒号"
|查看盘符及目录下文件与文件夹:"dir"
|清空命令行信息:"cis"
|进入文件夹或目录:"cd"
|快速补全:"tab"
|创建文件夹: "mkdir"
|查看历史输入过的命令:上下按键

# [解构赋值][...]:格式: const+{需要简化省略的词}=属性名称
# [遍历循环][...]js[>:|for (let i of 'ttt'){console.1og(i);}

# [字符串模板]://使用方法 a= ttta
|var ttt1 ="ttt1.com"
|var ttt2 ="ttt"
|var ttta = "<a href ='"+ ttt1 +"'>"+ ttt2 +"</a>" //传统动态代码结构
|var tttb =`<a href ="${ttt1}">"${ttt2}"</a>"`//字符串模板动态代码结构

# [字符串查查找]://使用方法 a= ttt.includes(???,?) /其中???是要在ttt中查找的字符串,?表示查找开始的位置
|includes():返回布尔值,表示是否找到了参数字符串
|startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
|endswith():返回布尔值,表示参数字符串是否在原字符串的尾部
# [字符串重复][repeat]js[>:| a= ttt.repeat(?)//返回一个新字符串,将原字符串重复?次
# [字符串补全][padStart(),padEnd()]js[>:| a= ttt1.padStart(?位数,'要补的参数')] //padStart(头部补全),padEnd(尾部补全)
# [字符串空格去除][trimStart(),trimEnd()]js[>:| a= ttt.trimStart() //trimStart(消除头部字符串空格),trimEnd(消除尾部字符串空格)
# [字符串下标索引][at]js[>:| ttt.at(?) //?表示的是第几个字符串的下标


# [promise-异步操作][promise]js[>:| const promise = new Promise{function(resolve, reject){}} //异步对象


# [Async-同步操作][Async]js[>:| function print(){setTimeout(() =>{console.1og(“定时器");},1000) console.1og("He11o");}
print() //Async可以将函数从异步操作变为同步操作

# [Class-类方法][Person]js[>:|class Person{constructor(name,age) ;{this.name = name;this.age = age} //创建类
# [constructor][constructor]js[>:| //类的默认方法,通过new命令生成对象实例时自动调用该方法。
# [Class-类属性][]js[>:|


# [MODULE语法-export-模块命令][export]js[>:|
|//export命令导出变量
|export var firstName ='sxt'
|export var lastName =itbaizhan';
|export var year = 2000;
|//export命令导出函数
|export function add(x,y){return x+y;}


# [MODULE语法-import-模块命令][impor]js[>:|//使用 expon 命令定义了模块的对外接口以后,其他js文件就可以通过 impor 命令加载这个模块
|// name.js
|export var firstName ='sxt';
|export var lastName ='itbaizhan';
|export var year =2000;
|//main.js
|import {firstName,lastName,year }from'./profile.js';
|//如果想为输入的变量重新取一个名字,impon 命令要使用as关键字,将输入的变量重命名
|// value.js
|export var value = 1;
|// main.js
|import {value as val }from'./value.js';
|//除了指定加载某个输出值,还可以使用整体加载,即用星号(·)指定一个对象,所有输出值都加载在这个对象上面
|// circle.js
|export function area(radius){return Math.PI *radius * radius;}export function circumference(radius){return 2 *Math.PI * radius;}

# [MODULE语法-exportdefault-模块命令][exportdefault]js[>:|//不用阅读文档就能加载模块,为模块指定默认输出。
|//export-default.js
|export defaut function(){console.1og('foo');}
|//其他模块加载该模块时,impon 命令可以为该匿名函数指定任意名字
|//import-default.js1
|import customName from'./export-default';customName();//'foo'

JS模块项目(待更新…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|//项目目录:-------------------------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
|//End-------------------------------------------------------------------------------------------------------

# //---------------------------------------------------------------------------------------------------------
|项目"我的第一个网页"|环境"HTML>"|引用"HEX.CSS"|练习内容"Var,Couse,Let"

|//End-------------------------------------------------------------------------------------------------------


































```