2021-07-18

1.JS

1.数据类型

1.基本类型

String 字符串

Number 数字

Boolean 布尔

null 空

undefined 未定义

Symbol（ES6新增）每个Symbol独一无二，可做对象的健

2.引用类型

Object

2.判断变量类型

1.Typeof

原理：使用低位存储了变量的类型信息，对象000，整型001，浮点型010，字符串100，布尔110。

2.Instanceof

instanceof检测一个对象A是不是另一个对象B的实例。

原理：查看对象B的prototype指向对象是否在对象A的链上。

3.Object.prototype.toString().call()原理[[class]]

3.数据类型转换

1.相等==、全等===

相等先转换操作数据的数据类型，再进行比较；

全等不转换操作数，直接比较，类型不一样直接false。

2.类型转换常用方法

转Number：Number(××)、parseInt(xx)、parseFloat(xx)，非数字直接返回NaN；

转String：toString()、String(xx);

转Boolen：Boolean(xx),除了undefined、null、0、NaN、”“转成false，其他均转为true。

3.强制转换和隐式转换

强制转换是使用一些类型转换的方法直接转换；

隐式转换是在执行运算操作的时候，根据运算符以及操作数自动对操作数的类型进行转换。

4.原型和原型链

实例的__proto__属性与构造函数的prototype属性值指向同一个引用；

使用一个实例的变量或方法时，先在当前实例里找，找不到就往上在这个实例的原型里找，再找不到就在原型的原型里找，以此类推，实在找不到，undefined；

一个实例可以使用其原型的方法以及变量。

function **one**() {

  this.occ = 'ss';

}



function **two**() {

  this.cco = 'ssd';

}

let cc = new **two**();

cc.__proto__ = one.prototype;

console.**log**(cc.cco) *//'ssd'*

优点：扩展对象。

5.闭包

一个函数使用了外层的局部变量，函数没有执行完时，该局部变量不会被销毁。

1.优点

可以封装一段代码，这样代码内部的变量就不会造成变量污染。

2.缺点

比较占内存、会导致网页性能变差。

6.call/apply/bind

这三个都是函数自带的方法，他们可以改变函数中this的指向。

let cc = {

  "name": "lms"

}


function **sayName**(*a*, *b*) {

  console.**log**(this.name + *a* + *b*);

}

**sayName**.**call**(cc, 1, 2);

call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

bind,和call，指定this指向的参数后，可以加入多个参数，而apply则接受一个数组作为参数。

let cc = {

  "name": "lms"

}


function **sayName**(*a*, *b*) {

  console.**log**(this.name + *a* + *b*);

}

**sayName**.**apply**(cc, [1, 2]);

let cc = {

  "name": "lms"

}



function **sayName**(*a*, *b*) {

  console.**log**(this.name + *a* + *b*);

}

let ccSayName = **sayName**.**bind**(cc, 1, 2);

**ccSayName**();

7.DOM事件流和事件委托

1.事件捕获、事件冒泡

事件冒泡：事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。

事件捕获：事件从最外层往里面一层一层捕获

2.事件委托的好处

减少事件注册，减少内存。

8.Cookie和storage

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
与服务器端通信	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

9.数组/对象常见的方法

1.数组

push:往数字尾部追加（参数可多个）；

pop：删除尾部一个元素；

shift：删除首个元素；

concat：连接两个数组；

slice:截取数组或字符串，不改变原对象；

splice：截取数组或对象，改变原对象；

filter：参数为一函数，过滤数组；

map：map()方法返回一个新数组，数组的元素为原始数组元素调用函数处理后的值。

10.New对象时内部做了什么

1. 创建一个新对象，如：var person = {};
2. 新对象的_proto_属性指向构造函数的原型对象prototype。
3. 将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）
4. 执行构造函数内部的代码，将属性添加给person中的this对象。
5. 返回新对象person。

11.防抖和节流

事件持续触发时，等事件一定时间不在触发时，再执行事件处理函数。

用个定时器实现节流。

12.requestAnimationFrame

优势

13.this指向

最后调用他的对象

14.作用域链

在一个作用域中使用一个变量时，先在当前作用域找这个变量，若找不到，就继续往上层作用域找。

16.异步编程：Promise和async await

Promise解决异步问题。

async 函数中可以加await，直接可以拿出异步数据。

17.箭头函数

• 箭头函数不能·使用new操作符，箭头函数没有prototype。
• 箭头函数不绑定this，若使用this，这个this指向包裹箭头函数的第一个普通函数的 this。

18.JavaScript运行机制

• 单线程

• 解释性语言 （运行一句，翻译一句， 需要依赖环境）

• 事件循环（Event Loop）

  调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。

• 宏任务/微任务

19.实现继承的方法

利用原型,将父类的实例作为子类的原型。

function **one**() { *//父类*

  this.occ = 'ss';

}



function **two**() { *//子类*

  this.cco = 'ssd';

}



two.prototype = new **one**();

let cc = new **two**();

console.**log**(cc.occ); *//'cc'*

20.垃圾回收

JavaScript 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，并删除那些不可访问的对象。

21.es6的新特性

• 多了const和let；
• 多了反引号；

let cc = "ss"

console.**log**(`cc ${cc}`) *//''cc ss''

• 解构，可以使用解构从数组和对象提取值并赋值给独特的变量

const point = [10, 25, -34];
const [x, y, z] = point;
console.log(x, y, z);

• for…of

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

22.Break 和 Continue

• break 语句“跳出”循环。
• continue 语句“跳过”循环中的一个迭代。

23.添加事件的方式

box.onlick= function(){}
box.addEventListener("click",function(){},false);
<button οnclick="box()"></button>

24.http和https的区别

1. http的信息是明文传输，https则通过ssl/tls加密传输。
2. https的步骤：
3. 客户端向服务端请求https连接()；
4. 服务端返回公钥；
5. 客户端产生密钥；
6. 客户端使用公钥对对称密钥进行加密；
7. 客户端发送密钥；
8. 通过对称密钥加密通信讯。

25.post请求的步骤

post请求的过程：

浏览器请求tcp连接（第一次握手）
服务器答应进行tcp连接（第二次握手）
浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
服务器返回100 Continue响应
浏览器发送数据
服务器返回200 OK响应

get请求的过程：
浏览器请求tcp连接（第一次握手）
服务器答应进行tcp连接（第二次握手）
浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
服务器返回200 OK响应
也就是说，目测get的总耗是post的2/3左右，这个口说无凭，网上已经有网友进行过测试

2.HTML-CSS3

1. css3新特性

RGBA和透明度

Background属性

Word-wrap属性：word-wrap属性允许长单词或URL地址换行到下一行；

Text-shadow：向文本设置阴影；

Font-face：定义自己的字体；

Border-radius：圆角；

Border-image：将图片定义为包围div的边框；

媒体查询：根据浏览器属性采用不同的属性。

2. 行标签和块标签的区别

• 块元素总是在新行上开始，高度，宽度，内外边距都可以进行控制，宽度度缺省是他的容器的100%，可以容纳其他元素。

• 行元素又叫内敛元素，元素在同一行内显示，内敛元素只能容纳文本或其他内敛元素，宽高不可控。

  把行内元素转换为块元素，使用display:block； 把块元素转换为行内元素，使用display:inline.

3. 非替换元素、替换元素

• 替换元素：根据标签的属性来判断显示具体内容；

• 非替换元素：相反。

4. DOCTYPE标签

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

• 兼容模式：页面以宽松的向后兼容方式显示，模拟老浏览器的行为防止站点无法正常工作。

• 标准模式：排版以及js运行模式都是以浏览器支持的最高标准运行；

5. W3C盒模型和怪异盒模型

怪异盒模型（IE盒模型）:宽高包括border，padding；标准盒模型不包括。

box-sizing：

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

6. 水平垂直居中的方法

• 负margin法：posotion：absolute；top：50%；left：50%；margin-top：-；margin-left：-；

• 弹性盒子法：

display: flex;

align-items: center;

justify-content: center;

7. BFC

BFC是什么？BFC（Block Formatting Context，块格式化上下文）

触发条件：

1、根元素（）

2、float值非none

3、overflow值非visible

4、display值为inline-block、table-cell、table-caption、flex、inline-flex

5、position值为absolute、fixed

特性：

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

2、计算BFC高度时浮动元素也参于计算（重点）

3、BFC的区域不会与浮动容器发生重叠（重点）

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器，容器内部元素不会影响容器外部元素

作用：

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；

2、可以利用BFC解决高度塌陷问题；

3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）

8. 清除浮动的方法

父级添加overflow: hidden；

通过属性clear:both;达到清除浮动的目的；

9.Position属性

​

10. CSS隐藏元素的方式

Display:none和visiblity:hidden的区别

1、display:none：元素彻底消失，很显然不会触发其点击事件

2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。

3、opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件

11. Flex布局（弹性布局）

Flex容器和项目的常见属性

容器属性：

flex-direction:

row从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

flex-wrap：换行

flex-flow:结合了flex-direction和flex-wrap

justify-content: flex-start flex-end center space-between

项目属性:

Order:项目排序顺序;

Flex-grow:项目放大比;

Flex-shrink:缩小比

align-self:设置单个项目对齐方式。

12. 双栏布局 三栏布局

双栏：左边float：left；右边margin-left；

三栏：外层盒子相对定位，内层绝对定位，左边left：0，右边right：0，中间margin左右。

13. 重排和重绘

DOM的变化影响到了元素的几何属性，浏览器重新构造渲染树，就叫做重排。

完成重排后，浏览器重新绘制受影响的部分到屏幕，就叫做重绘。

14. CSS选择器

优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

15. CSS动画

Animation属性:

@keyframes定义动画各个状态

Trasition属性：，指定状态变化所需要的时间

16. CSS实现三角形

设置宽高为0；

增加三个边框的厚度。

17. CSS Sprites

将图片进行拼合。

18. Px rem em

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；

em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。一般浏览器字体大小默认为16px，则2em == 32px；

rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。

vh:屏幕高度的1/100;

vw:屏幕宽度的1/100;

19. 伪类/伪元素

伪类	作用
:focus	将样式添加到被选中的元素
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	将特殊的样式添加到未被访问过的链接
:visited	将特殊的样式添加到访问过的链接
:first-child
lang
:active	将样式添加到被激活的元素

20. Img的title和alt属性

alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个 功能了。

21. Meta标签

指定一些对网站的描述。

3.Vue

1. 单页应用

概念：

优缺点：

比较单页应用与多页应用

2. MVVM

​

3. Vue的响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件都有对应的一个watcher实例，在组件渲染时会把这个组件接触过的数据记录为依赖，当数据的setter触发时，会通知watcher，进行重新渲染。

**Object.defineProperty()** 方法会直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象。

4. Data为什么是函数

vue的data是一个函数的原因是，确保每一个vue组件的实例是唯一的，数据是不共享的，更容易维护的

5. V-model的原理

本质上是<input :value=“test” @input=“test = $event.target.value”>

6. V-if和v-show的区别

v-if会根据条件决定是否渲染；

v-show则根据条件控制display的属性是none 还是 block；

7. Computed、watch、method

**Method:**需要用函数的方式调用，每次调用时都会重新加载。

Computed：可以以属性方式使用，依赖于data中的数据，data中的相关数据改变时才会重新计算。带有缓冲功能。

**Watch:**需要指定动作进行监听。

8. Vue的生命周期

beforeCreate*：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用.

destroyed:实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

哪个阶段能操作DOM

mounted

9. 父子组件间通信方式:

父传子

Props:[‘name’],

子传父：

This.emit

10. Vue的单向数据流

11. Keep-alive组件

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

12. Slot插槽

组件中先空出位置，以备使用组件的时候插入代码

13. Vue检测数组或对象的变化

Vm.$set()的做作用

14. 虚拟DOM

只改变数据不用操作DOM就能重新渲染页面。

原理：

优缺点：

优点：可以提高操作DOM的性能和效率；

Diff算法

Diff算法：前后节点进行对比，节点没变的话直接更新属性，有变的话重新渲染。

15. Vue中Key的作用

绑定数组中的元素，为了更高效地更新虚拟DOM

16. NextTick的原理

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

17. Vuex

State

Getter

Mutation

Action

Module

Dispatch和commit的区别

18. Vue-router的两种模式

hash:hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

history：包括back,forward,go三个方法，对应浏览器的前进，后退，跳转操作

19. Vue-router有哪几种导航钩子

• beforeRouteEnter 在进入当前组件对应的路由前调用
• beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
• beforeRouteLeave 在离开当前组件对应的路由前调用