前端面试题持续整理

前端面试题持续整理

HTML、CSS

1. html语义化的理解
   html语义化是指用合理的html标记以及其特有的属性去格式化文档内容。
   语义化有利于SEO搜索，代码规范化，方便团队开发和维护，也遵循W3C规范。

2. H5新增哪些标签
   header（头部标签），nav（导航标签），article（内容标签），aside （侧边标签），footer（底部标签），number（必输数值标签），email （邮箱标签），video（视频标签），audio（音频标签）。只是总结部分标 签。

3. css盒子模型
   css盒子分四部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
   css盒子模型分两种：IE盒模型和W3C盒模型。
   两者区别在于IE盒模型的content是把borderhepadding计算在内的。

4. css选择器
   !important > 内联 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 浏览器默认属性。

5. css水平垂直居中
   1）、flex布局
   使用flex布局，通过设置容器的垂直（align-items:center）和水平方向（justify-content:center）上为居中对齐，然后它里面的子元素也会随之实现垂直和水平的居中（如子元素不需要的话则需重新设置样式）。
   2）、div使用绝对布局，设置margin:auto。
   .main{
   text-align: center; /让div内部文字居中/width: 300px;
   height: 350px;margin: auto;position: absolute;
   top: 0;left: 0;right: 0;bottom: 0;
   }
   3）、单行文本类
   单行文本: line-height = height，text-align: center;

6. 单行文本溢出隐藏
   在使用CSS样式时，可以通过设置overflow: hidden来实现单行文本溢出隐藏。当文本内容超出容器的宽度时，隐藏超出部分，只显示容器内的文本。
   溢出隐藏显示省略号
   ```css
   overflow: hidden; /* 超出部分隐藏 /
   white-space: nowrap; / 不换行 /
   text-overflow: ellipsis; / 显示省略号 */

7. 多行文本

.text-container {
 width: 200px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 white-space: normal;
}

8. 透明rgba和opacity有什么不同？
   rgba只影响自身元素，而opacity会影响它的下面的节点（子元素）。

9. css3新特性
   CSS3是CSS的第三个版本，引入了许多新的特性和功能。以下是CSS3的一些新特性：

   1. 弹性布局（Flexbox）：Flexbox是一种用于创建弹性布局的新的CSS模块。它可以让页面的元素动态地伸缩和重新排列，适应不同的屏幕尺寸和设备。
   2. 网格布局（Grid）：Grid布局是一种二维布局系统，可以将页面划分为网格，通过简单的CSS属性和值就能实现复杂的布局。
   3. 过渡（Transition）：过渡是一种动画效果，允许在一种样式和另一种样式之间平滑地过渡。通过CSS3的transition属性可以指定过渡的属性、时长和缓动函数。
   4. 动画（Animation）：动画是一种更为复杂的过渡效果，可以实现更多的动态效果。通过CSS3的animation属性可以定义动画的关键帧、时长、缓动函数等。
   5. 媒体查询（Media Queries）：媒体查询允许根据设备的属性和特性来应用不同的样式。通过媒体查询，可以实现响应式设计，使网页能够适应不同的屏幕尺寸和设备。
   6. 边框圆角（Border Radius）：通过CSS3的border-radius属性可以添加圆角边框，可以实现更加美观的界面设计。
   7. 阴影（Box Shadow）：通过CSS3的box-shadow属性可以添加阴影效果，使元素看起来更加立体。
   8. 字体和文本效果（Fonts and Text Effects）：CSS3引入了一些新的属性和值，用于定义字体样式和文本效果，如字体阴影、字体渐变、文字溢出效果等。
   9. 变形（Transform）：通过CSS3的transform属性可以实现元素的旋转、缩放、倾斜和平移等变换效果。
   10. 过滤器（Filter）：CSS3的filter属性可以对元素应用各种图像处理效果，如模糊、灰度、亮度、对比度等。
   11. 弹性布局（Flexbox）：Flexbox是一种用于创建弹性布局的新的CSS模块。它可以让页面的元素动态地伸缩和重新排列，适应不同的屏幕尺寸和设备。
   12. 网格布局（Grid）：Grid布局是一种二维布局系统，可以将页面划分为网格，通过简单的CSS属性和值就能实现复杂的布局。
   13. 过渡（Transition）：过渡是一种动画效果，允许在一种样式和另一种样式之间平滑地过渡。通过CSS3的transition属性可以指定过渡的属性、时长和缓动函数
   14. 动画（Animation）：动画是一种更为复杂的过渡效果，可以实现更多的动态效果。通过CSS3的animation属性可以定义动画的关键帧、时长、缓动函数等。
   15. 媒体查询（Media Queries）：媒体查询允许根据设备的属性和特性来应用不同的样式。通过媒体查询，可以实现响应式设计，使网页能够适应不同的屏幕尺寸和设备。
   16. 边框圆角（Border Radius）：通过CSS3的border-radius属性可以添加圆角边框，可以实现更加美观的界面设计。
   17. 阴影（Box Shadow）：通过CSS3的box-shadow属性可以添加阴影效果，使元素看起来更加立体。
   18. 字体和文本效果（Fonts and Text Effects）：CSS3引入了一些新的属性和值，用于定义字体样式和文本效果，如字体阴影、字体渐变、文字溢出效果等。
   19. 变形（Transform）：通过CSS3的transform属性可以实现元素的旋转、缩放、倾斜和平移等变换效果。
   20. 过滤器（Filter）：CSS3的filter属性可以对元素应用各种图像处理效果，如模糊、灰度、亮度、对比度等。

10. rem和px
    rem 和 px 是两种用于设置网页元素大小的单位。
    px 是指像素（pixels），是屏幕显示图像的最小单位。在网页中，使用 px 单位可以精确地控制元素的尺寸和位置。例如，设置一个元素的宽度为 200px，则该元素的宽度就会在不同的屏幕上保持一致。
    rem 是指相对于根元素（html）的字体大小（font-size）的单位。通过设置根元素的字体大小，可以控制整个网页的元素大小。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。如果某个元素的字体大小设置为 2rem，那么该元素的字体大小就会是根元素字体大小的 2 倍。
    使用 rem 单位可以实现响应式设计，即根据设备屏幕的大小自动调整元素的大小。这是因为 rem 单位的值是相对于根元素的字体大小的，而设备屏幕的大小会影响根元素的字体大小。
    总结来说，px 是固定单位，适用于需要精确控制元素大小的情况；rem 是相对单位，适用于需要根据设备屏幕大小调整元素大小的情况。在实际开发中，可以根据具体需求选择使用哪种单位。rem 和 px 是两种用于设置网页元素大小的单位。

11. rem和px换算
    rem和px是CSS中常用的长度单位，它们具有相对和绝对的特性。
    换算关系如下：
    1rem = 根元素的字体大小
    1px = 1个像素
    假设根元素的字体大小为16px，要将20px转换成rem，则计算如下：
    20px / 16px = 1.25rem
    同理，要将1rem转换成px，则计算如下：
    1rem * 16px = 16pxrem和px是CSS中常用的长度单位，它们具有相对和绝对的特性。

JS

1. js数据类型
   js数据类型分基本类型和引用数据类型。
   1.基本类型包括：number（数值型）、sring（字符串）、boolean（布尔）、undefined（未定义）、null（空）、symbol（符号型）
   2.引用数据类型：object（对象）。
   包括array（数组）、Function（函数）、Date（日期格式）都属于对象。

2. js数据类型判断
   在 JavaScript 中，可以使用 typeof 和 instanceof 运算符来判断数据类型。
   typeof 运算符：用于检测变量的类型，返回一个表示类型的字符串。常见的结果有：“undefined”、“string”、“number”、“boolean”、“object”、“function” 等。

typeof undefined  // "undefined"
typeof "Hello"    // "string"
typeof 123        // "number"
typeof true       // "boolean"
typeof {}         // "object"
typeof []         // "object"
typeof function(){} // "function"

需要注意的是，typeof null 返回的结果是 “object”，这是一个历史遗留问题。
instanceof 运算符：用于检测对象的类型，返回一个布尔值。它检测的是对象原型链上是否存在某个构造函数的 prototype。

let obj = {};
obj instanceof Object  // true

let arr = [];
arr instanceof Array  // true

function Person() {}
let p = new Person();
p instanceof Person  // true

需要注意的是，instanceof 仅适用于检测对象类型，而无法判断基本数据类型，比如字符串、数字、布尔值等。

3. forEach()和map()区别
   forEach()和map()都是JavaScript中常用的数组方法，它们的主要区别在于它们的返回值和作用。
   forEach()方法会遍历数组中的每个元素，并为每个元素执行一个回调函数。它没有返回值，它只是对每个元素执行指定的操作。如果需要对数组进行修改，可以在回调函数中直接修改原数组。
   map()方法也会遍历数组中的每个元素，并为每个元素执行一个回调函数。但不同之处在于，map()方法会返回一个新的数组，而不是修改原数组。这个新数组包含了原数组中每个元素经过回调函数处理后的值。
4. forEach（）终止循环？（个人项目所遇问题）
   forEach()使用return是无法终止循环，只是会跳过对应条件，继续循环。
   如果真要使用forEach（）终止，需使用try catch 方法。例：

const list = [{name:'测试1',id:'1'},{name:'测试2',id:'2'},{name:'测试3',id:'3'},{name:'测试4',id:'4'},]
try{
  list.forEach((item) =>{
	if(item.id == '1'){
       //需要提示的内容
       throw ''
    }
 })
}catch {
  return
}

5.js排序
在JavaScript中，可以使用Array对象的sort()方法对数组进行排序。sort()方法可以接受一个可选的回调函数作为参数，用于指定排序的规则。

如果不传入回调函数，则默认按照Unicode码点的顺序进行排序。

以下是一个简单的示例，演示如何对数组进行排序：

var fruits = ["apple", "banana", "orange", "pear"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "orange", "pear"]

如果要按照数字大小进行排序，可以传入一个回调函数，比较两个元素的大小：

var numbers = [3, 1, 5, 2, 4];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

这个回调函数的返回值决定了排序的结果。如果a小于b，返回一个负值；如果a等于b，返回0；如果a大于b，返回一个正值。

除了使用sort()方法，还可以使用其他的排序算法，例如冒泡排序、选择排序、插入排序等。这些排序算法可以根据具体的需求进行选择和实现。
6.数组去重
数组去重可以通过以下几种方法实现：

1. 使用 Set 数据结构：将数组元素放入 Set 中，Set 会自动去除重复元素，然后再将 Set 转为数组即可。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2. 使用 filter 方法：遍历数组，使用 indexOf 方法判断元素第一次出现的位置，如果与当前索引相等，则保留该元素。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3. 使用 reduce 方法：遍历数组，将元素添加到结果数组中，如果该元素已经在结果数组中存在，则不添加。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = arr.reduce((result, current) => {
    if (result.indexOf(current) === -1) {
        result.push(current);
    }
    return result;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4.去除重复数据

const arr = [{name:'1',id:'1'},{name:'2',id:'2'},{name:'1',id:'1'}];
/**arr：数组，key：根据某一个字段去重（例：根据 id 去重）
**/
const uniqueArr = (arr,key) =>{
	const newArr = []
	const unique = {}
	arr.forEach(item =>{
		if(!unique[item[key]]){
			newArr.push(item)
			unique[item[key]] = true
		}
	})
	return newArr
}
console.log(uniqueArr(arr,'id')); // [{name:'1',id:'1'},{name:'2',id:'2'}]