【面试题】前端面试_基础问题_查缺补漏

文本和字体相关属性(color,font-family,line-height等)，列表样式相关属性（list-style-type，list-style-position，list-style-image ），表格布局相关属性（border-collapse，border-spacing等 ），其他属性（visibility, cursor ）

8.说一下flex布局

flex布局属于一种一维的布局模型。它决定了元素如何在页面上排列，使页面能够适应不同的屏幕尺寸。在CSS3之前，我们通常会使用浮动和定位的方式实现垂直居中，三栏布局等效果，甚至还需要配合margin使用。但有了flex之后，就可以很轻易地实现这种效果。

9.常用的居中方式？div盒子如何垂直居中？

CSS盒子垂直居中的常见方法 - 掘金 (juejin.cn)

10.一个swith按钮怎么实现？不借助JS

写一个原生switch开关按钮 - 掘金 (juejin.cn)

11.一个圆环有三层，每层颜色不同怎么实现？

用CSS实现一个圆环，圆环有三层，每层的颜色不同_chen_吉的博客-CSDN博客

12.讲讲媒体查询？

媒体查询能在不同的条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。

特点：第一，媒体查询可以针对不同的媒体类型定义不同的样式使用。第二，针对不同的屏幕尺寸设置不同的样式，设计响应式的页面时很好用。第三，重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

它的基本语法是：

@media 媒体类型(screen/all) 逻辑操作符 (and/not/only) 媒体功能(width：屏幕可见宽度；max-height：页面最大可见区域高度等)

13.栅栏系统如何使用和实现原理

栅格化系统的原理以及实现 - 知乎 (zhihu.com)

14.伪元素和伪类有什么区别？伪类有哪些？

区别：伪类是单冒号，伪元素是双冒号；伪类和伪元素的主要区别在于实现效果的过程中有没有创造新元素。

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，:hover，:active，:focus，:first-child，:nth-of-type(n)

15.举例行内标签和块级标签？单标签有哪些？

行内标签：<a>、<b>、<i>、<s>、<u>、<em>、<del>、<ins>、<span>、<strong>

块级标签：<p>、<h1~h6>、<ul>、<ol>、<dl>、<li>、<dd>、<dt>、<div>、<form>、<table>

行内块标签：<img>、<input>、<textarea>、<select>、<td>、<label>

单标签：<br><hr><img><input><param><meta><link>

16.谈谈回流和重绘

回流是对于DOM结构中的各个元素都有自己的盒子模型,浏览器根据计算结果将元素放到它该出现的位置。简单点说，就是元素的位置发生了改变;

重绘是各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍。即，元素位置不会发生改变，视觉效果会有所改变。

17.用flex布局实现瀑布流

Flex--弹性布局学习--flex瀑布流的实现_flex实现瀑布流_ღ故里᭄ꦿ࿐的博客-CSDN博客

18.判断图片是否加载成功和失败

判断图片是否加载成功和失败，需要在img 标签中添加onload事件和onerror事件。当图片的 url 地址存在且图片加载完成，则会触发onload事件。当图片 url 地址不存在或网络出错时，则触发onerror事件。并且，要在onerror事件中指定一个替换图片，否则还会触发onerror事件。

JS

1.如何判断对象为空？

JavaScript判断对象是否为空对象的几种方法_js判断.对象是否为空对象_年轻正好的博客-CSDN博客

2.JS的基本数据类型？新增数据类型？

基本数据类型包括:

（原始数据类型七种）Number，String，Boolean，Null，undefined，Symbol，BigInt

和 Object（数组、函数、日期，不是数据类型，它们都属于对象 Object ）

Symbol和BigInt是新增的。

3.null和undefined的区别？

null表示一个空对象。用 typeof 检测 null 返回是object。

undefined 是一个没有设置值的变量。typeof 检测undefined会返回 undefined。

null 和 undefined 的值相等，但类型不等。

4.什么是伪数组？常见的伪数组？伪数组转真数组？Array.of( )知道吗？

伪数组就是指类似数组的一个集合，他们拥有length属性和索引，但是其类型是Object；

它与数组的区别就是它们的对象原型。普通数组有很多数组的方法，比如说push，shift，map等等，而伪数组却没有。所以称这类结构类似数组，却没有数组方法的集合叫做伪数组。

常见的伪数组有arguments，获取元素的document.querySelectorAll( )得到的对象列表。

javascript中如何将伪数组转换成真数组 - 知乎

JS数组中Array.of()方法的使用 - 溢杨年华 - 博客园 (cnblogs.com)

5.===和==什么区别？

==与===的区别（JS）_==和===的区别_寒七七（静）的博客-CSDN博客

==会进行类型的转换之后再判断两者是否相等。而===不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话，再判断等式两边值是否相等。

===只有等式两边是全等（数据类型相同，值相同）的时候结果才会是true，否则全为false。

6.const定义的变量一定不能改变吗？

不是的，const声明的部分变量是可以改变的。

因为，const实际上保证的，并不是变量的值不能改动，而是变量指向的那个内存地址所保存的数据不得改动。对于const定义的原始类型的变量，他们的值就保存在变量指向的那个内存地址，因此等同于常量。

对于对象类型的数据，变量指向的是内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是不变的的，至于它指向的数据是不是可变的，const就完全不能控制了。

例如，对用const声明的数组，如果想该数组push一个元素，则不会报错（指针没变）。

7.for in，for of，forEach三者的不同

【JS】forEach，for in，for of的区别_chen_吉的博客-CSDN博客

for in主要用来遍历对象，可以得到对象的属性名和属性值并对其进行操作；

for of用来遍历Array，String，Symbol，Map，Set，arguments等，为每个不同属性的值执行语句。对象无法使用for of，会报错；

forEach用来遍历数组，对数组的每个元素执行一次给定的函数。

8.常用的数组方法？（对数组的增删改查以及es6常用的数组方法）

js+es6的数组方法总结_姑娘爱刚还菜的博客-CSDN博客

数组常见的方法（增删改查）_数组的增删改查方法_銭佳的博客-CSDN博客

9.判断一段字符串出现最多次的字符和次数

JS中求出字符串中出现次数最多的字符和出现次数-CSDN博客

10.判断一个数据是数组还是对象？

判断数据类型是数组还是对象(constructor、instanceof、toString())_故事迷人眼的博客-CSDN博客

11.Dom和Bom的区别？

第一区别：Dom是文档对象模型，使JavaScript操作Html，用来访问和操作HTML元素。

Bom是浏览器对象模型，能够让JavaScript控制浏览器的行为。例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等；

第二区别：Bom没有规则，Dom是要根据w3c的标准；

第三区别：BOM的最根本对象是window。DOM最根本对象是document。

12.查询DOM元素有哪些方法？请举例

js 获取dom元素的八种方法_js获取dom元素_飞马攻城师的博客-CSDN博客

通过ID获取：getElementById
通过name属性：getElementsByName
通过标签名：getElementsByTagName
通过类名：getElementsByClassName
获取html的方法：document.documentElement
获取body的方法：document.body

通过css选择器获取元素：document.querySelector(); document.querySelectorAll();

13.JS中如何获取body？（说出更多方法）

1. document.body

2. document.getElementsByTagName('body')[0]

14.如何将div添加到body中

JS中如何将div添加到body中-CSDN博客

15.事件委托？坏处？原理是什么？

JavaScript的事件委托（事件代理）原理_事件委托的实现原理_avoidaily的博客-CSDN博客

16.怎么将两个变量值互换？

JavaScript中交换变量a/b的多种方法（5种实现） - 掘金 (juejin.cn)

17.箭头函数和普通函数的区别？

前端面试系列-JavaScript-箭头函数(与普通函数的区别)_js面试箭头函数_LYFlied的博客-CSDN博客

18.谈谈浅拷贝和深拷贝

js中的浅拷贝和深拷贝（原理及方法）_js中的浅拷贝和深拷贝(原理)_codingWeb的博客-CSDN博客

19.谈谈节流和防抖

JS优化: 谈谈节流(throttle)和防抖(debounce)_一树梨花的博客-CSDN博客

19.原型链和类是什么关系？

JS基础系列之 —— 原型、原型链和类 - 知乎 (zhihu.com)

Vue

1.vue的生命周期？可以访问this的生命周期？

Vue生命周期详解_vue 生命周期_渣渣苏的博客-CSDN博客

创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性
created：实例已经完成了模板的编译，但是还没有挂载到页面中
beforeMount：此时已经完成了模板的翻译，但是还有完全挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用次函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
当执行 beforeDestroy 钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段；当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods，以及过滤器、指令、、都处于可用状态，此时，还没有真正执行销毁的过程
destroyed：Vue 实例销毁后调用。调用后，vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁