JS笔记
JS
书写位置
-
行内式，在标签内书写JS代码
-
内嵌式，页面打开时直接触发，可以放在head中也可以放在body中
<script> alert("弹出窗口") </script> -
外链式，外部js文件引入html，一个页面可以引入多个js文件
<script src="JS/Test1.js"></script>
注释及规范
注释：单行用//内容，多行/**/，快捷键Ctrl+/
规范：一句代码后面不建议加；，一般直接换行
变量
var 变量名=值
命名规则：
- 可以由数字、字母、英文下划线、美元符号组成
- 严格区分大小写
- 不能由数字开头
- 不能是 保留字 或 关键字
- 不要出现空格
规范：
- 变量名尽量有意义
- 驼峰命名规则
- 不要使用中文
数据类型
分为 基本数据类型 和 复杂数据类型
基本数据类型
在控制板内输出:console.log(内容)
- Number，在控制板内蓝色显示，包括整数，浮点数，科学记数法例如2000= 2e3，十六、八进制数,NaN意为不是数字(转换失败时的值)
- String，在控制板内黑色显示，定义时需"内容"，
- Boolean,值只有true和false，控制板内蓝色显示
- Undefined，即声明后未赋值的变量
- Null，未来存储对象时初始赋值
- Symblo（ES6之后）
检测数据类型：console.log(typeof 变量)
类型转换
转换为数值:
- Number(变量)，可以转小数并保留小数，可以转布尔值，不可转换时返回NaN
- parseInt(变量),从第一位开始检查，直到不是数字为止，不识别小数点，只保留整数，开头就不是数字时返回NaN
- parseFloat(变量),从第一位开始检查，直到不是数字为止，识别一次小数点，开头就不是数字时返回NaN
- 除了加法以外的数学运算,运算符两边都是可运算数字才行，有一边不是则返回NaN
转换为字符串：
- 变量.toString()，有一些数据类型不能用，例如 undefined 和null
- String(变量)，所有数据类型都可以
- 任意一边是字符串的加法运算，会进行字符串拼接
转换为布尔：
- ’ ‘、0、null、undefined、NaN，这些是false
- 其余都true
复杂数据类型:
- 函数
- 对象
- 数组
函数
声明式函数：function 函数名(){代码}，函数名遵守变量名的命名规则，调用可以在定义之前或定义之后
赋值式函数：var 函数名 =function(){代码}，调用只能在定义之后
预解析
js代码在运行的时候，会经历解释代码和执行代码两个环节，先通读和解释之后再执行。
解释代码：需要解释的内容有两个
- 声明式函数
- var 关键字
在具体内容填写前就可以使用这两个，函数会在执行前解释，而var变量则会显示undefined
仅限同标签下，预解析时，同名函数或变量后写的会生效，而变量和函数同名时，变量生效。
对象
<script>
var obj={
name:"zhangsan",
age:100,
}
</script>
向对象中添加成员
<script>
var obj1 ={}
obj1.name ='lisi'
obj1.age =18
</script>
内置构造函数Object()创建对象
<script>
var obj2=new object()
obj2.name ='wangwu'
obj2.age =20
</script>
删除对象内容delete
<script>
var obj2=new object()
obj2.name ='wangwu'
obj2.age =20
delete obj2.name
</script>
遍历对象
for(var i in obj1){
console.log(obj1[i])
}
当进行对象直接赋值时，修改赋值的对象，原对象也会发生变化
<script>
var obj1 ={}
obj1.name ='lisi'
obj1.age =18
var obj0=obj1
obj0.name="abc"
</script>
此时obj1和obj0的name都是abc，这是因为简单类型存在栈中，复杂类型存在堆中，此时栈中存的是obj1在堆中的地址，obj0=obj1这一步代表着复制obj1的地址。
另外如果var obj1={"name:zhangsan"};var obj0={"name:zhangsan"}此时让他们比较，无论是=还是都会得到false，也是因为堆内地址的不同
正确的复制对象方式
<script>
var obj1 ={}
obj1.name ='lisi'
obj1.age =18
var obj0={}
for(var i in obj1){
obj0[i] =obj1[i]
}
</script>
数组
var 变量名=[内容] or var 变量名 = new Array(内容)，在第二个方法中，如果只输入一个整数，则是代表开一个大小为N的数组，内容未定
基本操作
数组长度获取：数组名.length
清空数组：数组名.length=0
扩大数组：例如扩大一个大小为3的数组arr，直接arr[3]=内容，此时arr的大小为4
常用方法
-
push在数组末尾追加一个元素，例如：arr.push(4)，其返回值是长度
-
pop删除数组末尾的一个元素，例如：arr.pop()，其返回值是删除的元素
-
unshift在数组前面追加一个元素，例如：arr.unshift("tiechui"),其返回值是长度
-
shift在数组前面删除一个元素，例如：arr.shift(),其返回值是删除的元素
-
splice删除：
<script> var arr=[1,2,3] var ressplice = arr.splice(1,2) //删除arr的下标为1开始的2个数 console.log(arr) //[1] console.log(ressplice) //此时ressplice为[2,3] </script> -
splice添加：当第二个数为0时即可只添加不删除
<script> var arr=[1,2,3] var ressplice = arr.splice(1,2,4) //在删除的基础上添加4 console.log(arr) //[1,4] console.log(ressplice) //[2,3] </script> -
resver 倒序：arr.reverse()
-
sort排序,接受一个回调函数:
<script> var arr=[7,1,2,3] arr.sort(function(a,b){ return a-b //此处为从小到大排序，若返回b-a就是从大到小排序 }) console.log(arr) </script>
以下常用方法不会影响原数组
- concat拼接，返回值即为拼接的结果：var arr3 = arr1.concat(arr2),可以作为复制数组的方式，不会影响原数组
- join数组转字符串,返回值为转字符串后的结果：arr.join(“连接方式”)，例如连接方式为-，则[1,2,3]转为1-2-3
- slice截取，返回值为截取结果：arr.slice(开始索引，结束索引)，不填索引可实现复制功能
- indexOf查找，返回值为所查找的元素的索引，如果没有则返回-1，arr.indexOf("查找内容")
- lastIndexOf从后面开始查找，返回值和使用同indexOf
数组去重：可以用对象或indexOf，但最常用的是使用Set
<script>
var arr=[1,2,3,3,5,5,6,6]
var set1=new Set(arr)
var arr1=Array.from(set1)
</script>
以下方法需要回调函数：
-
forEach遍历
-
<script> var arr=["aaa","bbb","ccc"] arr.forEach(function (item,index){ //item为值，index为索引 console.log(item,index) //结果为aaa 0 bbb 1 ccc 2 }) </script> -
map 映射，可以用于拼接字符组成html标签，例如："
- "+a+"
- "
-
<script> var arr=[1,2,3,4,5] var arr1=arr.map(function (item) { return item*item }) console.log(arr1) //得到[1, 4, 9, 16, 25] </script> -
filter过滤
-
<script> var arr=[{name:"a",price:100},{name:"b",price: 200},{name:"c",price: 300}] var arr1=arr.filter(function (item) { return item.price>150 }) console.log(arr1) //这里得到的就是name为b,c的对象 </script> -
every 每一项都满足，返回值为true或false
-
<script> var arr=[{name:"a",price:100},{name:"b",price: 200},{name:"c",price: 300}] var arr1=arr.every(function (item) { return item.price>150 }) console.log(arr1) //false </script> -
some 只要有一项满足条件即可，返回值为true或false
-
<script> var arr=[{name:"a",price:100},{name:"b",price: 200},{name:"c",price: 300}] var arr1=arr.some(function (item) { return item.price>150 }) console.log(arr1) //true </script> -
find 查找，返回满足条件的第一项的内容，而filter返回的是数组结构
-
<script> var arr=[{name:"a",price:100},{name:"b",price: 200},{name:"c",price: 300}] var arr1=arr.find(function (item) { return item.price===200 }) console.log(arr1) </script> -
reduce 叠加
-
<script> var arr=[1,2,3,4,5] var arr1=arr.reduce(function (prev,item) { //prev是上一项 return prev+item },0) //0位初始值，可以令初始值为" "的字符串来得到字符串拼接 console.log(arr1) //15 </script>
字符串
创建方法：
- 字面量：var str ='hello'
- 构造函数创建: var str = new String('hello')
以下操作均不能改变字符串：
- str1.length=0
- str1[1]="a"
字符串常用方法
-
charAt(索引)：返回索引对应的字符,例如:var str1=str.charAt(0)
-
charCodeAt(索引):返回索引对应的字符编码
-
利用字符编码快速生成A-Z：
-
<script> var arr=[] for(var i=65;i<91;i++) { arr.push(String.fromCharCode(i)) } console.log(arr) </script> -
toUpperCase():返回该字符串全部转为大写后的字符串
-
toLowerCase():返回该字符串全部转为大写后的字符串
-
substr(开始索引,长度)，substring(开始索引,结束索引),slice(开始索引,结束索引)：截取，返回值为截取的结果
-
replace(替换前的字符，替换后的字符)：返回替换后的字符串，只能替换遇到的第一个需要替换的字符
-
split(分割标识符)：返回一个分割后的数组
-
indexOf(需要查找的字符,从第几个开始)：从前往后查找，返回查找到的字符索引，可以不写从第几个开始
-
lastIndexOf(需要查找的字符,从第几个开始)：从后往前查找，返回查找到的字符索引，可以不写从第几个开始
-
concat(连接的字符串):返回连接后的字符串
-
trim():去掉首尾空格
-
trimStart(),trimLeft():去掉首空格
-
trimEnd(),trimRight():去掉尾空格
json格式字符串转对象：
<script>
var str='{"name":"a","age":18}'
console.log(str)
var obj=JSON.parse(str)
console.log(obj)
</script>
对象转JSON数据：
<script>
var obj={"name":"a","age":18}
console.log(obj)
var str=JSON.stringify(obj)
console.log(str)
</script>
使用``可以使字符串在源代码中多行显示
<script>
var str=`<li>ab</li>
<li> cd</li>
<li> ef</li>`
document.write(str)
</script>
在字符串中使${变量}可以直接作为变量使用其内容：
<script>
var str1="bc"
var str2=`a ${str1}`
console.log(str2)
//a bc
</script>
数字常用方法
- toFixed保留小数:返回保留小数后的字符串结果：price.toFixed(2) 对price保留两位小数，如果要进行数学运算，需要先-0转换为浮点数类型
- Math.random生成0-1随机数
- Math.round四舍五入取整
- Math.ceil向上取整
- Math.floor向下取整
- Math.abs取绝对值
- Math.sqrt平方根
- Math.pow(底数,指数) 幂运算
- Math.max取最大值
- Math.min取最小值
- Math.PI圆周率
时间对象
-
new Date()默认返回当前时间，传时间参数就返回输入的时间，传一个参数则返回距离1970/1/1的参数时间，两个以上则分别表示年/月/日 小时/分钟/秒，月份输入0代表1月以此类推
-
<script> var time=new Date() console.log(time) var time1=new Date('2023-1-7 12:00:21') console.log(time1) </script>
时间对象常用方法
- getFullYear()返回当前年
- getMonth()返回当前月，0-11对应1-12月
- getDate()返回当前日
- getDay()返回当前星期几，周日返回0，1-6对应周一到周六
- getHours(),getMinutes(),getSeconds(),getMilliseconds()返回当前小时，分钟，秒，毫秒
- getTime()生成时间戳，即距离1970/1/1的毫秒数
- 将以上方法的get改为set即可设置年月日，时分秒，时间戳，周几不能设置
定时器
注册定时器为异步代码，要等同步代码加载完才加载
倒计时定时器：
setTimeout(要执行的函数,多长时间以后执行)，注册倒计时定时器，返回值为定时器的序号
clearTimeout(定时器)清除倒计时定时器
间隔定时器：
setInterval(要执行的函数,隔多久执行一次)，注册间隔定时器，返回值为定时器的序号
clearInterval(定时器)清除间隔定时器
BOM
浏览器对象模型，其核心就是window对象，window是浏览器内置的一个对象
window的方法：
- innerHeight,innerWidth:获取窗口的高和宽
- alert(内容):弹出窗口
- confirm(内容):询问框，返回值为true和false
- prompt(显示内容):输入框，返回值为输入的内容，是字符串
以上方法会阻塞代码执行
-
onload:页面所有资源加载完毕后执行，示例：
-
<script> window.onload =function (){ alert("页面已经加载完毕了") } </script> -
onresize:窗口大小改变时执行，使用方式同上
-
onscroll:窗口滚动条滚动时执行,使用方式同上
-
document.documentElement.scrollTop或document.body.scrollTop:获取页面垂直滚动了多少px,前者在低版本浏览器无法使用，使用示例：
-
<script> window.onscroll =function (){ console.log(document.documentElement.scrollTop||document.body.scrollTop) } //这是为了保证在任何版本浏览器中能够被使用 </script> -
document.documentElement.scrollLeft或document.body.scrollLeft:获取页面水平滚动了多少px,使用方法同获取垂直距离
-
scrollTo(垂直距离,水平距离/距离对象):跳转到页面对应的位置，使用示例：
-
<body> <button id="btn">回到顶部</button> <script> btn.onclick=function () { window.scrollTo(0,0) } </script> </body> -
<body> <button id="btn">回到顶部</button> <script> btn.onclick=function () { window.scrollTo( { left:0, top:0 } ) } </script> </body> -
open(地址):在空白页中打开一个地址
-
close()：关闭当前页面
window.history的方法:
- back():退回到上一个页面，相当于浏览器中的←
- forward():去到下一个页面，相当于浏览器中的→
- go(数量):前进或后退数个页面，当值为-1时，与back等价
window.location的方法：
- href:获取地址，给它赋值一个地址则会跳转页面
- reload:刷新页面
window.localStorage的方法：
- setItem(“Key”,"Value"):在浏览器本地存数据，只能存字符串类型
- getItem(“Key”):在浏览器本地取数据
- removeItem("Key"):删除一个浏览器本地数据
- clear():清除浏览器本地的所有数据
浙公网安备 33010602011771号