JS中阶段

1. var\let\const的区别

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

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

2. 数组的内置方法

1. 不影响原数组

   #1.合并数组
   arr.concat()
   
   #2.拼接为字符串
   arr.join()
   
   #3.截取子数组
   arr.slice()
   
   #4.返回首次出现索引 - 从左向右
   arr.indexOf()
   
   #5.返回首次出现索引 - 从右向左
   arr.lastIndexOf()
   
   #6.是否含有指定元素
   arr.includes()
   
   #7.数组扁平化 数组降维
   arr.flat()
   
   #8.转为字符串
   arr.toString()
   
   

2. 影响原数组

   #1.末尾追加元素
   arr.push()
   
   #2.之前追加元素
   arr.unshift()
   
   #3.删除最后一个元素
   arr.pop()
   
   #4.删除第一个元素
   arr.shift()
   
   #5.删除 添加 替换
   arr.splice()
   
   #6.数组逆序
   arr.reverse()
   
   #7.数组排序
   arr.sort()
   
   

   ​

3. 遍历数组

   #1.遍历
      arr.forEach(function (v, i){})
   
      #2.处理数据
      arr.map(function (v, i){})
   
      #3.过滤数据
      arr.filter(function (v, i){})
   
      #4.筛选出第一个满足条件的值
      arr.find(function (v, i){})
   
      #5.筛选出第一个满足条件值的索引
      arr.findIndex(function (v, i){})
   
      #6.判断所有元素是否都满足条件
      arr.every(function (v, i){})
   
      #7.判断是否有一个元素满足条件
      arr.some(function (v, i){})
   

3. 函数

1. 定义函数

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

2. 参数默认值

   #1.声明式
   function 函数名(形参,形参=默认值){
     	return 结果
   }
   
   #2.表达式
   const 函数名 = function(形参,形参=默认值){
     	return 结果
   }
   

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()

#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. DOM0

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

2. DOM2

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

   区别:

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

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

   ​

9.事件对象

#1.概念
	伴随事件产生的对象,包含了事件发生时的所有信息  (找事件源 事件类型...)

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

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

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

10. 事件委派

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

#2.实现方法
  父辈对象.addEventListener('事件', function(e){
    if(e.target.nodeName === ''){

    }

    if(e.target.classList.contains('类名')){

    }
  })
    

11.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){
     ajax.responseText
  }
})

#4.发送
ajax.send()

12. 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){
     ajax.responseText //字符串
  }
})

#5.发送
//ajax.send('参数=值&参数=值')
ajax.send(JSON.stringify( {key:value, key:value} ))

13. axios中get请求

axios.get(url, {
  params: {
    参数: 值,
    参数: 值
  }
}).then(function (res){
  	//res: 响应对象
})

14. axios中post请求

axios.post(url, {
  参数: 值,
  参数: 值
}).then(function (res){
  	//res: 响应对象
})

15. ajax请求状态 - 面试题

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

16. http响应状态码

200 : 成功

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

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

500 : 服务器错误