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进行递归
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值