673 lines
13 KiB
Markdown
673 lines
13 KiB
Markdown
# 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)
|
||
```
|
||
|
||
## 防抖
|
||
|
||
```
|
||
单位时间内，频繁触发事件，只执行最后一次
|
||
```
|
||
|
||
## 节流
|
||
|
||
```
|
||
单位时间内，频繁触发事件，只执行一次
|
||
```
|
||
|