JavaScript

引入外部js

<script type="text/javascript" src="路径"><script>

注释

//单行注释
/*多行注释*/

变量

声明变量的时候变量名不允许使用空格

数据类型

基本数据类型：数字型     number日期类型     date布尔类型     boolean字符串类型     string唯一标识	Symbol无值     undefined空值     null引用数据类型：数组类型     array  对象类型     object函数类型     function数据类型转换：转换成布尔类型，返回true或者false，unll，undefined，""，0返回的时fasleBoolean("要转换的内容")转换成数字类型     Number("要转换的内容")转换成字符串类型     String("要转换的内容")转换成对象格式     JSON.parse("要转换的内容")第二种转换字符串类型方法	toString("要转换的内容")

算数操作符

赋值	=
加法	+
减法	-
除法	/
乘法	*

比较运算符

大于等于	>=
小于等于	<=
大于	>
小于	<
等于	==
全等，要求类型也相等	===
不等于	!=
不全等	!==

逻辑操作符

多个条件的时候，必须都满足才会返回为true，一个不满足则返回为false	&&
多个条件的时候，满足一个条件的时候就会返回为true，都不满足则返回为false	||
取反	!

弹框

弹框     alert()
控制台输出     console.log()
输入弹框     prompt()
确认弹框	confirm()
写入		document.write()

声明变量三种方式

第一种声明变量，会有变量提升		var
第二种声明变量，不会变量提升，局部使用		let
第三种声明变量，不会变量提升，局部使用，不可直接修改值		const

循环

for循环     for(循环条件){}     
while循环     while(循环条件){}
while先执行一次再循环	do{}while(循环条件)
跳出当前循环		continue
终止循环操作		break

作用域

局部作用域	在函数内部可以访问到的属性，在外部访问不到，这样的情况一般是局部作用域
全局作用域	所定义的属性在任何地方都可以访问的到，那么这个就属于全局作用域，全局作用域是整个脚本；

定时器

setTimeout()	延迟定时器
setInterval()	定时器

DOM和BOM

BOM是浏览器对象，像一些浏览器提供的方法都术语BOM对象的方法
BOM是文档对象，当一个网页被创建出来的时候，会生成一个DOM树

获取元素

id获取     document.getElementById("id名")     
class获取     document.getElementsByClassName(“class名”)[0]     
标签获取     document.getElementsByTagName(“标签名”)[0]    
通过选择器获取     document.querySelector("要获取的id或者class")
通过标签获取     document.querySelectorAll()[0]

获取

获取或者写入，写入时不会看html代码		innerText("写入的内容")
获取或者写入，写入时会看html代码		innerHTML("写入的内容")
获取表单内容     value
获取长度     length
获取窗口的宽度     document.body.clientWidth   
获取窗口的高度     document.body.clientHeight   
获取卷起的高度     document.documentElement.scrollTop   
获取宽度     clientWidth  
获取高度     clientHeight  
找到父元素     parentNode   
文本框获取焦点     focus()

类型方法

字符串方法：字符串截取		split (分割符)字符串取数字		parseInt()字符串取小数		paresFloat()根据下标获取内容	字符串[下标]根据下标获取内容2     charAt()连接两个字符串     字符串1.concat(字符串2)根据下标拿区间值     substring(开头,结尾)返回字符串中字符第一次出现的位置     indexOf()返回最后一次出现的位置     lastIndexOf()将字符串里面的字母转换成小写的     toLowerCase()将字符串里面的值转换成大写的     toUpperCase()去除字符串两端空格     trim()去除字符串左侧空格     trimState()去除字符串右侧空格     trimEnd()根据下标拿区间值     slice(开始,结尾)数组方法：循环数组，拿到里面对象的名称，并且返回一个数组		arr.map(v => v.name)查找包含的值，返回true或者false     includes(要查找的值)删除数组最后一个元素     pop()删除数组第一个元素     shift()删除数组元素，a下标，b个数     splice(a,b)向数组的开头进行添加元素     unshift()向数组末尾添加元素     push()遍历数组     数组名.forEach(function(当前值,当前值的索引,数组本身){})筛选数组     数组名.filter(function(当前值,当前值的索引,数组本身){return 删选条件})筛选返回布尔，一个为true则返回为true     数组名.some(function(当前值,当前值的索引,数组本身){return 删选条件})筛选返回布尔，全部为true则返回为true     数组名.every(function(当前值,当前值的索引,数组本身){return 删选条件})把数组拼成一个字符串     join()返回当前元素的下标     数组名.indexOf("要查找的内容")对象方法：获取对象所有键名     Object.keys(对象)获取对象所有值     Object.values(对象)获取对象分解成数组，键名喝值都是数组成员     Object.entries(对象)创建对象，可以接受二维数组和map		 Object.fromEntries()添加值     对象名.属性名=属性值Es5修改添加     Object.defineProperty(对象名,属性名,{内容})设置值     value:值设置是否可以进行重写     writable:true/false设置遍历     enumerable:true/false设置是否可以删除修改     configurable:true/false对象浅拷贝     Object.assign(拷贝对象,被拷贝的对象)查找元素     find()查找满足条件数组中第一个返回值的下标     findIndex()

函数

函数定义	function 函数名(函数参数){函数内容}
ES6定义函数		var 函数名 = (函数参数) => {函数内容}
函数自调		(function 函数名(函数参数){函数内容})()

数字方法

向下取整     Math.floor()  
向上取整     Math.ceil()  
取最大值     Math.max()  
取最小值     Math.min()  
求幂     Math.pow(a,b)  
平方根     Math.sqrt()  
随机数     Math.random()  
四舍五入     Math.round()  
判断是否为整数		Number.isInteger(要判断的值)
判断正数还是负数，返回1代表正数，-1代表负数，0代表0	Math.sign(判断值)
幂运算，2的10次方		2 ** 10

事件

点击事件     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

元素操作

元素添加     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()

ES6-ES11中的方法

块级定义     let
块级定义不可修改值     const
箭头函数，里面没有this指向     () => {}
接受剩余参数，也是扩展运算符     ...a
伪数组转换真数组     Array.from()
查找字符串中值是否存在于开头     startsWith(要查找的内容)
查找字符串中值是否存在于结尾     endswith(要查找的内容)
字符串重复     repeat(重复次数)
对数组值进行判断     size
set数据结构方法添加     add()
set数据结构方法删除     delete()
set数据结构方法查找     has()
set数据结构方法清除     clear()

跳转

打开新网址跳转		window.open('http://localhost:8080/index')
在当前网页跳转		location.href='http://localhost:8080/index';

阻止事件冒泡

e.stopPropagation()
::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")

ES6~ES11

介绍：ES6指的就是在2015年发布的js第六版本

let和const

介绍：在es5的时候var声明的变量是有变量提升的，就是可以在声明之前输出，虽然输出的是undefined，但是可以输出，用let和const声明的变量在声明之前输出的话就会报错，同时还有作用域，只在当前作用域有用，const声明的变量还必须给初始值，否则会报错，const声明的变量也不可以进行直接修改，像对象格式的话可以通过名称.变量名 = 值，这种方法来进行修改不会报错，假如是一个数组，那么往里面添加一个元素删除一个元素也不会报错

let data = 123
const data = 123

结构赋值

介绍：数组结构赋值之后每个变量名对应所拥有的值，对象的话对应下面属性名所拥有的数据

数组解构：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 111console.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}
}

方法扩展

判断俩个值是否相等，与==不同的是这个可以判断NaN

Object.is(第一个值，第二个值)

对象合并，第二个对象会将第一个对象键名相同的值覆盖掉，其他的不会

Object.assign(第一个对象，第二个对象)

模块化

介绍：模块化就是指一个大型项目，拆分成多个小的文件，然后合并起来组成一个项目

优点：防止命名冲突，代码复用，高维护性

分为导入和导出

导出只需要在需要导出的变量面前加上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 Pconsole.log(p);
}
m()

可选链操作符

介绍：就是判断有没有这个值，有话话才会进行后面的操作

function m(value){const item = value?.list?.nameconsole.log(item)
}
const data = {list:{name:'张三'}
}
m()
m(data)

指向全局浏览器对象

无论在任何地方使用，都是指向全局浏览器对象的，globalThis

console.log(globalThis)