JavaScript知识点

数据类型

1.基础数据类型
  Number String Boolean undefined Null
2.引用对象类型
  Object Function Array

常用数组操作

push、unshift、shift、pop、toString、
sort、map、forEach、split，join（合并为字符串）

数组splice

splice( start, delete, insert)
start：开始删除
delet：删除个数，不传则删除后面所有元素
insert：插入内容

判断数组arr

• arr instanceof Array
• arr.constructor == Array
• Object.prototype.toString.call(arr) === “[object Array]”
• Array.isArray(arr)

事件流模型

事件冒泡：具体元素接收，向父级元素传递
事件捕捉：事件从外层接收，向子元素进行传递，直到最具体
DOM事件流：三个阶段->事件捕捉，目标阶段，事件冒泡

类型转换

显示转换：parseInt()->转整数，parseFloat->转浮点型，
Number()->数字，toString()->字符串
隐式转换：变量的加减乘除

call和apply

改变作用域
传参数不一致；call传参为单个形参一个一个传
apply传参为数组形式

获取节点的方法

document.getElementById/ClassName/TagName/Name
除了Id其它返回均为数组；
document.querySelector，IE8+(含)，匹配多个，返回一个
document.querySelectorAll，返回全部-数组

节点的增删改查

dom.appendChild() 添加
dom.insertBefore() 插入
dom.replaceChild() 替换
dom.removeChild() 删除

闭包特性

1.函数嵌套函数
2.内部函数可访问外部函数的变量与参数
3.变量或参数不会被垃圾机制回收
优点：变量长期存在于内存中，避免变量污染，变量私有
缺点：存在内存泄漏的风险

cookie 与 localStorage，sessionStorage

cookies 大小限制 4KB
  浏览器限制cookie的数量：(单个站点）允许20个
  浏览器总数200个cookies
  每次发送请求都需要附带cookie
HTML5 支持至少4M
  localStorage, 无时间限制的数据存储方式，数据可以永久保存在客户端
  sessionStorage，绘画存储，页面关闭，缓存清除
  getItem(key) 获取key的value值
  key(index) 返回列表中对应索引key值
  removeItem(key) 移除key的键值对
  setItem(key, value) 存储对应的键值对key:value
  clear() 清除所有的key:value

ES5严格模式"use strict"

不支持with, arguments.callee,func.caller
变量必须先声明后赋值，拒绝重复属性与参数
局部this必须赋值（未赋值，this=undefined）

阻止事件冒泡

const stopBubble = function(event){
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancelBubble = true;
  }
}

跨域问题及解决方案

跨域存在的情况：端口、域名、协议-存在一个不相同即跨域
1.jsonp-支持get请求，静态资源js、css、img可以使用该方法

<!-- 示例1 -->
<script>
  function jsonpFunc(data){
    // 获取data
  }
</script>
<!-- 返回函数jsonpFunc(数据) -->
<script src="https://www.xzp.com/main/?callback=jsonpFunc"></script>
<!-- 示例2 -->
<script>
  $.ajax({type:"get", url:"https://www.xzp.com/main/?callback=jsonpFunc",
  dataType:"jsonp",success:function(response){
    // todo
  }});
</script>

2.cors跨域资源共享

// 后端新增代码
header("Access-Control-Allow-Origin:*");

3.代理->配置proxy

proxy:{
  '/':{
    target:'https://www.xzp.com/',
    changeOrigin:true //跨域
  }
}
$.ajax({type:"get", url:"/main/?callback=jsonpFunc",
dataType:"json",success:function(response){
  // todo
}});

---

网络

TCP/IP 四层应用模型

• 应用层 HTTP协议
• 传输层 TCP
• 网络层 IP
• 接口层 物理通信接口

IP（网络互连的协议）

IP地址存在唯一性
查看IP地址-> ipconfig

TCP/UDP协议

三次握手原则：浏览器->syn->服务器，服务器接收；
服务器->syn-ack->浏览器；浏览器->ack->服务器；

TCP与UDP的区别

TCP一对一；UDP一对N->支持多播与广播
TCP首部32字节，UDP首部8字节
TCP有状态连接，UDP无状态连接

http协议

超文本链接协议
无状态性：请求均为相互独立（不记录其他请求的状态）
request response
请求参数两种方法（url，request body）
get与post的区别：
GET-获取指定请求数据
POST-向服务器提交将要被处理的数据
get：1.请求可以被缓存；2.请求参数保留在浏览器历史中
3.限制上传数据长度，最大2kb；4.只允许ASCII字符；5.安全性较差
post：1.不可被缓存；2.参数不保存；3.更高安全性；

完整的http请求流程

• 通过域名解析得到IP地址
• 与服务器建立TCP连接，完成三次握手
• 客户端发起http请求
• 服务器将html发送给浏览器
• 浏览器解析html（js文件，css文件，图片下载-异步操作）
• 服务器关闭连接

http与https的区别

http基于TCP/IP协议，https基于SSL/TLS协议
http默认端口：80，https默认端口443
https安全性更强，需要CA证书

宏任务与微任务

宏任务->script、setTimeout、setInterval、I/O、UI render
微任务->Promise、object.observe、I/O 异常回调阶段

元素水平垂直居中

/* flex布局 */
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* table布局 */
.content {
  display: table;
  vertical-align: middle;
}

/* 已知 子元素宽高100px */
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

/* 绝对定位 */
.item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/* 行内元素 */
.item {
  text-align: center;
  line-height: 100px;
}

防抖与节流

防抖->持续触发事件，当指定时间段内不再触发，执行一次。
节流->多次触发事件，保证一定时间内只执行一次。

function fdFunction(fn, timeout){// 防抖
  let timer = null
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fu.call(this, arguments)
      timer = null
    }, timeout);
  }
}
function jlFunction(fn, timeout){// 节流
  let timer = null
  return function(){
    if(!timer){
      timer = setTimeout(() => {
        fn.call(this, arguments)
        timer = null
      }, timeout);
    }
  }
}

深拷贝与浅拷贝

浅拷贝：
concat->let arr = arr1.concat(arr2,arr3); 新数组
Object.assign->Object.assign(obj, obj1, obj2); obj
slice->let arr = arr.slice(2,4); 新数组
深拷贝：
let newObj = JSON.parse(JSON.stringify(obj));

函数柯里化（函数返回函数）

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，
并且返回接受余下的参数且返回结果的新函数
应用：参数复用、延迟执行
原理：函数里返回函数，将多次执行的参数合并起来，函数最后发生隐性转换toString，可在toString中执行需要执行的操作

function Currying(){
  // 定义数组存储所有参数
  let _args = Array.prototype.slice.call(arguments)
  let _adder = function(){
    _args.push(...arguments)
    return _adder
  }
  _adder.toString = function(){
    return _args.reduce(function(a,b){
      return a*1 + b*1
    },0)
  }
  return _adder
}

for of 与 for in 的区别

1.for of 不可以遍历对象
2.for in 获取键值，for of 获取键值对应的内容
3.for of 可以进行异步遍历，按先后顺序执行

document.ready与window.onload的区别

ready：dom树加载完成后执行
onload：整个页面资源加载完成后执行

常见http请求错误码

1xx(临时响应)需要请求者继续执行操作状态代码
  100：继续，请求者需要继续提出请求
  101：切换协议，请求者已要求服务器切换协议，服务器已确认并准备切换
2xx(成功)已成功处理请求
  200：成功，服务器已成功处理请求
  201：已创建，请求成功并且服务器创建新的资源
  202：已接受，服务器已接受请求，尚未处理
3xx(重定向)表示要完成请求，需要进一步操作
  304：未修改，（已存在缓存）服务器返回此响应，不会返回页面内容
4XX(请求错误)请求出差，服务器无法处理
  400：错误请求，服务器无法解析请求的语法
  401：未授权，请求需要验证身份
  403：禁止，服务器拒绝请求
  404：未找到，服务器找不到相关资源
  408：请求超时，服务器等候请求超时
  413：请求实体过大
  414：请求URL过长
5XX(服务器错误)服务器在尝试处理请求时发生内部错误
  500：服务器内部错误
  501：尚未实施，服务器不具备完成请求的
  503：服务器不可用

提高性能的技巧

1.避免频繁操作dom，多个相同dom操作可以放在一起
2.修改css样式，可以通过修改class或者csstext属性修改样式
3.将元素设置display:none后，操作dom，恢复显示，避免多次操作dom产生的重排重绘
4.需要频繁操作的dom，设置定位属性position为absolute和fixed

原型与原型链

原型：显示原型属性(prototype)与隐式原型属性(__proto__)
prototype属性指向原型对象，实例化对象可共享原型的属性与方法
原型链：继承的问题，对象均拥有原型对象，通过__proto__指向原型对象
并继承方法与属性，原型对象也会拥有原型，直到指向null

作用：实现数据共享，节约空间，实现继承

JavaScript计算丢失精度

原因：计算机使用二进制存储和处理数据，不可以精确表示浮点数
解决方法：数字运算转为整数运算，计算完成，再降幂

React使用index作为key

原因：逆序操作、input输入框
解决方法：给dom添加唯一的id

对象拷贝问题

原因：JSON.parse(JSON.stringify(obj))实现深拷贝：function、实例化对象、undefined失效
解决方法：for in 遍历，判断属性是否为对象的属性
hasOwnProperty(key) == true 则 拷贝
对属性值为object与array进行递归