记录面试题，答案到处查的

javaScript是一门什么样的语言，它有什么特点？

弱类型语言

特点：

解释性执行
面向对象
简单
安全
事件驱动
跨平台性

javaScript的数据类型都有什么？

在 JS 中共有 8 种基础的数据类型，分别为： Undefined 、 Null 、 Boolean 、 Number 、 String 、 Object 、 Symbol 、 BigInt

备注：

Symbol 代表独一无二的值，最大的用法是用来定义对象的唯一属性名。
BigInt 可以表示任意大小的整数。

希望获取到页面中所有的CheckBox怎么做？

var getCK=document.getElementsByTagName('input');
var j=0;

for(var i=0;i<getCK.length;i++)
{
whichObj=getCK[i];
if(whichObj.type=="checkbox")
{
whichObj.checked=false;
j++;
}
}

什么是ajax和json，各自的优缺点？

ajax的概念：ajax是一种通过后台与服务器进行少量的数据交换，实现页面异步更新，是一种创建交互式网页应用的网页开发技术。

json的概念：json是一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性

ajax的优缺点

优点：

异步请求响应快，用户体验好；
页面无刷新、数据局部更新；
按需取数据，减少了冗余请求和服务器的负担；

缺点：

异步回调问题、
this指向问题、
路由跳转back问题；
对搜索引擎的支持比较弱，对于一些手机还不是很好的支持

json的优缺点

数据格式比较简单，易于读写，格式都是压缩的，占用宽带小
支持多种语言，.JSON格式的编码比较简单
JSON的解码难度较低比起XML简单的多
JSON和js交互更加方便
JSON的速度远远快于XML

cookie的优缺点

优点：

不需要任何服务器资源，因为cookie是存储在客户端并发送给服务器读取
可配置到期规则，控制cookie的生命周期，使之不会永远有效，偷盗者可能拿到的是一个过期的cookie
简单性，基于文件的轻量结构

缺点：

cookie的数量和长度都有限制

数量：cookie的数量有限
长度：每个cookie的长度不超过4k，否则会被截掉

潜在的安全风险：cookie可能被截取篡改，如果cookie被拦截，就可能会获取到所有的Session信息
用户配置为禁用，有的用户禁用了浏览器或者客户端设备接受cookie的能力，因此限制了这一功能
有些状态不可能保存在客户端，例如，为了防止重复提交表达，需要在服务器端保存一个计时器，如果把这个计时器保存在客户端，它将不起作用。

display：none和visibility：hidden的区别？

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

position的absolute与fixed共同点与不同点？

相同点：都是脱离文档流，不占据空间

区别：

absolute是定位相对于浏览器，它的根元素是可以设定的，在父元素上设定定位relative。

fixed相对于浏览器窗口

css的盒子模型

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。

js截取字符串 asdfgh, 要fgh

slice(),substring()和substr()

dom操作---添加、移除、移动、复制、创建和查找节点

(1) 创建新节点

　　createDocumentFragment() //创建一个DOM片段

　　createElement() //创建一个具体的元素

　　createTextNode() //创建一个文本节点

(2) 添加、移除、替换、插入

　　appendChild()

　　removeChild()

　　redplaceChild()

　　insertBefore() //在已有的子节点前插入一个新的子节点

(3) 查找

　　getElementsByTagName() //通过标签名称

　　getElementsByName() //通过元素的Name属性的值(IE容错能力较强会得到一个数组，其中包括id等于name值的)

　　getElementById() //通过元素Id，唯一性

js中怎么序列化json字符串

JSON.parse()

闭包是什么？有什么特性？

函数A 里面包含了函数B，而函数B 里面使用了函数A 的变量，那么函数B 被称为闭包。

又或者：闭包就是能够读取其他函数内部变量的函数

闭包的特征

函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收制回收

对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

在js中，函数即闭包，只有函数才会产生作用域的概念

闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中

闭包的另一个用处，是封装对象的私有属性和私有方法

闭包的好处

能够实现封装和缓存等

闭包的坏处

就是消耗内存、不正当使用会造成内存溢出的问题

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露

解决方法是：在退出函数之前，将不使用的局部变量全部删除

数组方法pop、push、unshift、shift？

pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
push：将参数添加到原数组末尾，并返回数组的长度
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
unshift：将参数添加到原数组开头，并返回数组的长度

css优先级算法如何计算？

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

输出

 a.value = 1;
 b = a;
 b.value = 2;
 alert(a.value);//==>2

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

--可以通过query ,param两种方式区别: query通过url传参，刷新页面还在 params刷新页面不在了 params的类型:

配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123 vue-router的动态路由

简单说 mapGetter mapState的使用

v-show和v-if指令的共同点和不同点？

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show，运行时较少改变时用v-if
v-if=‘false’ v-if是条件渲染，当false的时候不会渲染

手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；
编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；
编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show 是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且 DOM 元素保留；
性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
使用场景：v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

对vue生命周期的理解

在Vue中实例从创建到销毁的过程就是生命周期

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

beforeCreate -> created

初始化vue实例，进行数据观测

created

完成数据观测，属性与方法的运算，watch、event事件回调的配置

可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算

此时vm.$el 并没有被创建

created -> beforeMount

判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译

优先级： render > template > outerHTML

vm.el获取到的是挂载DOM的

beforeMount

在此阶段可获取到vm.el

此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

beforeMount -> mounted

此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

更新的数据必须是被渲染在模板上的（el、template、render之一）

此时view层还未更新

若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

完成view层的更新

若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

beforeDestroy

实例被销毁前调用，此时实例属性与方法仍可访问

destroyed

完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器并不能清除DOM，仅仅销毁实例

封装vue组件的过程

vue组件间的通信

父组件给子组件传值，可以使用props向子组件传递数据
子组件向父组件通信，子组件通过$emit触发事件，回调给父组件
非父子，兄弟组件之间通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递

简述一下 src 与 href 的区别？

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame等元素。
会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
这也是为什么将 js 脚本放在底部而不是头部。

px 和 em 的区别

相同点：px 和 em 都是长度单位；
异同点：px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
12px=0.75em, 10px=0.625em

Web Storage 与 Cookie 相比存在的优势。

(1)、存储空间更大：IE8 下每个独立的存储空间为 10M，其他浏览器实现略有不同，但都比 Cookie 要大很多。

(2)、存储内容不会发送到服务器：当设置了 Cookie 后，Cookie 的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而 Web Storage 中的数据则仅仅是存在本地，不会与服务器发生任何交互。

(3)、更多丰富易用的接口：Web Storage 提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear 等,使得数据操作更为简便。cookie 需要自己封装。

(4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

cookie、sessionStorage、localStorage区别

相同点：存储在客户端

不同点：

cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

var和let/const的区别

const 声明的为常量
var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；
var 存在变量提升现象，而 let 和 const 没有此类现象， let 声明存在暂时性死区（TDZ）。
var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。

VUE2、vue3的区别

vue3支持vue2的大多数特性，实现对vue2的兼容
vue3对比vue2具有明显的性能提升
打包大小减少41%
初次渲染快55%，更新快133%
内存使用减少54%
vue3具有的composition API实现逻辑模块化和重用
增加了新特性，如Teleport组件，全局API的修改和优化等
响应式原理的不同
生命周期的不同
默认项目目录结构的不同
vue3对全局API的优化

箭头函数

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

箭头函数没有prototype(原型)，所以箭头函数本身没有this
箭头函数的this在定义的时候继承自外层第一个普通函数的this。
如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
箭头函数的this指向全局，使用arguments会报未声明的错误。
箭头函数的this指向普通函数时,它的argumens继承于该普通函数
使用new调用箭头函数会报错，因为箭头函数没有constructor
箭头函数不支持new.target
箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
箭头函数相对于普通函数语法更简洁优雅

箭头函数的注意事项及不适用场景

箭头函数的注意事项：

箭头函数一条语句返回对象字面量，需要加括号
箭头函数在参数和箭头之间不能换行
箭头函数的解析顺序相对||靠前

不适用场景：

箭头函数的this意外指向和代码的可读性。

get和post的区别

GET在浏览器回退不会再次请求，POST会再次提交请求
GET请求会被浏览器主动缓存，POST不会，要手动设置
GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
GET请求在URL中传送的参数是有长度限制的，而POST没有限制
GET参数通过URL传递，POST放在Request body中
GET参数暴露在地址栏不安全，POST放在报文内部更安全
GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
GET产生一个TCP数据包；POST产生两个TCP数据包

http和https

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
HTTP 是不安全的，而 HTTPS 是安全的
HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
HTTP 无法加密，而HTTPS 对传输的数据进行加密
HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

深拷贝和浅拷贝

递归递归去复制所有层级属性。

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

slice

let a=[0,1,[2,3],4],
        b=a.slice();
a[0]=1;
a[2][0]=1;
console.log(a,b);

a 输出  [1,1,[1,3],4]
b 输出  [0,1,[1,3],4]

JSON对象的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

a 输出  [1,1,[1,3],4]
b 输出  [0,1,[2,3],4]

JQ的extend方法

let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

a 输出  [1,1,[1,3],4]
b 输出  [0,1,[2,3],4]
可以看到，效果与上面方法一样，只是需要依赖JQ库