100%会被问到的面试题（js篇）

sessionStorage、localStorage、cookie之间的区别

共同点：都是保存在浏览器端，且同源



区别：cookie的数据会再浏览器和服务器之间来回传递

而sessionStorage和localStorage不会自动把数据发送到服务器，仅在本地保存

localStroage里面存储的数据没有过期时间设置，而存储在sessionStorage里面的数据在页面会话结束时会被清除

同源：协议、域名、端口号

简述get和post 的区别

get 请求传参通过问号来进行拼接，请求的数据是显示的，不是隐藏的
get传递的参数比较少，但速度比较快
post传递的数据更多一些，传递的速度比较慢，请求的数据是隐藏的相对安全一些

post数据区分表单和JSON类型需要在http协议请求头中加一个Content-Type（表单：application/x-www-form-urlencoded JSON数据：application/json）

如何组织默认冒泡和默认事件

event.stopPropagation（）方法，这是阻止事件冒泡的方法
event.preventDefault()方法，这是阻止默认事件的方法
return false 全部阻止 简单粗暴

new操作到底做了什么

创建一个新对象
让this指向这个对象
给这个对象添加属性和方法
返回这个新对象

this指向

在全局作用域下 this指向window
在局部作用域下 this指向调用它的对象

浅克隆和深克隆

浅克隆：就是只赋值引用地址，不复制内容
深克隆：所有元素属性完全赋值，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中

深克隆的实现：JSON.Stringify 和JSON.parse 转一下
function deepClone2(obj) {
  let _obj = JSON.stringify(obj),
  return JSON.parse(_obj);
}

浅克隆的实现：直接用...实现

h5新特性

localStore
sessionStore
<canvas>
<footer>
<header>
<mian>
<video>
<audio>
input里type 的一些新属性

js常见的数据结构

数组
栈
队列
链表
树
图
堆
哈希表

移动端适配

rem布局  rem跟整个body的font-size有关， 如果body的font-size是16px 那么1rem就是16px

vw配合媒体查询  vw布局是将屏幕分成100份 1vw表示其中的一份，与媒体查询配合使用

弹性盒子

宏任务和微任务

js语言是单线程的
宏任务：setTimeout setInterval
微任务：Promise.then Promise 是同步的 then是异步的

事件轮询机制：
   
   在一次事件循环汇总，会先执行js线程的主任务，然后会去查找是否有任务
   如果有微任务优先执行微任务，如果没有，再查找宏任务

执行顺序：主任务>微任务>宏任务

async/await

async 是Generator函数的语法糖

Generator 函数的执行必须依靠执行器， 而async 自在执行器，调用方式和普通函数一样
async 函数返回值是Promise对象可以直接使用 then()方法进行调用

原型链

当调取一个对象的属性时，会先在本身查找，如果没有就去他的原型上查找，如果还没有，就去原型的原型上查找，以此类推 最后会达到 顶层 Object.prototype 他的原型指向null如果也没有 就返回undefined
这样连接起来的链条称为原型链

节流函数和防抖函数

节流函数：函数执行一次之后，只有大于设定的时间后才会执行第二次
应用场景：轮播图

防抖函数：在规定时间内，只让最后一次生效，前面不生效
应用场景：输入框的搜索功能

 

 如果new一个箭头函数会怎么样

箭头函数没有prototype，也没有自己的this指向，更不可以使用arguments 参数，所有不能new一个箭头函数

箭头函数和普通函数的区别

箭头函数比普通函数更加简洁
箭头函数没有自己的this
箭头函数继承来的this指向不会改变
箭头函数不能作为构造函数使用
箭头函数没有自己的arguments

call、apply、bind的区别

call方法使用一个指定的this值和单独给出的一个或多个参数来调用函数
apply方法使用一个指定的this值和单独户给出的一个或多个数组来调用一个函数

bind会返回一个新的函数，需要再次调用

Es5的继承和Es6的继承有什么区别

Es5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上

Es6的继承是先创建父类的实例对象 this （所以必须先调用父类的super（）方法） 然后再用子类的构造函数修改this

http状态码

1开头的是信息状态码
2开头的是请求成功
3开头的是重定向
4开头的是客服端错误
5开头的是服务器错误

Es5的map和Es6的map

Es5map：返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值，第二个参数则为一个对象，可以更改this，默认情况下是window可以省略函数内的参数时数组的下标和值

Es6map：map类似于对象，但普通对象的key必须是字符串或者数字，而map的key 可以是任何数据类型

数组方法

join（）转换为字符串
toString（） 转换为字符串
toLocalString（）转换为字符串
split（）字符串转数组
push（）和pop（） 尾部添加删除
shift（）和unshift（） 头部添加删除
sort（）排序
reverse（） 反转
concat（）数组拼接
replice（） 替换
slice（）截取
splice（）删除
indexOf（）lastIndexOf（）查找
forEach（）对数组进行遍历
map（） 对数组进行遍历 return
filter（） 过滤
every（） 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
some（） 判断数组中是否存在满足项 只要有一项满足条件 就会返回true
reduce（）和reduceRight（） 

插槽slot

定义时不知道具体要显示什么，只是留出来显示的位置，在组件调用时写具体内容，能展现在预留的位置上

js脚本延迟加载的方式有哪些

defer属性
async属性
动态创建DOM方式
使用setTimout延迟方法

defer和async的区别

defer是加载完整个页面再运行js，有多个defer的标签时，会按照顺序下载执行

async是下载完成立即执行，此时会阻塞dom渲染 所以async的script最好不要操作dom 因为是下载完立即执行，不能保证多个加载时的先后顺序

为什么arguments参数时类数组而不是数组

arguments和数组相似，但是没有数组常见的方法
它可以通过call apply转换成数组形式

对面向对象的理解

对象是一个容器 里面封装了属性和方法 
可以调用这些属性和方法

特点：封装性 继承性 多态性

set 

es6新增的数据结构
特点：元素是唯一的，可以用来做去重

es6新特性

let const 扩展运算符（...）
箭头函数
symbol、set、map新的数据类型和数据结构
proxy代理拦截
异步解决方案：promise、 async/await
class类
module模块

闭包

函数中定义的局部函数，该局部函数在函数的外部使用

优点：可以从函数外部访问函数内部的变量
缺点：造成内存泄露

作用域的作用

分类：全局作用域、局部作用域、块级作用域
作用：隔离变量

继承方式

原型链继承
借用构造函数继承
组合继承
原型式继承
寄生继承
寄生式组合继承

创建对象的方式

字面量创建
构造函数创建
object.create()

什么是原型

原型式对象，js中有2个 prototype 和 __proto__都叫原型属性 即是属性，又是对象
函数定义的时候，显示原型prototype和隐式原型__proto__就已经产生了
prototype：是共有的属性和方法
是每个实例对象 都有__proto__指构造函数
普通函数和构造函数都有 prototype
作用是 共享数据，节省内存空间，还可以实现继承

应用 ： Vue事件总线 Vue.prototype.$bus = this

事件冒泡、捕获

事件冒泡：是指在一个对象上触发一个时间如果该对象存在事件就触发，如果没有就向这个对象的父级传播最终父级触发事件（从内向外扩散）

捕获：从外向内

什么是类

他是构造函数的语法糖，在底层中使用仍然是原型和基于原型的继承

算法

这个网站上有你需要的所有算法

前端面试十大经典排序算法（动画演示）_踏着阳光2020的博客-CSDN博客_冒泡排序动画