JavaScript/ES6
引入外部js
-
<script type="text/javascript" src="路径"><script>
注释
-
//单行注释 /*多行注释*/
变量
-
声明变量的时候变量名不允许使用空格
代码折叠块
-
//#region //#endregion
断点测试
-
debugger; 用于打断点测试
抛出错误
-
throw new Error("错误信息")
数据类型
基本数据类型
-
number 数字型 date 日期类型 boolean 布尔类型 string 字符串类型 Symbol 唯一标识 undefined 无值 null 空值
引用数据类型
-
array 数组类型 object 对象类型 function 函数类型
类型转换
-
Boolean("要转换的内容") 转换成布尔类型,返回true或者false unll,undefined,"",0,NaN返回的时候为fasle 转换成数字类型 Number("要转换的内容") 转换成字符串类型 String("要转换的内容") 转换成对象格式 JSON.parse("要转换的内容") 第二种转换字符串类型方法 toString("要转换的内容")
算数操作符
-
= 赋值 + 加法 - 减法 / 除法 * 乘法
比较运算符
-
>= 大于等于 <= 小于等于 > 大于 < 小于 == 等于 === 全等,要求类型也相等 != 不等于 !== 不全等
逻辑操作符
-
&& 多个条件的时候,必须都满足才会返回为true,一个不满足则返回为false || 多个条件的时候,满足一个条件的时候就会返回为true,都不满足则返回为false ! 取反
弹框
-
alert() 弹框 console.log() 控制台输出 prompt() 输入弹框 window.confirm() 确认弹框
声明变量方式
-
在es5的时候var声明的变量是有变量提升的,就是可以在声明之前输出,虽然输出的是undefined,但是可以输出,用let和const声明的变量在声明之前输出的话就会报错,同时还有作用域,只在当前作用域有用,const声明的变量还必须给初始值,否则会报错,const声明的变量也不可以进行直接修改,像对象格式的话可以通过名称.变量名 = 值,这种方法来进行修改不会报错,假如是一个数组,那么往里面添加一个元素删除一个元素也不会报错
-
var 第一种声明变量,会有变量提升 let 第二种声明变量,不会变量提升,局部使用 const 第三种声明变量,不会变量提升,局部使用,不可直接修改值
循环
循环语句
-
for(循环条件){逻辑操作} for循环 while(循环条件){逻辑操作} while循环 do{逻辑操作}while(循环条件) while先执行一次再循环
循环操作
-
continue 跳出当前循环,接着下一次循环 break 终止循环操作,不再循环
作用域
-
局部作用域 在函数内部可以访问到的属性,在外部访问不到,这样的情况一般是局部作用域 全局作用域 所定义的属性在任何地方都可以访问的到,那么这个就属于全局作用域,全局作用域是整个脚本;
定时器
里面两个属性,一个是处理函数,一个是时间,对应的是毫秒
-
setTimeout(function(){},1000) 延迟定时器 setInterval(function(){},1000) 定时器
清除定时器
-
clearInterval(定时器名称) 清除定时器
DOM和BOM
-
BOM是浏览器对象,像一些浏览器提供的方法都术语BOM对象的方法 BOM是文档对象,当一个网页被创建出来的时候,会生成一个DOM树
获取元素
-
document.getElementById("id名") 用于id获取 document.getElementsByClassName("class名")[0] 用于class获取 document.getElementsByTagName("标签名")[0] 用于标签获取 document.querySelector("要获取的id或者class") 用于选择器获取 document.querySelectorAll()[0] 用于标签获取
获取
-
DOM对象.innerText("写入的内容") 获取或者写入,写入时不会看html代码 DOM对象.innerHTML("写入的内容") 获取或者写入,写入时会看html代码
-
DOM对象.value 获取表单内容 DOM对象.length 获取长度
-
document.body.clientWidth 获取窗口的宽度 document.body.clientHeight 获取窗口的高度 document.documentElement.scrollTop 获取卷起的高度
-
DOM对象.clientWidth 获取宽度 DOM对象.clientHeight 获取高度
-
DOM对象.parentNode 找到父元素 DOM对象.focus() 文本框获取焦点
字符串方法
-
所有的方法都不会破坏原先的字符串,所处理的结果需要使用一个新的变量来进行接受
-
split是用来分割字符串的,括号里面是分隔符,分隔符为空的情况下就是一个一个分割,分隔符会在分割后消失,所分割成的为一个数组,通过下标可以取到对应的值
-
string.split ("分割符")
-
parseInt是用来取数字,需要数字开头,只取整,否则是NaN
-
parseInt(string)
-
parseFloat是用来取数字,需要数字开头,可以取小数,取不到的情况下是NaN
-
parseFloat(string)
-
indexOf是用来查找下标的,或者是否包含,当可以查找到的时候就会返回指定的下标,查找不到的情况下就会返回-1,查找内容为空的时候默认返回0
-
string.indexOf("查找内容")
-
lastIndexOf是用来查找元素最后一次出现的位置,查找内容为空的时候会返回最后的下标加一
-
string.lastIndexOf("查找内容")
-
charAt用来指定下标获取值
-
string.charAt(下标值)
-
trim是用来去除字符串两端空格
-
string.trim() //去除字符串两端空格 string.trimState() //去除字符串左侧空格 string.trimEnd() //去除字符串右侧空格
-
replace是用来替换里面的内容的,但是只可以替换一次,第一次替换完成之后就不会替换第二次了
-
string.replace("替换的内容","换成的内容")
-
字母转化大小写
-
string.toLowerCase() //将字符串里面的字母转换成小写的 string.toUpperCase() //将字符串里面的值转换成大写的
-
slice根据区间进行拿值,当只有一个参数的时候,那个参数就是起始,如果这个参数是正的,则之间从当前位置取到最后,如果是负的,则从当前参数的后一个取到最后
-
当有两个参数的时候,都是正数的情况下,则从第一个当前位置取到最后一个位置之前,一正一负的情况下,则从第一个当前位置取到最后一个位置之前之后
-
当有两个参数的时候,都是负数的情况下,则从第一个当前位置之后取到最后一个位置
-
string.slice(参数一,参数二)
-
substring根据下标拿值,根据下标拿区间值,开始的位置是当前的下标开始,到结束下标之前
-
string.substring(开头,结尾)
-
repeat用于将字符串重复复制
-
string.repeat(重复次数)
-
concat是用来连接两个字符串合并成一个字符串
-
字符串1.concat(字符串2)
-
JSON.stringify是用来将其他类型转换成字符串
-
JSON.stringify(要转换数据)
数组方法
下面所以的方法都会改变原数组
-
shift是用来删除数组的第一个元素,返回结果就是所删除的元素
-
array.shift()
-
pop是用来删除数组的最后一个元素,返回结果就是所删除的元素
-
array.pop()
-
unshift是用来向数组的开头添加一个元素,返回结果是数组长度,不写的时候就不添加
-
array.unshift("要添加的元素")
-
push是用来向数组的尾部添加一个元素,返回结果是数组长度,不写的时候就不添加
-
array.push("要添加的元素")
-
reverse是用来颠倒数组的顺序
-
array.reverse()
-
join是用来将数组拼成一个字符串
-
array.join()
-
splice用于删除元素和添加元素,里面有三个值,第一个为开始下标,第二个为删除个数,第三个为添加元素
-
array.splice(第一个值,第二个值,第三个值)
-
sort用于有数字的数组,可以将数字进行排序操作,a-b为由大到小,b-a为由大到小
-
array.sort((a,b) => a-b)
-
forEach是用于循环数组
-
array.forEach((当前值,索引,数组本身) => {})
-
find方法是用于查找满足条件的元素
-
array.find(item => {})
下面所以的方法都不会改变原数组,需要使用变量接受结果
-
克隆数组
-
array.slice()
-
includes用于查找是否包含元素,包含的话返回true,否则返回false
-
array.includes("要查找的元素")
-
indexOf用于查找下标,没有的话返回-1
-
array.indexOf("查找的元素")
-
filter用于过滤原数组,将满足条件的创建成一个新数组进行返回
-
array.filter((当前值,索引,数组本身) => 删选条件)
-
findIndex是用于查找满足结果的下标,只能查找一个,当多个满足的时候返回下标0,没有满足结果的时候返回-1
-
array.findIndex(item => 条件)
-
map是用于加工数组,将加工完成的结果返回一个新的数组
-
map(item => item + 1)
-
Array.from是将其他元素转换成数组,返回结果就是一个数组
-
Array.form(要转换的元素)
-
some是用于删选整个数组里面条件,当有一个满足的时候则返回true
-
some((当前值,索引,数组本身) => 删选条件)
-
every是用于删选整个数组里面条件,当有一个不满足的时候则返回false,全部满足返回true
-
every((当前值,索引,数组本身) => 删选条件)
-
reduce用于循环数组求和,里面有两个参数,第一个是函数,第二个是初始值,oldValue就是上一次的值,newValue就是这一次新拿到的值,返回值就是总和
-
reduce((oldValue,newValue) => oldValue + newValue},0)
对象方法
-
用于获取当前对象的所以key值,返回结果就是所有的key值,会以数组的方式进行返回
-
Object.keys(对象)
-
用于获取当前对象的所以value值,返回结果就是所有的value值,会以数组的方式进行返回
-
Object.values(对象)
-
用于将对象分解成数组,每个数组key和value又是数组成员
-
Object.entries(对象)
-
创建对象,可以接受二维数组和map
-
Object.fromEntries()
-
将字符串转换成对象格式
-
JSON.parse(要转换的数据)
-
用于拷贝对象,只能进行浅拷贝
-
Object.assign(拷贝对象,被拷贝的对象)
-
Es5修改添加对象
-
Object.defineProperty(对象名,属性名,{内容})
-
判断俩个值是否相等,与==不同的是这个可以判断NaN
-
Object.is(第一个值,第二个值)
-
对象合并,第二个对象会将第一个对象键名相同的值覆盖掉,其他的不会
-
Object.assign(第一个对象,第二个对象)
数字方法
-
下面所以的方法都不会改变原数组,需要使用变量接受结果
-
向下取整
-
Math.floor(数字)
-
向上取整
-
Math.ceil(数字)
-
取最大值
-
Math.max(数字)
-
取最小值
-
Math.min(数字)
-
求幂,a是数字,b是几次幂
-
Math.pow(a,b)
-
平方根,开出来都是正数
-
Math.sqrt(数字)
-
随机数
-
Math.random()
-
四舍五入
-
Math.round(数字)
-
判断是否为正数,返回true或者false
-
Number.isInteger(数字)
-
判断正数还是负数,返回1代表正数,-1代表负数,0代表0
-
Math.sign(数字)
-
幂运算,2的10次方
-
2 ** 10
函数
-
函数定义 function 函数名(函数参数){函数内容} 函数自调 (function 函数名(函数参数){函数内容})()
函数的柯里化
- 通过调用函数,然后继续返回函数,直到最后进行统一处理,这种情况叫做函数的柯里化
纯函数
-
只能是同样的输入(实参),必定得到同样的输出(返回)
-
必须遵守以下一些约束
-
不得改写参数数据
-
不会产生副作用,例如网络请求,输入输出设备
-
不能调用Data.now()或者Math.random()等不纯的方法
事件
-
点击事件 onclick 鼠标悬浮事件 onmousemove 鼠标移开事件 onmouseout 用户按下键盘事件 onkeydown 浏览器完成加载事件 onload 元素改变事件 onchange 双击事件 ondblclick 获取焦点事件 onfocus 失去焦点事件 onblur 键盘事件 onkeyup 屏幕变化事件 onresize
日期
-
获取日期 new Date() 获取当前天 getDate() 获取星期几 getDay() 获取年份 getFullYear() 获取月份 getMonth() 获取小时 getHours() 获取分钟 getMinutes() 获取秒 getSeconds()
判断条件语句
-
if判断 if(判断条件){}else{} switch判断 switch(判断值){case 第一个判断值: break;default: ;} 判断是不是文字,返回true或者false isNaN("要判断的值") 判断类型 typeof 三元运算表达式,this.weatherStatus为判断条件,?后面的为满足时候,:后面为不满足的时候 this.weatherStatus ? '炎热' : '凉爽'
添加删除节点操作
-
创建节点 document.createElement(标签名) 向当前节点中末尾添加子节点 当前节点.appendChild(新节点) 向当前节点中开头添加子节点 当前节点.insertBefore(新节点,当前节点) 删除节点 当前节点的父节点.removeChild(要删除的节点) 元素添加 insertAdjacentHTML("追加地方",追加内容) beforeBegin=标签开始前 afterBegin=标签开始后 beforeEnd=插入到标签结束标记前 afterEnd=插入到标签结束标记后 元素添加追加 appendChild("追加的子元素")
正则表达式
-
测试正则表达式 test() 匹配以谁开始 ^ 匹配以谁结束 $ 包含范围 [] 查找范围 ^[a-w]$ 查找单个 ^[]$ 字符组合 ^[a-dA-D1-9]$ 取反 [^] 可以出现0次或者多次 * 出现1次或者以上 + 出现0次或者1次 ? 出现3次 {3} 大于等于3次 {3,} 大于等于3并且小于等于16 {3,16} 匹配0-9的数字 \d 匹配除0-9数字之外的东西 \D 匹配任意的字母,数字和下划线 \w 匹配除了字母,数字和下划线 \W 匹配空格 \s 匹配除了空格之外的 \S 匹配文字 ^[\u4e00-\u9fa5]{2,8}$ 替换敏感词 replace(正则表达式,替换内容) 全局匹配 g 忽略大小写 i 全局匹配加忽略大小写 gi 手机号判断 (/^1(3|4|5|7|8)\d{9}$/.test(sjh))
构造函数
-
构造函数的创建 function 构造函数名(){} 构造函数方法 构造函数名.prototype.方法名 = function(){} 原型对象 prototype __proto__ 构造函数指向 call()
this指向
-
改变this指向1 call() 改变this指向2,传参以数组的方式传递 apply() 改变this指向3,不会调用函数 bind()
跳转
-
打开新网址跳转 window.open('http://localhost:8080/index') 在当前网页跳转 location.href='http://localhost:8080/index';
阻止事件冒泡
-
e.stopPropagation() 阻止事件冒泡 e.preventDefault() 阻止默认行为,例如a标签的跳转 ::v-deep
本地存储数据
-
本地存储永久存储在本地 localStorage 本地存储会话时候存储在本地 sessionStorage localStorage的使用,name为存储数据名称,"张三"为存储的数据源: 存储:localStorage.setItem("name","张三") 取出:localStorage.getItem("name") 删除:localStorage.removeItem("name") sessionStorage的使用,name为存储数据名称,"李四"为存储的数据源: 存储:sessionStorage.setItem("name","李四") 取出:sessionStorage.getItem("name") 删除:sessionStorage.removeItem("name") cookie的使用,name为字段名,"张三"为值,expires为过期时间为一天 存储:this.$Cookie.set('name', '张三', { expires: 1 }); 取出:this.$Cookie.get("name") 删除:this.$Cookie.remove("name")
try catch
-
try { //容易出错的代码 } catch(error) { //错误处理 }
ES6
- 介绍:ES6指的就是在2015年发布的js第六版本
结构赋值
-
介绍:数组结构赋值之后每个变量名对应所拥有的值,对象的话对应下面属性名所拥有的数据
-
数组解构: const list = [1,2,3,4] let [a,b,c,d] = list 对象解构: const obj = {name:'张三',age:18,list:function(){}} let {name,obj,list} = list
-
对象简介写法,当键名和定义的值名对应的时候直接这样写法更加简便
-
const name = "张三" const age = 19 const object = { name, age }
箭头函数
-
介绍:箭头函数没有this指向,同时也不能作为实例化对象,括号省略,当形参为一个的时候即可省略,省略花括号,当语句只有一条的时候可以进行省略,如果是return则直接省略掉return,直接写要返回的数据即可,箭头函数一般用于没有this指向的,有this指向的不建议使用
-
const me = (name,age) => { console.log(name), console.log(age) } const me = name => { console.log(name) } const me = num => num*num
-
函数初始值
-
function me(a,b,c=10){ return a+b+c } me(1,2)
扩展运算符
-
介绍:应用于合并,或者复制,伪数组转化成真数组
-
const list = [1,2,3] const list2 = [4,5,6] const list3 = [...list,...list2]
生成器
-
介绍:就是函数,但是里面的内容在调用的时候不会立刻进行执行,而是需要next()来进行执行下一步,例如先输出111,再调用输出222,也可以传递参数,传递的参数会作为上一次返回的结果,yield是暂停的,传递的参数会作为yield返回结果进行输出,第一个next是先进行执行,里面传递参数此时还没有yield执行,所以没有返回值
-
function * gen(){ console.log("111") console.log("222") console.log("333") } let gens = gen() gens.next() gens.next() function * gen(arg){ console.log(arg) const one = yield 111 console.log(one) yield 222 } let gens = gen('001') gens.next() gens.next('002')
Promise
-
介绍:promise是封装异步方法的,从而解决回调地狱的场景,异步操作一般有文件读取,定时器,ajax请求,在promise没出现之前都是使用的回调函数来进行操作完成之后的操作
-
回调地狱:回调地狱指的就是一共回调函数里面套着另外一共异步方法,依次往下
-
promise优点:解决回调地狱,链式调用
-
封装方法分为三步,第一步new一个promise对象,第二步在里面进行操作,根据自己所需要的返回成功还是失败,第三步使用.then方法来进行拿值,里面有两个函数,第一个代表成功之后的函数,第二个代表失败之后的函数,参考下面
-
let p = new Promise(function(resolve,reject){ setTimeout(() => { const data = '你好' const data2 = "抱歉,出错了!" reject(data2) }, 2000); }) p.then(function(value){ console.log("ok") console.log(value) },function(error){ console.error("error") console.error(error) })
promise.then方法
- 首先.then的时候会先判断是否为一个promise对象,如果不是一个peomise对象,那么就会返回成功,但是成功的值是undefined,如果是promise对象,那么根据调用成功回调还是失败回调来决定,返回的结果和数据就是你在上一个promise里面定义的结果和数据,以此类推,比如a=b=c,c此时等于1,则c的结果给了b,b的结果和c一样,b再将结果给a,此时a的结果和c一样,链式调用
promise.catch()方法
- 当返回失败的时候执行里面的操作
Promise.all([p1,p2])方法
- p1和p2是promise对象,然后使用该方法的时候会根据这俩promise对象返回的状态来确定最终的状态,一个返回为错误则最终返回为错误,全部为成功的时候返回成功
Promise.allSettled([p1,p2])方法
-
p1和p2是promise对象,然后使用该方法的时候返回为成功,但是他里面的两个p1和p2是各自返回的状态
-
Promise中断链
-
p.then(value =。 { return new Promise(() => {}) })
Set
介绍:set为一个集合类型,并且里面的元素都不相同,不可能有相同的元素
创建set使用new Set()
-
输出结果为张三,李四,小明,相同元素只有一个
-
const s2 = new Set(['张三','李四','小明','张三']) console.log(s2)
添加set元素使用add()
-
当添加的元素和之前里面所用的一样的时候,那么只有一个,不会同时出现两个的存在
-
s2.add('王五','李四')
删除set元素使用delete()
-
s2.delete('王五')
查找元素使用has()
-
会进行查找是否有小明这个元素,有的话返回true,反之则返回false
-
s2.has('小明')
Map
介绍:Map为一个键值队,里面可以存储各种各样的数据
创建map使用new Map()
-
输出结果为张三,李四,小明,相同元素只有一个
-
const m = new Map() console.log(m)
添加Map元素使用set()
-
当添加的元素和之前里面所用的一样的时候,那么只有一个,不会同时出现两个的存在
-
m.set("name","张三") m.set("age",18)
删除Map元素使用delete()
-
m.delete('age')
查找元素使用has()
-
会进行查找是否有age这个键值队,有的话返回true,反之则返回false
-
console.log(m.has('age'))
获取数据
-
获取名称
-
m.get("name")
class
类的创建
-
class Fother{ }
类的继承
-
class children extends Fother { }
构造函数
-
class Fother{ constructor(){ console.log("调用即执行") } }
调用父类中的构造函数 super(x,y)
-
class children extends Fother { constructor(){ super() } }
调用父类中的普通方法 super.方法名()
-
class Chidren extends Fother { chidProp(){ super.change() } }
类里面的私有属性,在外部使用name是访问不到的,只能在类里面进行使用
-
class Fother { constructor(){ this.#name = name } }
类的this指向
- 类中的this指向的是当前创建实例者,里面的方法只能通过当前实例进行调用的时候this指向的是当前实例,通过其他赋值将该方法赋值到其他上面调用的时候this指向的是undefined,因为在类中方法内部会开启严格模式,所以根本指向不到window实例对象
模块化
-
介绍:模块化就是指一个大型项目,拆分成多个小的文件,然后合并起来组成一个项目
-
优点:防止命名冲突,代码复用,高维护性
-
分为导入和导出
-
导出只需要在需要导出的变量面前加上export即可
-
第一种方法 export const name = "张三" 第二种方法 const name ="张三" const age = 19 export {name,age} 第三种多数据导出,使用的时候多加一层default export default{name,age}
-
导入
-
全部导入,存到m里面,只需要m.名称即可拿到数据 import * as m from "文件路径" 按需导入,比较好用 import {name} from "文件路径" default的导入 import {default as m} from "文件路径" 简便模式 import m from "文件路径"
-
导入npm包,npm下载完成之后直接使用import导入即可
-
import $ from "jQuery"
async
-
介绍:async是一个函数,它返回的为一个promise对象,如果里面返回的结果不是一个promise对象,那么返回状态都是成功,返回结果为return的数据,如果使用throw抛出错误,那么返回状态是失败,如果是里面返回的是一个promise对象,那么这个对象是什么状态async函数返回状态也是这个状态
-
async function m(){ return 'hello world' }
await
-
介绍:写在async函数里面的,返回的结果为promise成功的值
-
const P = new Promise((resolve,reject) => { resolve("成功了") }) async function m(){ const p = await P console.log(p); } m()
可选链操作符
-
介绍:就是判断有没有这个值,有话话才会进行后面的操作
-
function m(value){ const item = value?.list?.name console.log(item) } const data = { list:{ name:'张三' } } m() m(data)
指向全局浏览器对象
-
无论在任何地方使用,都是指向全局浏览器对象的,globalThis
-
console.log(globalThis)