13 KiB
13 KiB
JS基础
输入输出语句
alert('页面弹出警示框')
document.write('页面打印输出')
console.log('控制台打印输出')
prompt('输入对话框') 默认取的字符串类型
声明变量
let name = 10
声明常量
const pi = 3.14
基本数据类型
number
string
boolean
undefined
null
引用数据类型
Object、Function、Arry
字符串拼接
`今年${age}岁了`
'今年' + age + "岁了"
逻辑运算符
&& 与
|| 或
！ 非
类型转换
转换为数字
Number('12') 转换为数字型
parseInt('12') 转换为整数数字型
parseFloat('12.5') 转换为小数数字型
转换为字符串类型
String(12) 转换为字符串型
变量.toString) 转换为字符串行
转换为布尔型
Boolean()
隐式转换
转换为数字型
算数运算符
+号作为正号可以把字符串转换成数字型
转换为字符串型
+字符串拼接
转换为布尔型
！逻辑非
分支语句
if (条件) {
语句
}
else if (条件) {
语句
} else {
}
条件? 表达式1:表达式2
switch （变量） {
case 值:
语句
break
default：
语句
}
循环语句
while (判断) {
语句
}
for (执行前语句;条件;执行后语句) {
语句
}
break 跳出
continue 跳过本次
数组
数组声明：
let 数组名 = [数据1,数据2]
数组长度：
arry.length
新增数组：
arry.push(元素...) 增加一个或者多个元素到 数组末尾，返回数组长度
arry.splice(开始位置，删除个数，数据1，数据2)
arry.unshift(元素...) 增加一个或者多个元素到 数组开头，返回数组长度
删除数组：
arry.pop() 删除最后一个元素，返回被删除的元素
arry.splice(起始位置0开始,删除个数)
arry.shift() 删除第一个元素，返回被删除的元素
修改数组：
arry[i] = 值
查询数组：
arry[i] 不存在则为undefined
遍历数组： （遍历数组处理数据，并返回新数组）
const newarr = arr.map(function (ele,index) {
ele为数组元素
index 为数组索引号
return ...
})
排序数组：
arry.sort() 会直接修改原数组
升序：
arry.sort(function(a,b){
return a - b
})
降序：
arry.sort(function(b,a){
return a - b
})
数组转字符串：
arr.json('每个值之间插入的值')
筛选数组：filter()方法创建一个新的数组，新数组中的元素是符合条件的所有元素
const newarr = arr.filter(function (element数组元素,index数组下标){
return 筛选条件
})
遍历数组：
arr.reduce(function(){}, 起始值)
arr.reduce(function(上一次值， 当前值){}, 初始值)
查找元素：
find
拷贝数组：
arr.prototype.cocat()
函数
定义函数：
function 函数名(参数1，参数2...) {
函数体
return 变量
}
调用函数：
函数名(实参1，实参2)
匿名函数：
函数表达式：将匿名函数赋值给一个变量，并通过变量名称进行调用
立即执行函数：
(function(){}) ()
剩余参数：
function(a,b,...other)
作用域
全局：
函数内部的变量，如果没有声明直接赋值，当全局变量用
局部：
函数形参为局部变量
对象
定义对象：
let people = {
name: 'lzc',
sex: 'man',
age: 18,
str: function(){
语句
}
}
访问对象：
对象.属性
对象['属性']
删除属性：
delete 对象.属性
新增属性：
对象.新属性
遍历对象：
for (let key in people) {
获取key
people[key] 只能通过此种方式获取值
}
获取对象所有属性值
const o = { name: 'lzc', age: 18}
const arr = Object.values(o) //数组里值为lzc 18
获取对象所有的键：
Object.key
拷贝对象：
const o = { name: 'lzc', age: 18}
const newo = {}
Object.assign(newo,o)
内置对象
Math：数学运算方法
方法：
PI Math属性，返回圆周率
max(1,2) 返回最大值
min() 返回最小值
abs()返回绝对值
ceil()向上取整
floor()向下取整
round()四舍五入取整
random()返回一个0-1之间，包括0不包括1
数据类型存储
基本数据类型
存放在栈里，访问速度快
引用类型（数组、方法、对象）
地址存放在栈里，数据存放在堆里，导致let x = 10; y=x 的时候，y随x变化而变化
WEB API
获取DOM对象
document.querySelector('css选择器') 获取指定的第一个元素
document.querySelectorAll() 获取指定的所有元素
得到一个伪数组（无法使用数组方法，仅能使用下标及长度）
getElementsById 通过ID
getElementsByClassName 类名
getElementsByTagName 标签名
getElementsByName name属性
操作元素内容
元素.innerText 操作元素内容，不解析标签
增：
元素.innerText = '新值'
删：
元素.innerText = ''
改：
元素.innerText = '新值'
查：
元素.innerText
元素.innerHTML 操作元素内容，解析标签
操作元素属性
元素.src .title .href
表单.value .type
操作元素样式
元素.style.width 通过style操作样式(如果有-，采用小驼峰命名比如marginTop)
元素.className 通过类名操作样式
元素.classList.add() 增加类名
元素.classList.remove() 删除类名
元素.classList.toggle() 切换类名
间隔函数
setInterval(函数,间隔时间单位ms)
关闭定时器
let 变量 = setInterval(函数，间隔时间)
clearInterval（变量）
延迟函数
setTimeout（回调函数，等待的毫秒数） 只执行一次
关闭延迟函数
clearTimeout()
自定义属性
可以在标签上加 data-自定义属性名
在dom上通过dataset获取
元素.dataset.自定义属性名
事件
元素对象.addEventListener('事件类型',事件处理函数)
事件类型：
鼠标事件：
click 点击
mouseenter 鼠标进入(没有冒泡)
mouseleave 鼠标离开（没有冒泡）
焦点事件：
focus 获取脚垫
blur 失去焦点
键盘事件：
keydown 键盘按下
keyup 键盘
文本事件：
input 当表单value 被修改时触发
页面加载事件：
load 等待所有的外部资源加载完后触发，包括图片、外部CSS，对象为window
window.addEventLinstener()
DOMContentLoaded 等待html加载完就触发，对象为document
页面滚动事件：
scroll 监听用户把页面滚动到某个区域做一些处理，比如固定导航栏，监听在window上
获取被卷去的左侧（scrollLeft）和头部（scrollTop）
获取当前滚动的长度 document.documentElement.scrollTop
页面尺寸事件：
resize 监听在window上
获取当前元素的宽度clientWidth
获取当前元素的高度clientHeight
M端事件（移动端触屏事件）：
touchstart： 手指触屏开始事件
touchmove： 手指触屏滑动事件
touchend： 手指触屏结束事件
事件对象：
e.key 判断用户按下哪个键
环境对象：
this 谁调用，指向谁
事件对象
回调函数中的第一个参数即为事件对象
元素对象.addEventListener('事件类型',事件处理函数（e）{
e.key #按下了哪个键
})
环境对象
函数内部的特殊对象 this ，收当前环境影响（通常指向调用方）
全局环境/普通函数下：
this 指向window 对象
对象方法：
this 指向对象
事件 谁调用 指向谁
事件流
事件完整执行过程中的流动路径，两个阶段，捕获阶段、冒泡阶段
事件捕获：当一个元素的事件被触发时，会从DOM的跟元素开始依次调用同名事件（从外到里）
事件冒泡：当一个元素触发事件时，会依次向上调用父级元素的同名事件
阻止冒泡：
事件对象.stopPropagation()
事件委托
原本需要注册在子元素的事件委托给父元素，让父元素监听
获取事件对象目标元素
事件.target.tagName
阻止默认行为
当点击提交的时候阻止对表单的提交
阻止链接的跳转
移除事件监听
removeEventListener(事件类型, 事件处理函数（匿名函数无法移除））, 获取捕获或者冒泡阶段)
元素尺寸与位置
元素尺寸：
clientWidth/clientHeight 不带边框
offsetWidth/offsetHeight 带边框的大小
元素位置：
offsetLeft/offsetTop 元素距离页面的左上距离
日期对象
获取当前时间
const date = new Date()
得到指定的日期和事件
const date = new Data('yyyy-mm-dd hh-mm-ss')
方法：
getFullYear（）获取年份
getMonth（）获取月份
getDate（）获取月份中的每一天
getDay() 获取星期
getHours() 获取小时
getMinutes（）获取分钟
getSeconds（） 获取秒
其他方法：
toLocaleString() 返回该日期对象的字符串（包含日期和时间）
toLocaleDateString() 返回日期对象日期部分的字符串
toLocaleTimeString() 返回日期对象时间部分的字符串
时间戳
获取时间戳
+new Date() 获取当前时间，（）里加时间格式就会自动转换
DOM节点
可以利用节点关系查找节点
父节点查找： parentNode 返回最近一级的父节点对象，找不到返回为null
子节点查找： children 返回最近一级的子节点对象
兄弟节点查找：nextElementSibling/previousElementSibling
节点操作
创建节点：
document.createElement('标签名')
追加节点：
element.append() 放到父元素的最后面
element.prepend（） 放到第一个子元素前面
删除节点：
element.remove() 把对象从他所属的DOM树中删除
BOM浏览器对象模型
window（全局对象、顶级对象）
navigator：记录了浏览器自身的相关信息（ua）
location：拆分保存了URL地址的各个组成部分
document：
history：管理历史记录，前进后退
screen：
location对象
href属性：得到完整的地址，赋值则是跳转到新地址
search属性：得到？ 后面的地址
hash属性：得到#后面的地址
reload方法： 刷新页面
history对象
管理历史记录，做前进、后退功能
back() 后退
forward() 前进
go() 前进后退功能（1为前进，-1为后退）
本地存储
localStorage 长久存储在浏览器中，刷新或者关闭页面也不丢失，无法存储复杂类型，直接存字符串
setItem(key,value)：存储数据
getItem(key)：读取数据
removeItem(key)：删除数据
sessionStorage 当浏览器被关闭时，存储在这里的数据会被清除
方法和上面一致
复杂数据类型转JSON字符串
JSON.stringify(复杂数据)
JSON.parse(字符串)
正则表达式
const reg = 定义规则
reg.test(字符串) 匹配则为真
表达式：
^：匹配行首
$：匹配行尾
*：重复0次或多次
+：重复1次或多次
?：重复0次或1次
{n}：重复n次
{n,}：重复n次或者更多次
{n,m}：重复n到m次
[abc]：匹配其中一个
[a-z]：匹配a-z中的一个
[^abc]：排除abc
\d：匹配数字
\D：匹配0-9以外的字符
\w：匹配任意字母、数字和下划线
\W：与w相反
\s：匹配空格（换行符、制表符）
\S：取反
替换
字符串.replace（/正则/，'替换的文本'）
展开运算符
... 将一个数组/对象进行展开
...arr
箭头函数
用于替代匿名函数
const fn = function() {
console.log('匿名函数'）
}
fn()
const fn = () => {
console.log('箭头函数')
}
fn()
如果只有一个形参可以省略小括号
const fn = x => {
语句
}
如果函数只用一句代码，则可以省略大括号，这句代码就是返回值
const fn = x => 1+1
如果返回的是一个对象，则需要用小括号把对象包裹起来
const fn = () => ({ name: 'lzc' })
对象属性和方法简写
在对象中，如果属性名和属性值一致，可以简写只写属性名
对象中，方法可以简写
解构
数组解构：
const [max,min,avg] = [1,2,3]
max = 1
对象解构：
const { max, min, avg } = user
重命名：
const { 原名：新名 } = user
对象数组解构：
构造函数
命名以大写字谜开头，用new构造
function 名字(参数1，参数2) {
this.实参1=形参1 #实例成员
this.实参2=形参2
}
名字.参数 = 值 静态成员
const People = new 名字('实参1','实参2')
实例成员：
实力对象的属性和方法即为实例成员
实力对象互相独立
静态成员：
构造函数的属性和方法被称为静态成员
异常处理
throw 抛出异常，程序终止运行
throw new Error('错误描述')
try试试/catch拦住/finally 最后 捕获错误信息
try {
可能出错的语句
} catch (error) {
出现错误才执行
} finally {
不管如何都执行
}
改变this
bind()
fun.bind(在fun函数运行指定的this值，arg1，arg2)
防抖
单位时间内，频繁触发事件，只执行最后一次
节流
单位时间内，频繁触发事件，只执行一次