只是自己的学习笔记只写了点自己觉得比较重要的内容,因为原本输出的就算 Markdown 所以就博客也发一份了,因为是学了哪一些记了哪一些可能会比较混乱,有错别字请见谅
事件
添加或解绑
使用 addEventListener()
添加事件,使用 removeEventListener()
解绑事件
const btn = document.querySelector('#button')
function fn(){
console.log('Hello')
}
btn.addEventListener('click', fn()) // 绑定事件
btn.removeEventListener('click', fn()) // 解绑事件
事件名称
事件名称 | 触发方式 |
---|---|
click | 鼠标点击 |
mouseenter | 鼠标经过(存在冒泡) |
mouseleave | 鼠标离开(存在冒泡) |
mouseover | 鼠标进入(不存在冒泡) |
mouseout | 鼠标离开(不存在冒泡) |
focus | 获得焦点 |
blur | 失去焦点 |
Keydown | 键盘按下触发 |
Keyup | 键盘抬起触发 |
input | 用户输入触发 |
change | 输入框内容改变触发 |
load | 加载事件,接听整个页面 |
DOMContentLoaded | 加载事件,无需等待CSS、图像等资源加载完成 |
resize | 在窗口发生改变时会触发次事件 |
scroll 事件
需要给window或者document添加此事件,scrollLeft
和 scrollTop
获取被卷去的大小,是可读写的。document.documentElement HTML
返回对象HTML的元素,scrollTo()
方法可以使用 元素.scrollTo(x, y)
来吧页面滚动到指定位置。
resize 事件
在窗口发生改变时会触发次事件
阻止默认行为
使用 preventDefault()
方法来阻止默认行为
如:阻止表单提交的默认行为
document.querySelector('form').addEventListener('submit', function (event) {
event.preventDefault()
})
日期对象
方法 | 作用 | 说明 |
---|---|---|
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0 ~ 11 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0 ~ 6 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
getSeconds() | 获取秒 | 取值为 0 ~ 59 |
获取时间戳
时间戳是1970年01月01日00时00分00秒起至现在的毫秒数,通常使用将来的时间戳减去现在的时间戳来就行倒计时
使用 getTime() 方法
const date = new Date()
console.log(date.getTime())
简写 +new Date()
console.log(+new Date())
使用 Date.now()
console.log(Date.now())
节点
节点关系和节点查找
父子节点
子元素.parentNode
返回最近的一级父级节点,如果找不回返回 null
父元素.childNodes
返回所有的子节点,保活文本注释等父元素.children
⭕仅获取所有子元素的节点,并且会返回一个伪数组元素.nextElementSibling
获取下一个兄弟节点元素.previousElementSibling
获取上一个兄弟节点
创建/追加/克隆/删除节点
使用 document.createElement('标签名')
创建一个节点
如:
const divNya = document.createElement('div')
吧节点插入到父元素最后 父元素.appendChild(要插入的元素)
吧节点插入到父元素之前 父元素.insertBefore(要插入的元素,在哪个元素前面)
元素.cloneNode(布尔值)
会克隆出来一个和原标签一样的元素,括号内写布尔值,true
时会克隆后代节点,false
克隆时不包含后代节点这是默认值父元素.removeChild(要删除的元素)
删除不需要的节点,和CSS中 display:none
的区别是前者为删除后者为隐藏
本地存储
本地存储有 localStorage
和 sessionStorage
会以键值对的方式存储,可以在浏览器的DevTools的Application查看localStorage
能永久的存储在用户电脑本地,关闭页面也不会被删除sessionStorage
在页面关闭时数据将会被删除.setItem(key, value)
存储数据localStorage.getItem(key)
获取数据localStorage.removeItem(key)
删除数据
JSON
JSON.parse(JSON字符串)
吧JSON字符串转换为对象JSON.stringify(复杂数据类型)
吧复杂数据类型转换为字符串JSON.parse(JSON.stringify(复杂数据类型))
可以完成不含函数的深拷贝
location 对象
location 对象拆分保存了URL地址的各个部分location.href
获取当前的URL地址,如果赋值将会跳转到赋值的URL地址location.search
获取地址中的参数 ?
后面的部分location.hash
获取地址中的哈希值 #
后面的参数location.reload
刷新页面
history 对象
history 对象主要用于前进、后退、历史记录等,实际中用的少history.back()
后退页面history.forward()
前进页面history.go(参数)
可以前进或者后退页面正数前进负数后退
局部作用域和全局作用域
作用域规定了变量能够备份访问的范围
局部作用域
只能在函数内部访问不能在外部直接访问,函数执行完毕后一般会被释放
块级作用域
在 {}
包裹的代码块中可以使用,外部有可能无法访问,var
不能产生块级作用域
全局作用域
全局作用域中声明变量其他任何作用域都可以被访问
作用域链
由作用域串联提供查找变量的机制,就近原则从内往外一级一级查找变量
let a = 1
function nya(){
let a = 2
console.log(a); // 就近原则 nya() 中存在变量名'a'打印 2
}
nya()
闭包⭕
私有化数据,让外部也能访问内部变量,但会有内存泄漏
通过 return
一个函数 function
可以是匿名函数不起变量名
function nya() {
let num = 1
return function() {
console.log(num);
}
}
const nyaw = nya()
nyaw() //控制台打印 1
变量提升
var
和 function
有变量提升会预解析提升,var
只提升变量名不赋值,function
提升整个函数,function
的优先级比 var
高如果同时 function
和 var
定义一个相同的变量名 function
会将 var
覆盖
函数中的参数
动态参数
动态参数 arguments
是函数内部内置的伪数组,可以通过 for
循环递归,在箭头函数中无法使用
function nya(){
console.log(arguments)
}
nya(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
剩余参数
剩余参数使用三个英文句号加变量名 …变量
来传参,是真数组,需要写在最后一个参数中,可以在箭头函数中使用,开发中提倡使用
function nya(...nyaw){
console.log(nyaw)
}
nya(1,2,3)
// [1, 2, 3]
展开运算符
和剩余参数一样使用三个英文句号加变量名 …变量
可以展开为数组可以用于 Math.max
等需要数值的地方
let arr = [1,2,3,4,5]
console.log (...arr) // 1 2 3 4 5
箭头函数⭕
可以用来替换匿名函数,箭头函数的语法比函数更加简洁,箭头函数中没 this
将会往上级查找
- 只有一个参数时可以省略小括号
- 只有一行代码时可以省略大括号以及无需写
return
- 如果只有一行省略大括号的情况下返回对象或者数组时需要英文括号包裹
- 箭头函数中没有
arguments
但是有剩余参数,使用三个英文句号加变量名…变量名
- 箭头函数中没有自己的
this
会沿用上一层的this
解构赋值⭕
快速批量赋值给变量的简洁语法
数组解构
遵循一一对应原则,变量如果大于单元数量时,会返回undefined。可以直接在[]内赋值,可以使用剩余参数吧多余的数组内的单元返回赋值给变量名
基本语法
将会把左侧的数组中的单元赋值给右侧的 []
变量名
let [a, b, c] = [114,514,1919] // a = 114 b=514 c=1919
多级
根据一一对应原则如下
let [a, b, [c]] = [114,514[1919]] //a = 114 b=514 c=1919
数组交换
开头必须加分号结束符
let a = 1
let b = 2
;[b,a]=[a,b]
console.log(a,b); // 2 1
对象解构
对象中找不到变量名一致的属性名时返回 undefined
基本语法
吧左侧对象中的属性名赋值给右侧 {}
的变量名
let {userName} = {userName:'橘纸柚'}
多级
多级对象中嵌套和数组解构差不多使用冒号':'来连接
let {userName,site:{blog}} = {
userName: '橘纸柚',
site: {
blog: 'lovemen.cc'
}
}
更名
如果数组中的变量名已经被占用可以使用英文冒号进行更名
let {userName:MyName,site:{blog:BlogUrl}} = {
userName: '橘纸柚',
site: {
blog: 'lovemen.cc'
}
}
逻辑短路
如果左边短路右边的代码就不执行
&&
左边为false就短路||
左边为true就短路
创建对象的三种方法
字面量
通过字面量来创建对象,这是最常用的方法
const obj = {uname: '橘纸柚'}
new Object()
通过 new Object()
来创建函数,通过字面量创建时也会经过 new Object()
const obj = new Object({uname:'橘纸柚'})
构造函数⭕
构造函数是一种特殊的函数,主要用来初始化对象,可以理解为是一个对象的模板可以用来创建多个类似的对象。JavaScript实现面向对象需要借助于构造函数,直接创建方法存在浪费内存的问题。
声明构造函数
构造函数推荐驼峰命名法首字母开头大写用于与普通函数的区分,构造函数里的 this
指向实例对象。推荐键的取名和形参相同。
function Nya(uname,age){
this.uname = uname;
this.age = age;
}
使用
称之为实例化对象,构造函数通常和 new
一起使用,实参的使用方法和普通函数一样没有传入实参则 undefined
function Nya(uname,age){
this.uname = uname;
this.age = age;
}
const juzi = new Nya('JuziYou',18)
成员
实例对象的成员称为实例成员,只有实例对象可以使用
构造函数的成员称为静态成员,只有构造函数可以使用
function Nya(uname,age){
this.uname = uname;
this.age = age;
}
const juzi = new Nya('JuziYou',18)
Nya.baka = 'YES'
console.log(juzi.baka) // undefined
console.log(Nya.baka) // YES
console.log(Nya.uname) // undefined
原型对象⭕
prototype
是每一个构造函数都有的一个属性指向了一个对象称为原型对象,在原型中构造函数和实例中的this指向实例化对象。原型是所有当前构造函数 new
出来的对象的方法,可以吧那些不变的方法都放在里面节省内存
function Nya(uname,age){
this.uname = uname;
this.age = age;
}
Nya.prototype.say = function(){
console.log('Nya!');
}
const juzi = new Nya('JuziYou',18)
juzi.say() // 将会在控制台打印 Nya!
内置构造函数
其中的 Boolean
、String
、Number
既是包装类型又是方法
Object
Object
是内置构造函数通常用于创建对象,不过推荐使用字面量来创建对象
for(let key in obj){}
for(let key in obj){}
用于遍历对象,'let key'的'key'为成员的键值,'obj'是目标数组
Object.keys
Object.keys(obj)
将会返回一个真数组
const nya = {
name: 'JuziYou',
age: 18
}
console.log(Object.keys(nya)); // ['name', 'age']
Object.values
Object.values(obj)
将会返回一个真数组
const nya = {
name: 'JuziYou',
age: 18
}
console.log(Object.values(nya)); // ['JuziYou', 18]
Object.assign
Object.assign(obj,{key:value})
常用于数组拷贝也可以用于成员的添加
const nya = {
name: 'JuziYou',
}
const nya2 = {
age: 18
}
console.log(Object.assign(nya,nya2)); // {name: 'JuziYou', age: 18}
console.log(Object.assign(nya,nya2,{baka:'YES'})); // {name: 'JuziYou', age: 18, baka:'YES'}
Array
Array
是内置的构造函数用于创建数组,不过推荐使用字面量创建数组
方法 | 作用 |
---|---|
.push() | 向数组尾部添加一个单元 |
.unshit() | 向数组头部添加一个单元 |
.pop() | 删除数组最后一个单元 |
.shift() | 删除数组第一个单元 |
.splice(索引开始值, 删除单元数,追加单元) | 从索引开始值的位置删除n个单元数 |
.reverse() | 吧数组排序颠倒 |
Array.from()
Array.from()
可以将为数组转换为数组,转换对象必须带 length
。length
如果小于数量将会略去后面的,如果多余数量将会写入 undefined
reduce
reduce
返回函数累计处理的结果通常用于求和等
语法
索引号和原数组为可选变量。起始值如果不写将会使用数组的第0个值并且从第二个值开始遍历
arr.reduce(function(累计值prev, 当前元素item, 索引号index, 原数组original){}, 起始值)
forEach
forEach
用于遍历数组,不会返回,通常用于遍历、输出、打印值。索引号和原数组为可选变量
语法
arr.forEach(function(当前元素item, 索引号index, 原数组original){})
filter
filter
用于遍历筛选数组,return
会返回值可以声明一个变量接收。索引号和原数组为可选变量
语法
arr.filter(function(当前元素item, 索引号index, 原数组original){})
map
map
用于迭代数组,经常用于处理数据,return
会返回值可以声明一个变量接收。索引号和原数组为可选变量
语法
arr.map(function(当前元素item, 索引号index, 原数组original){})
join
join
用于吧数组转化为字符串。索引号和原数组为可选变量
let arr = [1,2,3,4,5]
console.log(arr.join('')) // 12345
console.log(arr.join('/')) // 1/2/3/4/5
find
find
将会查找符合条件的第一个元素,如果找不到将会返回 undefined
。比如数组 [1,1,4,5,1,4]
查找 4
将会循环到下标3的4后结束,查找 9
将会返回undefined
语法
arr.find(function(元素值、元素的索引,原数组){})
some
some
将会检查数组中是否有任意一个符合条件返回布尔值,不符合将会返回 false
符号将会返回 true
。
语法
arr.some(function(元素值,元素的索引,原数组){})
every
every
将会查找数组是否都符合条件返回布尔值,不符合将会返回 false
符号将会返回 true
。
语法
arr.every(function(元素值,元素的索引,原数组){})
sort
sort
比对重排数组,返回后会直接重排数组
语法
a
和 b
为对比的两个值
arr.every(function(a,b){return a - b})
String
length
获取字符串的长度,如'JuziYou'.length
将会得到7
split(分隔符)
将会吧字符串转换为数组,如'Neko_Nya'.split('_')
将会得到数组['Neko','Nya']
,如果分隔符为空字符串''
将会吧每个字符转换为数组,如'橘纸柚'.split('')
将会得到数组['橘','纸','柚']
substring(起始索引,结束索引)
用于字符截取,如'123456'.substring(2,4)
将会截取字符串34
。如果只有一个参数将会截取起始索引之后的全部字符如'123456'.substring(2)
将会得到字符串3456
startsWith(检测字符串,检测位置索引号)
用于检测是否为某串字符开头,检测位置索引号为可选项将会从此索引号开始检测忽略之前的,将会返回布尔值。includes(搜索字符串,检测位置索引号)
判断一个字符串是否包含在另一个字符串中,检测位置索引号为可选项,将会返回布尔值
Number
toFixed(保留字符串位数)
设置保留小数位的长度,如设置为 2
将会保留两位,四舍五入
Ajax
常见状态码
状态码 | 描述 | 说明 |
---|---|---|
200 | OK | 请求成功 |
201 | Created | 资源在服务器端已成功创建 |
400 | Bad Request | 客户端请求方式或者参数错误 |
401 | Unauthorized | 客户端身份认证不通过 |
404 | Not Found | 客户端请求的资源不存在 |
500 | Internal Server Error | 服务器内部错误 |
Axios
Axios 是一个基于 promise 的网络请求库,可以方便的完成 ajax 请求
官方文档地址:https://axios-http.com/zh/docs/intro
基地址
axios.defaults.baseURL
设置基地址
axios.defaults.baseURL = 'https://api.uuz.bid'
常用写法
method
设置请求方式如 GET
、POST
url
设置请求地址如果设置了基地址直接写地址即可如 /api/nya
/api/nya
method
为 GET
时使用 params
写请求参数method
为 POST
时使用 data
写请求参数headers
设置请求头
如:
axios({
method:'GET', // 发送GET请求
url:'/userdata', // 请求地址(设置了基地址)
params:{
uname: userName // 发送载荷
},
headers: {
Authorization: token // 服务器需要Authorization请求头验证token
}
}).then(res=>{
console.log(res.data); // 没有错误
}).catch(err=>{
console.log(err); // 有错误
})
XMLHttpRequest()
这是原生的Ajax方式,不过实际中都用请求库比较多所以就简单记一下
MDN传送门:https://developer.mozilla.org/zh-CN/docs/Glossary/AJAX
const xhr = new XMLHttpRequest() // NEW 一个 XMLHttpRequest()
xhr.open('GET','https://api.uuz.bid/random/?json=y') // GET请求数据
xhr.onload = function(){ //准备接受数据
console.log(xhr.responseText); //打印返回的数据
}
xhr.send() //发送请求
Promise
Promise
是一个构造函数,可以通过 new
创建一个 Promise
实例对象,代表一个异步的操作
语法
Promise
构造函数包含一个参数带有两个回调值 resolve
(解析)和 reject
(拒绝)
如果正常则调用 resolve
,否则调用 reject
const np = new Promise((resolve, reject) => {})
.then()
方法用来预先指定成功和失败的回调函数,失败的回调函数为可选return
的返回值可以是Promise
对象也可以是具体的值,但是都会被处理成Promise
方便后面的链式调用
形参resolve()
和reject()
的传参将会传到.then()
里的函数内.catch()
捕获错误,参数为一个函数回调值err
(错误)
如:
const np = new Promise((resolve, reject) => {
resolve('juzi')
}).then(
res=>{
console.log(res) // 控制台打印juzi
return 'Nya'
}
).then(
res=>{
console.log(res) // 控制台打印Nya
}
).catch(err=>{
console.log(err)
})
中断Promise链
直接 return new Promise(()=>{})
返回一个初始的Promise实例
Promise.all()
回并行发起Promise
异步操作,全部的操作结束后才会下一步的.then()
const promiseAll = [
axios({method: 'GET',url: 'XXXXXX'}),
axios({method: 'GET',url: 'XXXXXX'}),
axios({method: 'GET',url: 'XXXXXX'})
]
Promise.all(promiseAll).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
Promise.race()
回并行发起Promise
异步操作,只要有任意一个返回了值就立即进入下一步.then()
const promiseAll = [
axios({method: 'GET',url: 'XXXXXX'}),
axios({method: 'GET',url: 'XXXXXX'}),
axios({method: 'GET',url: 'XXXXXX'})
]
Promise.race(promiseAll).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
async await
async
await
可以解决回调地狱问题,写起来也比 Promise
更清楚,await
必须在 async
的函数内,错误需要使用 try
catch
来获取
// 比如await从API里取用户数据并打印
(async () => {
const userData = await axios({
method: 'GET',
url: '/user',
params: {
user: 'JuziYou'
}
})
try {
console.log(userData.data)
} catch (err) {
console.log(err.response.data.message)
}
})()
Use "CC BY-NC-SA 3.0 CN" for licensing