JS数据类型

JS 数据类型一共有 7 种，分为基本数据类型和引用数据类型：

基本数据类型：字符串（String）、数字 (Number)、布尔 (Boolean)、空（Null）、未定义（Undefined）、Symbol、BigInt。

Symbol：ES6 引入了一种新的原始数据类型，表示独一无二的值，主要用于解决属性名冲突的问题，做为标记

BigInt：是 ES2020 新增加的，在对大整数执行数据运算时，使用 BigInt会减少整数溢出问题

引用数据类型：对象 (Object)，其中包含了日期（Date）、函数（Function)、数组（Array）、正则（RegExp）等

两者总结区别：

1）声明变量时不同的内存分配：

基本：存储在栈中的简单数据段，它们的值直接存储在变量访问的位置

原因：基本类型数据占据的空间是固定的，所以将他们存储在较小的内存区域 —— 栈，便于迅速查寻变量的值

引用：存储在堆中的对象，存储在变量处的值是一个指针，指向存储对象的内存地址

原因：引用类型数据的大小会改变，不能把它放在栈中，否则会降低变量查寻速度，相反，地址的大小是固定的，可以存在栈中

2）复制变量时的不同

基本：变量复制时，会将原始值的副本赋值给新变量，此后两变量是完全独立的，他们只是拥有相同的值而已（深拷贝）

引用：变量复制时，会把内存地址赋值给新变量，新旧变量都指向了堆内存中的同一个对象，任何一个作出的改变都会影响另一个（浅拷贝）

null 和 undefined 的区别？

null 是一个表示” 无” 的对象，转为数值时为 0

undefined 是一个表示” 无” 的原始值，转为数值时为 NaN

undefined 表示此处应该有一个值，但是还没有定义。

典型用法是：

（1）变量被声明了，但没有赋值时，就等于 undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于 undefined。

（3）对象没有赋值的属性，该属性的值为 undefined。

（4）函数没有返回值时，默认返回 undefined。

null 表示” 没有对象”，即该处不应该有值。

典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

数据类型判断方法

typeof：一般用来判断基本数据类型

typeof 目前能返回 string，number，boolean，symbol，bigint，unfined，object，function 这八种判断类型

对于 null ，返回 object 类型。对于引用类型，除 function 返回 function 类型，一律返回 object 类型。

instanceof：一般用来判断引用数据类型的判断

instanceof 主要的作用就是判断一个实例是否属于某种类型

是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true, 否则返回 false。 instanceof 检测的是原型。

其实 instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。

Object.prototype.toString.call（这个是判断类型最准的方法）

如何实现 copy 一个数组

扩展运算符（浅拷贝）

numbers = [1, 2, 3];
numbersCopy = [...numbers];

Array.slice（浅拷贝）

// 当不给定参数时，就返回了原数组的拷贝
numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]

Array.concat（浅拷贝）

//不指定参数或者提供一个空数组作为参数，就可以进行浅拷贝
[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]

JSON.parse & JSON.stringify（深拷贝）

JSON.stringify 将一个对象转成字符串；JSON.parse 将转成的字符串转回对象。

将它们组合起来可以将对象转换成字符串，然后反转这个过程来创建一个全新的数据结构。

深拷贝和浅拷贝在内存上的区别

深拷贝与浅拷贝简单区分方法：假设 B 复制了 A，当修改 A 时，B 是否改变，若 B 也跟着变化，说明是浅拷贝；若 B 没变化，则是深拷贝

注意：一般情况下，深拷贝只针对较为复杂的 object 类型数据

基本数据类型：名与值都存储在栈内存中

当修改 a 时，对 b 并不会造成影响，因为此时的 b 具有独立的存储空间，不受 a 的影响了

引用数据类型：名存在栈内存中，值存在于堆内存中，栈内存会提供一个引用的地址指向堆内存中的值

当 b=a 时，其实 b 复制了 a 的引用地址，而并非堆内存中的值，而当 a [0]=1 时进行数组修改时，由于 a 与 b 指向的是同一个地址，自然 b 也受影响，这就是所谓的浅拷贝。

JQuery 和 Vue 的区别和各自的优点

JQuery偏重于对 DOM 的操作，经常要考虑怎么去渲染数据，怎么从视图中取到数据，操作数据前必须对 dom 节点

进行选取修改赋值等操作，分散了本该放在业务逻辑上的精力。

而 Vue 则是基于 MVVM 思想，数据驱动，双向绑定，只需要定义好渲染规则，如果数据发生改变，vue 会帮我们重

新渲染整个页面，所以我们只需将注意力放在数据操作上就可以了。

请问定位布局 position 属性有哪些取值？

1. 相对定位 relative

• 不会使元素脱离文档流（原本位置会被保留，即改变位置也不会占用新位置）

• 相对于自身原本位置移动（没有定位偏移量则对元素无影响）

• 不影响元素本身特性（无论块级元素或行内元素，保留其原本特性）

• 常用于提升层级，从而改变元素覆盖关系，若两个都为定位元素，后面的会覆盖前面

  2. 绝对定位 absolute

• 使元素完全脱离文档流（在文档流中不再占原来位置）

• 相对于最近一个有定位的父元素进行偏移，如果不存在就逐级向上排查，直到相对于 body 元素，即相对于浏览器窗口（必须有参照物）

• 子绝父相，一般配合相对定位使用，（将父元素设置相对定位，子元素相对于父元素偏移）

• 可提升层级

  3. 固定定位 fixed

• 直接相对于浏览器窗口进行 “绝对定位”

• 浮动在页面中，元素位置不会随浏览器窗口滚动条滚动而变化

• 不会受文档流动影响

  4. 粘性定位 sticky

• 基于用户的滚动来定位，在相对定位与绝对定位两者间切换。滚动前相当于 position:relative，当页面滚动超出目标区域时，相当于 position:fixed，会将元素固定在目标位置

• 相对于离它最近的具有滚动框的父级元素，如果父级元素都不可以滚动，那相对于浏览器窗口计算偏移量

• 如 top: 50px，在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，无论怎么滚动，都不再向上移动

• 兼容性不好，如 Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位，通常需要结合 CSS3 兼容方案

  5. 静态定位 static

• 默认定位，遵循正常的文档流

• 元素不会受到影响

  6. 继承值 inherit

• 从父元素继承 position 属性值

请问你了解浮动布局 float 属性吗

浮动布局：为方便页面设计，给元素设置 float 属性，将元素脱离文档流，浮动框进行左右移动，直至外边缘遇到包含框或者另一个浮动框边缘，再通过 margin 属性调整位置，float 属性可取 3 个值：left：左浮动、right：右浮动、none：不浮动（默认）

浮动的影响：

• 改变块级元素的排列方式，内容从上下排列显示变成水平排列显示
• 浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠
• 浮动的块级元素的宽度由内容撑开，行内元素可设宽高、margin 和 padding 均有效，可理解为隐式转换为 inline-block 元素

【延伸考点】

浮动布局最常产生什么问题？

通常父级盒子不设置高度时，高度将由内容或子元素撑开，当子元素浮动脱离文档流后， 父盒子就会出现高度塌陷，边框变成一条线，通常需要清除浮动来解决该问题

盒模型

包括内容区域、内边距区域、边框区域和外边距区域。

box-sizing: content-box（W3C 盒子模型）：元素的宽高大小表现为内容的大小。

box-sizing: border-box（IE 盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。IE5.x 和 IE6 在怪异模式中使用非标准的盒子模型，这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

请问 BFC 布局有哪些特点、触发条件以及实际应用

BFC（Block Formatting Context）：格式化上下文，也称 BFC 布局，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域，与其他元素隔离，不受外部布局影响

BFC 布局特点：

• 在 BFC 区域内，内部盒子会在垂直方向上一个接一个地放置
• 属于同一个 BFC 的两个相邻盒子的上下 margin 会发生重叠
• 同一个 BFC 区域内，设置了 float 属性的盒子不会重叠
• 计算 BFC 的高度时，区域内的浮动元素也参与计算

BFC 布局触发条件（满足任意一个即可形成 BFC）：

• 根元素
• 浮动元素：float 不为 none
• 绝对定位元素：position（absolute、fixed）
• display 为 inline-block、flex
• overflow ：hidden

BFC 布局实际应用：

• 清除浮动，通过设置 overflow:hidden 解决父元素坍塌问题
• 垂直 margin 合并，BFC 区域内两个相邻元素的垂直外边距会发生叠加，叠加后的外边距为两者外边距的最大值。这样可保持各区域间上下间距一致，比如多个段落之间与顶部底部的边距保持一致
• 防止垂直 margin 合并，反之可以在元素外层包裹一层容器，并触发该容器生成一个新的 BFC 布局，与相邻元素隔离开来
• 实现自适应双栏、三栏布局，利用浮动、定位、Flex 布局原理可实现多种自适应布局

CSS 选择器以及优先级

• !important

• 内联样式（1000）

• ID 选择器（0100）

• 类选择器 / 属性选择器 / 伪类选择器（0010）

• 元素选择器 / 伪元素选择器（0001）

• 关系选择器 / 通配符选择器（0000）

说一下原型链，原型对象

• 原型：
  • 概念：在构造函数创建的时候，系统默认的帮构造函数创建并关联一个对象 这个对象就是原型
  • 作用：在原型中的所有属性和方法，都可以被和其关联的构造函数创建出来的所有的对象共享
  • 特点：JavaScript 对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变
• 原型链：
  • 构造函数以及 js 原生 Object 对象之间的原型关系
  • 当一个对象调用的属性 / 方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
  • 如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找到属性 / 方法或 undefined 为止。从而形成了所谓的 “原型链”

无论何时，我们创建的每一个函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象，这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法。

prototype 就是通过该构造函数创建的某个实例的原型对象，但是其实 prototype 是每个构造函数的属性而已，只能说万物皆对象罢了。

原型对象的优点是：所有的对象实例都可以共享它包含的属性和方法。这一点可以在构造函数里就可以看出来，因为构造函数在函数里面就定义了对象的实例信息，而原型对象可以在任何地方定义属性和方法。

this指向

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，实际上 this 的最终指向的是那个调用它的对象

如果一个函数中有 this，但是它没有被上一级的对象所调用，那么 this 指向的就是 window

如果一个函数中有 this，这个函数有被上一级的对象所调用，那么 this 指向的就是上一级的对象。

如果一个函数中有 this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this 指向的也只是它上一级的对象

有 return 时，如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例。

call apply bind 区别/ 改变 this 指向的方法

共同点：都能用于改变 this 绑定。第一个参数都为改变 this 的指针。若第一参数为 null/undefined，this 默认指向

window第一个参数都为改变 this 的指针。

apply 与 call：都可以自动执行，但是参数传递方式不同。

call：接受一个参数列表，可以自动执行

apply：第二个参数被包裹在一个数组中，可以自动执行

bind：接受一个参数列表，不会自动执行，需要手动调用，返回值为一个新的函数

call、bind 与 apply 区别：前两个都有无数个参数，apply 只有两个参数，而且第二个参数为数组

详细说一下闭包和箭头函数，闭包和箭头函数分别解决了什么问题？

函数嵌套函数当内部函数访问外部函数变量时就产生了闭包

闭包的两个作用：

一个是内部函数可以直接访问外部函数的变量或参数

另一个是让这些变量的值始终保持在内存中，不会被垃圾回收机制回收。

使用闭包的注意点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。将调用闭包的属性或者函数指向 null。

箭头函数相当于匿名函数，并且简化了函数定义。

箭头函数中的 this 始终指向父级上下文，即定义时的 this，而不是执行时的 this。

call () /apply () /bind () 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响

箭头函数不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。

箭头函数不可以使用 arguments 对象，该对象在函数体内不存在。可以用展开运算符… 解决，arguments 是参数的集合， 是一个类数组 / 伪数组体现在他不能调用数组的方法

箭头函数没有 prototype 属性

HTML5 新特性

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放 (Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频 API (audio,video)

画布 (Canvas) API

地理 (Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术 webworker, websocket, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

CSS3新特性

CSS3 选择器

• nth 选择器

：first-child/last-child

选择属于父元素的首个 / 最后一个子元素的每个 element 元素，注意 element 为子元素。

：nth-child(n)

选择某元素下的第 n 个 element 元素（n 是一个简单的表达式，不能用其他的字母代替），括号里还可以传 odd 和 even 两个关键字

：nth-last-child(n)

匹配属于某元素下的第 n 个 element 子元素，从最后一个子元素开始计数

：nth-of-type(n)

匹配属于父元素的特定类型的第 n 个子元素，element 为指定类型的子元素

:nth-last-of-type

匹配属于父元素的特定类型的第 n 个子元素，从最后一个计数

:first-of-type/:last-of-type

匹配属于其父元素的特定类型的首个 / 最后一个子元素的每个元素

：only-child

匹配属于父元素的唯一子元素的每个元素

：only-of-type

匹配属于其父元素特定类型的唯一子元素的每个元素

：empty

匹配没有子元素（包括文本节点）的每个元素

• 否定选择器：not

定义：匹配非元素或者选择器的每个元素

语法：父元素：not (子元素或者选择器)

例：ul:not (span){}

• 伪元素 (也可以使用：)

element::first-line

定义：对元素的第一行文本进行设置，只能用于块级元素

element::first-letter

定义：用于向文本的首字母设置特殊样式，只能用于块级元素

element::before

定义：在元素的内容前面插入新内容，常与 content 配合使用

element::after

定义：在元素的内容后面插入新内容，常与 content 配合使用

element::selection

定义：用于设置浏览器中选中文本后的背景色与前景色

CSS3 边框与圆角

圆角 border-radius

定义：可以为元素添加圆角边框（块元素，行内块元素，行内元素）

属性：

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

盒阴影 box-shadow

定义：可以控制一个或多个下拉阴影的框

语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

CSS3 背景与渐变

background-image

backgroundimage:url('1.jpg‘),url('2.jpg')

注意：元素引入多个背景图片，前面图片会覆盖后面的图片

background-cilp

定义：指定背景的绘制区域（裁剪）

background-cilp：border-box / padding-box / content-box
border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）---默认
padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
content-box：背景被裁剪到内容框

background-origin

定义：设置背景图像的原始起始位置

background-origin：border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)
border-box：相对于边框来定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位

background-position:定义背景图片的位置，水平与垂直方向上面的偏移量(参考点)

background-repeat

定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置

background-size

定义：指定背景图像的大小

background-size：number / % / cover / contain

属性介绍：

number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现

线性渐变

定义：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变（从一边拉向另一边）

语法：background:linear-gradient(方向，开始颜色，结束颜色)

径向渐变

定义：从起点到终点，颜色从内向外进行圆形渐变

语法：background:radial-gradient (形状尺寸，开始颜色，结束颜色)

CSS3 过渡

定义：允许 css 的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变 css 的属性值。

transition-property 属性

定义：设置对象中的参与过渡的属性

语法：transition-property：none | all | property

参数说明：

none： 没有属性改变

all : 默认值，所有属性都改变

property： 元素的属性名 width,color 等

transition-duration 属性

定义：设置对象过渡的持续时间

语法：transition-duration：time

参数说明：

规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值 0

transition-timing-function 属性

定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法：只能使用一个属性值

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

transition-delay 属性

定义：设置对象延迟的过渡时间

语法：transition-delay：time

参数说明：

指定秒或者毫秒数来延迟动画效果的开始，默认是 0

transition 复合属性

语法：

transition ： property duration timing-function delay；

参数说明：过渡时间和延迟时间的顺序不能乱

CSS3 变换

定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。

rotate () 旋转

定义：通过指定一个角度参数，对元素指定一个 2D 的旋转

语法：transform：rotate (angle) 单位 deg

参数说明：angle 指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

translate () 平移

定义：根据 X 轴和 Y 轴的位置给定参数，使当前元素位置移动

translateX () 仅水平方向移动

语法：transform：translateX () 单位 px

translateY () 仅垂直方向移动

语法：transform：translateY () 单位 px

translate (x,y) 水平方向和垂直方向同时移动

语法：transform：translate (X, Y) 单位 px

注意：如果只写一个参数，第二个默认是 0，也就是只设置了水平方向上的位移

scale ( ) 缩放

定义：设置元素的缩放程度

分类：

scaleX ( ) 仅水平方向缩放

语法：transform：scaleX () 没有单位

scaleY ( ) 仅垂直方向缩放

子主题 语法：transform：scaleY () 没有单位

scale (x,y) 使元素水平和垂直方向同时缩放

语法：transform：scale (x,y) 没有单位

CSS3 动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果

@keyframes

定义：keyframes 关键帧，用来决定动画变化的关键位置

@keyframes animationname {keyframes-selector{cssStyles;}
}

animationname：必写项，定义动画的名称

keyframes-selector：必写项，动画持续时间的百分比 0% - 100% 之间， 或者使用 form 和 to 关键字也可以设置，form 代表 0%，to 代表 100%

animation 属性

animation-name 属性

设置对象所应用的动画名称

animation-duration 属性

定义：设置对象动画的持续时间

animation-timing-function 属性

定义：设置对象动画的过渡类型，即规定动画的速度曲线

animation-delay 属性

定义：设置动画的延迟时间

animation-iteration-count 属性

定义：设置对象动画的循环次数

animation-direction 属性

定义：设置对象动画是否反向运动

ES6 新增特性

一、块级作用域、块级变量 let、块级常量 const

var会发生变量提升现象，将变量提升到函数顶部或全局顶部

必须在let声明后调用该变量 (const和let一样)

let和const的这种现象称为暂时性死区

从块开始到let声明之间是“暂存死区”

二、箭头函数

this 对象的指向是可变的，但是在箭头函数中，它是固定的。箭头函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

三、参数处理（默认参数 /…）

给函数设置默认参数值，参数的传递是从左到右的

剩余参数允许我们将一个不定数量的参数表示为一个数组

function(a, b, ...theArgs) {...
}
//必须是函数的最后一个参数以...为前缀
//它是由剩余实参组成的Array数组
//这个例子中的theArgs收集第三个以及之后的所有实参

展开运算符（…）:可以在函数调用 / 数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。

四、模板字面量 (模板字符串)

由反引号 `来代替单引号 ’ 或者双引号" 。

带标签的模板字符串：标签使我们可以用函数来解析模板字符串。${ person }

五、对象的扩展

创建对象时可以简化方法和重名的键值对

六、解构赋值

是一种 Javascript 表达式,目的就是将数组中的值或对象中的属性方便的提取到其他变量中

//可以用来交换变量
var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

七、模块（import/export）

export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

八、类（class/extends）

ES6 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为 JavaScript 引入新的面向对象的继承模型。

九、 Promise

Promise 是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise、Promise.all、Promise.race 分别怎么用？

Promise.all () 实现多任务并行。一个页面聊天系统，我们需要从两个不同的 URL 分别获得用户的个人信息和好友列表，这两个任务是需要并行执行的。

Promise.race () 实现多任务赛跑。有些时候，多个异步任务是为了容错。比如，同时向两个 URL 读取用户的个人信息，只需要获得先返回的结果即可，其他任务的结果会被丢弃。

JS 异步编程方案

JS 异步编程进化史：callback -> promise -> generator -> async/await

async/await 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

async/await 函数相对于 Promise，优势体现在：处理 then 的调用链，能够更清晰准确的写出代码，并且也能优雅地解决回调地狱问题。

当然 async/await 函数也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低，代码没有依赖性的话，完全可以使用 Promise.all 的方式。

async/await 函数对 Generator 函数的改进，体现在以下三点：内置执行器、更广的适用性、更好的语义。

vue 如何导入插件？

npm 安装，然后在 main.js 里 import导入相应的插件后，然后 Vue.use (xx) 后便可全局使用

从浏览器地址栏输⼊ url 到显示页面中的过程

分为 4 个步骤：

1）浏览器发送一个 URL 请求

2） 浏览器与服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。

3）一旦 TCP/IP 连接建立，浏览器向服务器发送 HTTP 的 GET 请求。服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4）此时，服务器提供资源服务，客户端开始下载资源。

请求返回后，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Tree，加载 JS，构建渲染树

浏览器渲染过程

• 解析 HTML，生成 DOM 树
• 解析 CSS，生成 CSSOM 树
• 将 DOM 树和 CSSOM 树结合，生成渲染树 (Render Tree)
• Layout (回流)：根据生成的渲染树，进行回流 (Layout)，得到节点的几何信息（位置，大小）
• Painting (重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display：将像素发送给 GPU，展示在页面上。

get 和 post 的区别

• GET 是获取数据的，而 POST 是提交数据的。
• GET 在浏览器回退时是无害的，而 POST 会再次提交请求。
• GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有。
• 对参数的数据类型，GET 只接受 ASCII 字符，而 POST 没有限制。
• GET 参数通过 URL 传递，POST 放在 Request body 中。
• GET 不能用来传递敏感信息，因为参数直接暴露在 URL 上。

实现垂直水平居中的方法

元素宽高固定时（设元素宽高为 100px）：

• absolute + 负 margin

.box {     position:absolute;;     top:50%;left:50%;     margin-left:-50px;     margin-top:-50px;
}

• absolute + margin auto

.box {     position:absolute;;     top:0;left:0;right:0;     bottom:0;    margin:auto;
}

• absolute + calc()

.box{     position:absolute;;     top:calc(50% - 50px);     left:calc(50% - 50px);
}

元素宽高未知时：

• absolute + transform

.box{position:absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);
}

• table，需要先打造一个表格结构，再将盒子放入单元格中，表格单元格中的内容本身就是垂直居中的，此法弊端：增加了很多冗余代码

<table><tbody><tr><td class="wp"><div class="box">123</div></td></tr></tbody>
</table>
<style type="text/css">.wp{text-align: center;}
.box{display: inline-block;
}</style>

• css-table，CSS 新增的 table 属性，直接把普通元素，变为 table 元素的现实效果，原理与用 table 一样，但没有那么多的冗余代码

<div class="wp">    <div class="box">123</div>
</div>
<style type="text/css">.wp{display: table-cell;text-align: center;vertical-align: middle;
}
.box{display: inline-block;
}</style>

• flex 布局

<div class="wp">    <div class="box">123</div>
</div>
<style type="text/css">.wp{display: flex;justify-content: center;align-items: center;
}</style>

• grid 布局，CSS 新出的网格布局，代码量少，但兼容性不太好

<div class="wp">    <div class="box">123</div>
</div>
<style type="text/css">.wp{display: grid;
}
.box{align-self: center;justify-self: center;
}</style>

总结：宽高固定时，推荐 absolute + 负 margin；宽高不固定，推荐 flex

flex 布局中如何解决内容溢出的问题

第一种方案：对父元素增加 overflow: hidden

第二种方案： 对父元素限定宽度，对父元素设置width: 0

Flex 实现两列布局

这里简单实现一下（其实应该使用 flex-basis 属性）：

<div class="box"><div class="box-left"></div><div class="box-right"></div>
</div>.box {height: 200px;display: flex;
}
.box > div {height: 100%;
}
.box-left {width: 200px;background-color: blue;
}
.box-right {flex: 1; // 设置flex-grow属性为1，默认为0overflow: hidden;background-color: red;
}

如何实现文本溢出后使用… 代替

width:100px; //指定文本能显示的宽度为 100px；
overflow: hidden;     //超出 width 设定宽度的文本被隐藏
white-space: nowrap;    //设置文本不会换行，直到遇到 <br> 标签为止；
text-overflow:ellipsis;    //当文本溢出包含元素时，用省略号（...）代替。

伪类与伪元素

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为 “伪” 元素。

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3 规范中的要求使用双冒号 (:

2022春招Web前端高频面试题（自用，附答案）相关推荐

1. 20道前端高频面试题（附答案）

   setTimeout 模拟 setInterval 描述:使用setTimeout模拟实现setInterval的功能. 实现: const mySetInterval(fn, time) {let ...

2. 2022春招各大厂高频面试题汇总

   原创微信公众号:[小鸿星空科技] 版权声明:原创不易,本文禁止抄袭.转载,侵权必究! 目录 一.Python(后端/服务端/算法/测试开发) 二.Java(后端/服务端/算法/测试开发) 三.原文链接 ...

3. 网易游戏雷火2020春招web前端工程师笔试卷0425

   网易游戏雷火2020春招web前端工程师笔试卷0425 考试信息 笔试题型 详情 单选 不定项 编程题 问答题 考试信息 招聘单位:网易游戏雷火事业群校园招聘 岗位:前端开发工程师 回复时间:2020 ...

4. 2021-02-252021 互联网大厂年度总结1000+道高频面试题（附答案解析）冲刺2021

   2021 互联网大厂年度总结1000+道高频面试题(附答案解析)冲刺2021 1.String类能不能被继承?为什么? 不能 因为string类是被final修饰的类,final修饰过的类不能被继承. ...

5. 2022年必刷前端高频面试题

   老张前端: 2022年必刷前端面试题,前端高频面试题,前端面试题 第一章 面试题基础篇 1.1 HTML面试题 1.1.1 行内元素有哪些?块级元素有哪些? 空(void)元素有哪些? 行内元素:sp ...

6. Web前端岗位面试题汇总(含答案)

   HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...

7. js打印到控制台_前端JS，8个问题测试你真的懂吗（高频面试题，附答案）

   为了保证的可读性,本文采用意译而非直译. JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质.浏览器是JavaScript的主要运行的地方,两者在我们的服务中协同工作.JS有一些概念, ...

8. 前端面试——那些web前端经典面试题大全及答案（html/css部分)

   阅读目录 HTML/CSS部分 JavaScript部分 JQuery部分 开发及性能优化部分 HTML/CSS部分 1.什么是盒子模型 在网页中,一个元素站有空间的大小由几个部分构成,其中包括元素的 ...

9. 软件测试面试，一定要准备的7个高频面试题（附答案，建议收藏）

   收集了2022年最新的面试题后,负责就业的黑马讲师们整理出了7个高频出现的面试题,一起来看看. 高频问题1:请自我介绍下? 高频问题2:请介绍下最近做过的项目? 高频问题3:请介绍下你印象深刻的bug ...

最新文章

1. 以技术面试官的经验分享毕业生和初级程序员通过面试的技巧（Java后端方向）...
2. Async await 异步编程说明
3. 查找工具locate和find
4. iptables官方文档
5. 计算机辅助初中数学教学,计算机辅助数学教学的优势
6. Android8.0 开机启动脚本,Android开机启动shell脚本（Android 8.0测试OK）
7. Matlab之程序的暂停与中止
8. 西门子200恒压供水梯形图_抚州市谁家的二次叠压供水设备有望统引领消费主流...
9. 微信小程序入门6-微信公众号授权登录(适用于H5小程序)
10. 高等代数期末考试题库及答案_高等代数Ⅱ答案期末答案
11. RFID射频识别的解读及应用
12. C#篇-unity和序列化和反序列
13. matlab 门函数频谱,时域门函数及门函数串的频谱分析
14. 如何用Word制作流程图(一)
15. android wps 连接wifi密码,怎样在不知道密码的情况下连接WiFi？
16. ARM芯片的时钟系统详解(S5PV210芯片)
17. nginx开启日志和配置日志文件路径
18. git报错ssh: Could not resolve hostname dev-nys: Name or service not known fatal: Could not read from r
19. pako java_java压缩字符串，前端接收pako解压
20. 护卫神mysql_hws_Bypass 护卫神SQL注入防御（多姿势）

热门文章

1. vb.net 教程 20-4 库存管理系统3.9 入库管理（FormStorageIn）
2. 哈密顿回路/路径学习
3. flash as3做事件处理中缺省行为
4. count（*）、count（1）和count（列名）的区别
5. 远程办公的管理者怎样做到让员工自管理，并且提升人效
6. vscode微信小程序插件配置
7. 国密算法SSL安全通道Tomcat9的配置，适配360国密浏览器，密信国密浏览器，海泰红莲花国密浏览器
8. 用 Python 写一个颜值测试小工具！你的颜值有几分了？
9. 区块链中哈希算法c语言代码,解析区块链中的核心技术哈希（Hash）算法
10. 【论文写作】之LaTeX中插入Visio图文件