JS中级部分知识

1. var\let\const的区别

区别	同名变量是否可以重新声明	能否重新赋值	变量提升	产生块级作用域
var	可以	可以	可以	不可以
let	不可以	可以	不可以	可以
const	不可以	不可以	不可以	可以

var : 淘汰使用  - 函数外部定义的同名变量会被污染(变量污染)
let   : 变化的数据使用let 
const : 定义常量,定义的同时必须赋一个初始值,一旦赋值就不能更改

2. 数组的内置方法

1. 不影响原数组 (8个)

   方法	理解	返回值
   join()	拼接为字符串	字符串
   indexOf()	返回元素索引	索引值
   lastIndexOf()	返回元素索引	索引值
   includes()	是否含有指定元素	布尔值
   slice()	截取数组	数组
   flat()	数组降维 数组扁平化 拉平数组	一维数组
   toString()	变为字符串	字符串
   concat()	合并数组	数组

2. 影响原数组 (7个)

   方法	理解	返回值
   push()	数组末尾添加元素	新数组的长度
   unshift()	数组开头添加元素	新数组的长度
   pop()	删除数组最后一个元素	删除的元素
   shift()	删除数组第一个元素	删除的元素
   splice()	删除 添加 替换元素	删除元素组成数组
   reverse()	数组逆序排列	逆序后的数组
   sort()	数组排序	排序后的数组

3. 遍历数组( 7个 )

   方法	理解	返回值
   forEach()	遍历数组,处理数据	没有
   find()	筛选出第一个满足条件的值	数组元素
   findIndex()	筛选出第一个满足条件值的索引	索引
   map()	遍历数组,处理数据	数组
   filter()	过滤数组	数组
   every()	是否每个元素都满足条件	布尔值
   some()	是否有一个元素满足条件	布尔值

3. 函数

1. 定义函数

   #1.声明式
   function 函数名(形参,形参){
     	return 结果
   }
   //声明式: 可以在定义之前或者之后调用
   #2.表达式
   const 函数名 = function(形参,形参){
     	return 结果
   }
   //表达式: 只能在定义之后调用函数
   区别: 
   	声明式: 定义之前之后都可以调用
       表达式: 定义之后调用
   
   

2. 参数默认值

   #1.声明式
   function 函数名(形参,形参=默认值){
     	return 结果
   }
   
   #2.表达式
   const 函数名 = function(形参,形参=默认值){
     	return 结果
   }
   
   //1.实参对象
   	arguments
       
   //2.理解
       1.每个函数都有一个实参对象,但是es6箭头函数除外
   	2.实参对象不是一个真正的数组,是一个伪数组(类数组),不能使用数组的内置方法
   	3.作用: 在实参个数不明情况下使用
   

3. 函数封装 [ 理解 ]

//1.封装函数的目的
	减少代码冗余
    方便后期修改维护
    复用: 重复使用  === 最大的作用

//2.如何封装
	变化的数据作为参数

4. 递归函数 [ 了解 ]

   1.认识递归

   函数内部: 自己调自己(自调)
   

   2.为什么要使用

   作用: 把复杂问题简单处理
   			 拆分           拆分		  拆分            拆分
   原理: 复杂问题 ======> 大问题 + 可以解决的问题 =====> 小问题 =====> 更小问题 =====>结果
   

   3.怎么使用

function 递归函数 (参数){
    
    功能代码;
    
    //入口条件: 什么时候调用
    if(入口条件为真){
        递归函数(参数)
    }
    
    
    功能代码; 
}

4. Object对象方法

#1.合并对象 
	Object.assign(目标对象, 源对象1, 源对象2)

//理解
将源对象合并到目标对象中,同名属性会覆盖

//使用场景
用于对象的浅拷贝
    
#2.对象键值组成数组
	Object.keys(对象)
	
#3.对象的值组成数组
	Object.values(对象)

5. Date对象方法

#1.创建当前系统时间
let curDate = new Date()

#2.创建指定时间
let assignDate = new Date(参数-字符串/时间戳)

#3.年
对象.getFullYear()

#4.月
对象.getMonth()   //0-11

#5.日
对象.getDate()

#6.时
对象.getHours()

#7.分
对象.getMinutes()

#8.秒
对象.getSeconds()

#9.毫秒
对象.getMilliseconds()

//星期
d.getDay()

//格式化日期对象为字符串
d.toLocalString()

#10.时间戳
对象.getTime() //指定日期的时间戳
Date.now() //当前时间戳

6. location对象

#1.作用
	操作地址栏
    
#2.url绝对路径
	https://www.itsource.cn:8080/index/0423/homework?name=小刘&age=12#maodian

#3.属性
	协议 (protocol) 	  : https://
	域名 (hostname) 	  : www.itsources.cn
	端口 (port)     	  : 8080
	页面路径 (pathname)  : /index/0423/homework
	参数 (search)		  : ?name=小刘&age=12
	哈希 (hash)		  : #maodian
    链接路径 (href)

#4.方法
	刷新页面: location.reload()

7. history对象

#1. 前进
	history.forward()

#2. 后退
	history.back()

#3. 前进/后退
	history.go()

8. 注册事件

1. DOM 0级事件

   #1.标签内部式
   <标签 onclick="js">
     
   #2.dom对象注册
   eleObj.onclick = function(){}
   

2. DOM 2级事件

   #1.添加事件监听器
   eleObj.addEventListener('click', function (){})
   

   区别:

   ​ dom0级同类型的事件只能注册一次

   ​ dom2级同类型的事件可以注册多次

9.事件对象

1. 概念

   //概念
   	有规则的表达式
       
   //作用
       主要是验证 检索 替换符合规则的字符串
       
   //组成
       是由数字 字母 元字符
   

2. 定义

   //1.实例化对象
   	const reg = new RegExp('规则', '模式修饰符')
       
   //2.字面量对象
       const reg = /规则/模式修饰符;
   

3. 测试方法

   //理解: 验证字符串是否符合reg规则
   	reg.test(字符串)
   

4. 验证合法性的正则表达式写法

   reg = /^[a-zA-Z]\d{5,11}$/
   reg = /^d{3}-d{8}|d{4}-d{7}$/
   

9.事件对象

#1.概念
	伴随事件产生的对象,包含了事件发生时的所有信息  (找事件源 事件类型...)
    事件四要素
    	事件源:触发事件的元素
        事件类型:事件源上发生了什么类型的事件
        事件处理函数(事件句柄):事件发生时所执行的操作
        事件对象:包含事件发生时的相关信息zzzzzzzz

#2.使用
	通常作为事件处理函数的第一个参数引入
    eleObj.addEventListener('click', function ( event | e ){})

#3.属性和方法
	事件源: e.target 
    事件类型: e.type
	水平坐标: e.clientX
	垂直坐标: e.clientY
	键码值  : e.keyCode e.which

	阻止浏览器默认行为: e.preventDefault()
	阻止事件冒泡      : e.stopPropagation()

    //概念
        描述元素接收事件的顺序

    //三个阶段
        捕获阶段: 从window一直向下传播到目标元素
        目标阶段: 目标元素接收事件的过程
        冒泡阶段: 目标元素一直向上传播到window

10. 事件委派

#1.设计原理
	根据事件冒泡原理实现
    
    先把事件注册在已存在的父辈元素上,通过点击后代元素,利用冒泡原理从而触发父辈元素上的事件,在事件内部通过判断筛选出具体元素
    //优点
        提升性能

    //解决问题
        解决动态添加的元素不能注册事件的问题

#2.实现方法
    父元素.addEventListener('click', function (e){
        //筛选出目标元素
        if(e.target.nodeName === '节点名'){
		}
        
        //筛选出目标元素
        if(e.target.classList.contains('类名')){
		}
        
        //筛选出目标元素
        if(e.target.localName === '标签名'){
		}
    })
    

11.ajax介绍 [ 了解 ]

//概念
	异步的javascript和xml
    
//优点
    最大优点: 在不更新整个网页前提下,对网页进行局部更新  === 无刷新技术
	其他优点: 减轻服务器的压力,按需请求数据,提高用户体验度

//缺点
	对搜索引擎支持不好

12.ajax中get请求 ( 4步 )

//#1.创建ajax对象
const ajax = new XMLHttpRequest();

//#2.配置请求
ajax.open('get', 'url?参数=值&参数=值');

//#3.监听
ajax.addEventListener('readystatechange', function (){
  //ajax请求的状态 http响应状态码
  if(ajax.readyState === 4 && ajax.status === 200){
      //响应数据
   	 JSON.parse(ajax.responseText) 
  }
})

//#4.发送
ajax.send()

13. ajax中post请求 ( 5步 )

//#1.创建ajax对象
const ajax = new XMLHttpRequest();

//#2.配置请求
ajax.open('post', 'url?参数=值&参数=值');

//#3.配置请求头
//ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
ajax.setRequestHeader('Content-Type', 'application/json')

//#4.监听
ajax.addEventListener('readystatechange', function (){
  //ajax请求的状态 http响应状态码
  if(ajax.readyState === 4 && ajax.status === 200){
     JSON.parse(ajax.responseText)
  }
})
//参数对象
const params = {
    account: "15982218481"
}
//#5.发送
//ajax.send('参数=值&参数=值')
ajax.send(JSON.stringify( params ))

14. axios中get请求

//方式一
axios.get('url?参数=值&参数=值')
.then(function (res){
    res:响应对象
    res.data: 响应数据
})

//方式二
axios.get('url',{
    params: {
        key: value,
        key: value
    }
})
.then(function (res){
    res:响应对象
    res.data: 响应数据
})

15. axios中post请求

axios.post('url', {
    key: value,
    key: value
})
.then(function (res){
    res:响应对象
    res.data: 响应数据
})

16. 同步异步 [ 理解 ]

1. 概念

   //同步(阻塞行为)
   当前事情没有做完,就不能继续执行后面的事情
   
   //异步(非阻塞行为)
   如果当前事情很耗时,无需等待执行完成,就可以做后面的事情
   
   //同步异步执行顺序
   先同后异  ===> 先执行同步后执行异步
   

2. 异步操作

   计时器
   事件
   ajax
   

17. ajax请求状态 - 面试题

0: 请求未初始化 
1: 已建立服务器链接
2: 请求已接收
3: 请求处理中 --- 开始接收响应数据, 没有完成
4: 请求已完成 --- 处理完成,接收到所有的响应数据

18. http响应状态码

200 : 成功

301 : 永久重定向
302 : 临时重定向
304 : 缓存

400 : 请求参数错误
401 : 未授权
403 : 服务器拒绝请求
404 : 找不到请求资源
405 : 请求方法不支持

500 : 服务器错误