---

前言

本篇内容基本是前端开发必备技能，不算什么高深有难度的题型，一起来学习下吧。

---

一、html 相关

1.1 行内元素和块级元素分别有哪些？

1. 行内元素：

span、a、b、strong、img、input、textarea、select、em、del

2. 块级元素：

address、center、h1-h6、p、pre、ul、ol、dl、table、div、form

3. 它们之间的区别：

   • 块级元素 可以设置宽高，设置 margin 和 padding 都有效，可以自动换行，排列默认从上到下

   • 行内元素 设置宽高无效，对 margin 设置左右方向有效，而上下无效。不会自动换行。

1.2 IE盒子模型和标准盒子模型

1. 标准盒子模型

   height 包含了content 的高度，不包括 padding 的内边距和 border 。
   盒子的总宽度 = margin + border + padding + width
   width = content 的宽度

2. IE盒子模型

   height 不但包括 content 的高度，还包括 padding 和 border 的宽度。
   盒子的总宽度 = margin + width
   width = content 的宽度 + border边框宽度(左右) + padding内边距(左右)

二、css 相关

2.1 选择器

由高到低：
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

2.2 设置垂直居中的方法

方法1： 利用 position: absolute ;

父元素：相对定位
子元素：绝对定位

.child{
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

方法2：元素 display 定义为 flex 。

<div class="flex-container"><div class="flex-item">居中的内容</div>
</div>

.flex-container {display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中，可选 */height: 200px; /* 容器的高度，可以根据需要设置 */
}.flex-item {/* 子元素样式，如果需要的话 */
}

方法3：设置文本 line-height 值和容器高度一致，然后 text-align: center ;

2.3 定位的几种方式

CSS定位的几种方式包括：

1. 静态定位（Static Positioning）：这是默认定位方式，不需要特别声明。
2. 相对定位（Relative Positioning）：相对于其正常位置进行定位。
3. 绝对定位（Absolute Positioning）：相对于最近的非静态定位的父元素进行定位。
4. 固定定位（Fixed Positioning）：相对于浏览器窗口进行定位，无论滚动条如何滚动都会固定在屏幕的指定位置。
5. 粘性定位（Sticky Positioning）：根据用户的滚动位置在相对和固定定位之间切换。

示例代码：

/* 静态定位 */
.static {position: static; /* 这是默认值，可以省略 */
}/* 相对定位 */
.relative {position: relative;top: 10px; /* 向下移动10px */left: 20px; /* 向右移动20px */
}/* 绝对定位 */
.absolute {position: absolute;top: 50px; /* 相对于最近的定位祖先元素向下移动50px */right: 30px; /* 向右移动30px */
}/* 固定定位 */
.fixed {position: fixed;bottom: 0; /* 固定在底部 */left: 0; /* 固定在左边 */
}/* 粘性定位 */
.sticky {position: -webkit-sticky; /* 针对Safari, Chrome, Edge等Webkit内核浏览器 */position: sticky; /* 标准语法 */top: 0; /* 当向下滚动超过此元素时固定在顶部 */
}

2.4 清除浮动的几种方式

1. 使用额外的标签，并为其应用 clear 属性：

<div style="float: left;">浮动内容</div>
<div style="clear: both;"></div>

2. 使用伪元素 ::after 来清除父元素的浮动：

.clearfix::after {content: "";display: table;clear: both;
}

<div class="clearfix">浮动内容</div>

3. 使用 overflow 属性为非 visible 的值（如 auto 或 hidden）

.overflow-method {overflow: auto; /* 或者使用 'hidden' */
}

<div class="overflow-method">浮动内容</div>

4. 使用 Flexbox 或 Grid 布局方式，这些方法不需要清除浮动：

.flex-container {display: flex;
}

<div class="flex-container">浮动内容</div>

5. 使用 display: inline-block 和 vertical-align 属性清除内联元素的浮动：

.inline-block-method {display: inline-block;vertical-align: top;
}

<div class="inline-block-method">浮动内容</div>

2.5 rem、em、px、vw、vh区别

1. rem 是相对 html 根元素 font-size 的值。

2. em 继承父元素的字体大小，相对长度单位。

3. px 像素，绝对单位长度

4. vw 视图宽度

5. vh 视图高度

2.6 响应式和自适应布局的区别

1. 响应式：不同分辨率下设备灵活性好，它比自适应好，自适应的话只是宽度自适应；多终端视觉和用户操作体验好；响应式 web 设计中的大部分技术都可以用在 webapp 开发中，可以用在移动端设备，也可以用在 pc 端。
   尺寸：媒体查询、百分比、vw/vh、rem

2. 自适应：又称为 宽度百分比 或者 流式布局 ，对页面进行压缩

2.7 元素隐藏的几种方式

1. display:none; 性能消耗较大，因为涉及到 dom 操作。

2. visibility:hidden;

3. opacity:0;

4. z-index:负值；

5. 绝对定位将元素移除可视区域；

6. color 透明度 设置为0

2.8 canvas 和 svg 的区别

1. Canvas 是基于像素的绘图技术。在使用 Canvas 时，开发者可以通过 JavaScript 动态地在画布上绘制图形、文字和图像。

2. SVG 是基于矢量的绘图技术。SVG 使用 XML 描述图形，开发者可以通过 XML 元素来定义图形的结构和样式。

三、Javascript 相关

3.1 数组的用法

常规用法：forEach、map、for…in、for…of 、join、push、shift、unshift、splice、slice、concat、indexOf…

for...in 循环的是数组的下标

for...of 循环的是数组每一项的值

1、forEach 没有返回值，返回为 undefined；map有返回值，可以 return 出来。

2、forEach 会改变原数组，map 不会改变原数组，会存储新数组并返回。

es6数组：set、map、filter

has ：将匹配元素集合缩减为包含特定元素的后代的集合，在数组中寻找是否包含有匹配的值。

用法：

var a=new Set([1,2,3]);
var b=new Set([4,3,2]);
var interset=new Set([...a].filter(x=>b.has(x)));

set 是一种叫集合的数据结构，map 是一种叫字典的数据结构。

集合：[value,value]

字典：[key,value]

3.2 深拷贝和浅拷贝

JavaScript的数据类型分为：

基本类型: Number,String,Boolean,Undefined,Null,Symbol,BigInt；

引用类型: 对象(Object),数组(Array),函数(Function)；

浅拷贝：保存在栈内存中

1、展开语法，let newobj={...obj}

2、Object.assign 进行对象的合并

3、Array.prototype.contact()

4、Array.prototype.,slice()

深拷贝：保存在堆内存中

1、deepClone()

2、Object.entries(obj)

3、JSON.parse(JSON.stringify(待拷贝对象)

4、jQuery 中的 $.extend() 第一个参数设置为 true 为深拷贝，为 false 为浅拷贝(要引入JQuery库)

5、引入 loadsh ,提供 cloneDeep 实现

备注：json.stringfy() 将对象、数组转换成字符串；json.parse() 将字符串转成 json 对象。

3.3 浏览器存储的方式

浏览器存储的方式包括：cookies，localstorage，sessionstorage，WebSQL，IndexedDB 。

1. cookies 在HTML5标准签本地存储的主要方式，优点兼容性好，请求头自带 cookie 方便。缺点：大小只有 4k ,自动请求头加入 cookie 浪费流量。

2. Localstorage 操作方便，永久性存储，除非手动删除。大小为 5M ;

3. Sessionstorage 页面关闭后会被清理，是会话级别的存储方式。

3.4 排序的方法

1. sort()方法

var arr = [123,203,23,13,34,65,65,45,89,13,1];
function func(a,b){return a-b;
}
console.log(arr.sort(func)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

2. 选择排序

var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){//如果第一个比第二个大，就交换他们两个位置if(arr[i]>arr[j]){var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

3. 冒泡排序

var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0; i<arr.length-1; i++){//每一轮比较要比多少次for(var j=0; j<arr.length-1-i; j++){//如果第一个比第二个大，就交换他们两个位置if(arr[j]>arr[j+1]){var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}    
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

4. 插入排序

var arr = [123,203,23,13,34,65,65,45,89,13,1];
var preIndex, current;
for(var i=1;i<arr.length;i++){preIndex = i-1;current = arr[i];while(preIndex>=0 && arr[preIndex]>current) {arr[preIndex+1] = arr[preIndex];preIndex--;}arr[preIndex+1] = current;
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

5. 快速排序

var arr = [123,203,23,13,34,65,65,45,89,13,1];	
//创建快速排序函数
function quickSort(tempArr){//递归终止条件if(tempArr.length<=1){return tempArr;};//取基准var pivotIndex = Math.floor(tempArr.length/2);var pivot = tempArr.splice(pivotIndex,1);//分左右var leftArr = [];var rightArr = [];for(var i=0;i<tempArr.length;i++){if(tempArr[i]>pivot){rightArr.push(tempArr[i]);}else{leftArr.push(tempArr[i]);};};return quickSort(leftArr).concat(pivot,quickSort(rightArr));
};
console.log(quickSort(arr)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

3.5 闭包

闭包 就是能够读取其他函数 内部变量 的函数，它是定义在 函数内部 的函数。

1. 变量私有化

2. 让变量始终保存在内存中

弊端： 闭包会使函数中的变量都被保存在内存中，内存消耗很大，不能滥用，否则会造成网页性能问题；解决方法 是在退出函数之前，将不使用的局部变量全部删除。

3.6 Javascript的垃圾回收机制

1. 如果一个对象不再被引用，那么这个对象就会被 GC 回收。

2. 如果两个对象互相引用，而不再被第三者所引用，那么这两个对象都会被回收。

3. 事件循环机制

3.7 事件循环(event loop)

1. 任务队列：先进先出

2. 同步任务和异步任务

   • 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务

   • 异步任务：不进入主线程、而进入 "任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

3. 同步任务 > 宏任务 > 微任务

• 同步任务，最外层的 console.log 最先打印，async 也属于同步任务

• 宏任务：setTimeout、setInterval

• 微任务：process.nextTick(node)、Promise、Object.observe(已废弃)、MutationObserver(html5新特性)

过程：

1. 执行宏任务队列中第一个任务，执行完后移除它

2. 执行所有的微任务，执行完后移除它们

3. 执行下一轮宏任务（重复步骤2）

如此循环就形成了event loop，其中，每轮执行一个宏任务和所有的微任务

3.8 节流和防抖

1. 节流：持续触发事件，每隔一段时间只执行一次函数。场景：按钮点击、窗口大小调整、输入框输入事件

2. 防抖：在一段时间内多次触发同一事件，只有最后一次触发后，函数才会执行。场景：滚动事件、鼠标移动、实时数据更新

3.9 undefined和null、空数组的区别

1. undefined 表示变量已经声明，但是没有值；

2. null 表示空

typeof undefined = undefined，但是 typeof null = object

undefined 转数值为 NaN ，null 转数值为 0

拓展：

Undefined 表示变量应该有值，但未赋值

null 表示定义了一个空对象

NaN 表示非数字，其类型是 number

3. 空数组

   • 空数组是一个真正的对象，只是包含元素个数为0，null数组是一个空引用

   • 空数组可以调用方法（函数），Array.prototype.every() 返回true

3.10 什么是面向对象？封装、继承、多态

1、typeof 基本类型√ 对象类型—— object

2、instanceof：检测某个对象是不是某个类的实例，一直向上检查

3、constructor：某个对象的亲爹是谁，到底是由谁构造出来的。

3.11 跨域和同源

1. 跨域：是指从一个域名的网页去请求另一个域名的资源；协议、域名、端口，只要有一个的不同，就是跨域。

2. 同源：协议、域名、端口，三者全部相同，才是同源。

3. 解决跨域的几种方式：

   • jsonp

   • document.domain + iframe

   • postMessage

   • CORS 跨域资源共享

   • node代理跨域

3.12 原型和原型链

原型：原型是一个对象，为其他对象提供共享属性的对象，又称原型对象；

函数(function)：函数是一种特殊的对象，函数的原型存放在 prototype 属性上。

对象(Object): 普通对象的原型是存放到内置属性上，可以通过对象的 __proto__ 来访问对象的原型。

数组(Array): 数组也是一种特殊的对象，但与函数不同的是它的原型和普通对象一样，也是存放到内置属性上，可以通过数组的 __proto__ 来访问数组的原型。

原型链：在 JavaScript 中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过 prototype 对象指向父类对象，直到指向 Object 对象为止（person → Person → Object），这样就形成了一个原型指向的链条，专业术语称之为原型链。

用法：__proto__和constructor

hasOwnProperty() 判断属性是否属于原型链上的属性 。

3.13 数组去重

1. 使用Set对象和扩展运算符（…）

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];

2. 使用filter方法和indexOf

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);

3. 使用reduce方法

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {if (acc.indexOf(current) === -1) {acc.push(current);}return acc;
}, []);

4. 使用Map对象或Object

const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueObject = {};
array.forEach(item => {uniqueObject[item] = true;
});
const uniqueArray = Object.keys(uniqueObject).map(Number);

5. 使用for循环和indexOf

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {if (uniqueArray.indexOf(array[i]) === -1) {uniqueArray.push(array[i]);}
}

四、总结

简简单单先到这里吧，说多了没头了。