JavaScript/ES6
- 引入外部js
- 注释
- 变量
- 代码折叠块
- 断点测试
- 抛出错误
- 数据类型
- 基本数据类型
- 引用数据类型
- 类型转换
- 算数操作符
- 比较运算符
- 逻辑操作符
- 弹框
- 声明变量方式
- 循环
- 循环语句
- 循环操作
- 作用域
- 定时器
- DOM和BOM
- 获取元素
- 获取
- 字符串方法
- 数组方法
- 下面所以的方法都会改变原数组
- 下面所以的方法都不会改变原数组，需要使用变量接受结果
- 对象方法
- 数字方法
- 函数
- 函数的柯里化
- 纯函数
- 事件
- 日期
- 判断条件语句
- 添加删除节点操作
- 正则表达式
- 构造函数
- this指向
- 跳转
- 阻止事件冒泡
- 本地存储数据
- try catch
- ES6
- 结构赋值
- 箭头函数
- 扩展运算符
- 生成器
- Promise
- promise.then方法
- promise.catch()方法
- Promise.all([p1,p2])方法
- Promise.allSettled([p1,p2])方法
- Set
- 创建set使用new Set()
- 添加set元素使用add()
- 删除set元素使用delete()
- 查找元素使用has()
- Map
- 创建map使用new Map()
- 添加Map元素使用set()
- 删除Map元素使用delete()
- 查找元素使用has()
- 获取数据
- class
- 类的创建
- 类的继承
- 构造函数
- 调用父类中的构造函数 super(x,y)
- 调用父类中的普通方法 super.方法名()
- 类里面的私有属性，在外部使用name是访问不到的，只能在类里面进行使用
- 类的this指向
- 模块化
- async
- await
- 可选链操作符
- 指向全局浏览器对象
引入外部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)
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
