0
点赞
收藏
分享

微信扫一扫

JavaScript/ES6

楠蛮鬼影 2022-04-26 阅读 139

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)
    
举报

相关推荐

0 条评论