# 前言 📢最近准备春招啦了，所以整理了一些前端高频大厂面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，关注➕，感谢！ [2024 高频前端面试题汇总之CSS篇（一）](https://juejin.cn/post/7339470312663105562 "https://juejin.cn/post/7339470312663105562") [2024 高频前端面试题汇总之CSS篇（二）](https://juejin.cn/post/7340828555532697635 "https://juejin.cn/post/7340828555532697635") [2024 高频前端面试题汇总之js篇（一）](https://juejin.cn/post/7340991501512769570 "https://juejin.cn/post/7340991501512769570") [2024 高频前端面试题汇总之jS篇（二)](https://juejin.cn/post/7343863800146460735 "https://juejin.cn/post/7343863800146460735") 在最近的面试中经常被问到这些问题，我写这篇文章总结一下，自己也可以复习巩固一下，也为大家分享一下。那就开始吧 # ES6新增的新特性 ## 1. const和let `const` 和 `let` 是 ES6（ECMAScript 2015）中引入的两个新的声明变量的关键字，用于声明变量的方式有所不同 **const**： - `const` 声明的变量是常量，其值一旦被赋予就不能再被修改。但是声明的对象是可以赋值的 - 声明时必须进行初始化，否则会报错。 - 常用于声明不会被重新赋值的变量，如常量值、函数等。 ``` const PI = 3.14; PI = 3; // 这样就会报错 const obj={a:1} obj.a=2 // 这个就不会 ``` **let**： - `let` 声明的变量是可变的，可以被重新赋值。 - 作用域限制在声明所在的块级作用域内（如 `{}` 内部）。 - 不允许在同一作用域内重复声明同名变量。 ``` let x = 10; x = 20; // 这样是可以的 ``` 使用 `const` 和 `let` 可以有效地避免 JavaScript 中的一些问题，比如变量提升（hoisting）和作用域污染（scope pollution），提高了代码的可读性和可维护性。 ## 2.箭头函数 1. **简洁的语法**：相比传统的函数声明，箭头函数的语法更加简洁明了。 1. **隐式返回**：如果箭头函数体只有一条语句，它将隐式返回这条语句的结果，不需要使用 `return` 关键字。 1. **没有自己的 `this`，`arguments`，`super`，或 `new.target`**：箭头函数不会创建自己的 `this` 上下文，而是会继承父级作用域中的 `this` 值。 1. **不能用作构造函数**：箭头函数不能使用 `new` 关键字调用，因此不能用作构造函数来创建对象实例。 1. **没有 `prototype`**：箭头函数没有自己的 `prototype` 属性。箭头函数在许多情况下都很有用，特别是在回调函数或简单的函数表达式中。然而，需要注意的是，由于箭头函数没有自己的 `this` 上下文，它们并不适用于所有的情况，特别是当需要访问函数自身的 `this` 时。 ## 3.模块化 ES6 模块化提供了 `import` 和 `export` 关键字，允许开发者在不同的 JavaScript 文件之间导入和导出功能。这样可以将代码分割成多个文件，每个文件负责一个特定的功能，使得代码更易于管理和维护在 Node.js 中，模块化是通过 CommonJS 标准实现的，可以使用 `require()`和`module.exports` 来导入和导出模块。 1. **代码复用**：可以将功能拆分为独立的模块，以便在项目中多次使用。 1. **可维护性**：模块化使得代码更易于理解、调试和修改。 1. **命名空间隔离**：每个模块都有自己的作用域，避免了全局命名空间的污染。 1. **依赖管理**：模块化系统可以明确地声明模块之间的依赖关系，使得项目结构更清晰。 ## 4.Promise 对象 [Promises 揭晓：掌握 JavaScript 中的异步和谐](https://juejin.cn/post/7306483885101236250) ## 5.类和继承 ### 类（Class）类是一种用于创建对象的蓝图，它定义了对象的属性和方法。在 JavaScript 中，可以使用 `class` 关键字来定义一个类。类中包含构造函数（constructor）和其他方法。 ``` class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } // 创建 Person 类的实例 const person1 = new Person('Alice', 30); person1.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old. ``` ### 6.继承（Inheritance）继承是面向对象编程中的一个重要概念，它允许子类（派生类）继承父类（基类）的属性和方法，并且可以在此基础上进行扩展或修改。在 JavaScript 中，可以使用 `extends` 关键字来实现类的继承。 ``` class Student extends Person { constructor(name, age, grade) { super(name, age); // 调用父类的构造函数 this.grade = grade; } study() { console.log(`${this.name} is studying in grade ${this.grade}.`); } } // 创建 Student 类的实例 const student1 = new Student('Bob', 15, 10); student1.sayHello(); // 输出：Hello, my name is Bob and I am 15 years old. student1.study(); // 输出：Bob is studying in grade 10. ``` 在上面的例子中，`Student` 类继承了 `Person` 类的属性和方法，并且添加了 `study()` 方法。继承还可以使用 `super` 关键字来调用父类的方法，在子类的构造函数中调用父类的构造函数。 ## 7.展开运算符展开运算符（Spread Operator）是 JavaScript 中一种强大的语法，用于在某些语法中展开数组或对象。它以三个连续的点（`...`）表示，并且可以应用于不同的场景。 ### 展开数组展开运算符可以将一个数组展开成一系列的值。这在创建新数组、函数调用等情况下非常有用。 #### 创建新数组 ``` const array1 = [1, 2, 3]; const array2 = [...array1, 4, 5, 6]; console.log(array2); // 输出：[1, 2, 3, 4, 5, 6] ``` 在这个例子中，`...array1` 将 `array1` 数组的元素展开，然后与后面的值组合成一个新的数组 `array2`。 #### 函数调用 ``` function sum(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; const result = sum(...numbers); console.log(result); // 输出：6 ``` 在这个例子中，`...numbers` 将数组 `numbers` 中的元素展开，并作为参数传递给 `sum()` 函数。 ### 展开对象展开运算符还可以用于对象字面量中，用来创建新的对象或合并对象的属性。 #### 创建新对象 ``` const obj1 = { x: 1, y: 2 }; const obj2 = { ...obj1, z: 3 }; console.log(obj2); // 输出：{ x: 1, y: 2, z: 3 } ``` 在这个例子中，`...obj1` 将对象 `obj1` 的属性展开，并与后面的属性一起组合成一个新的对象 `obj2`。 #### 合并对象 ``` const obj1 = { x: 1, y: 2 }; const obj2 = { y: 3, z: 4 }; const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // 输出：{ x: 1, y: 3, z: 4 } ``` 在这个例子中，`...obj1` 和 `...obj2` 将两个对象的属性展开，然后合并成一个新的对象 `mergedObj`。展开运算符使得在数组和对象操作中更加灵活，可以简洁地进行数组合并、对象合并等操作，提高了代码的可读性和可维护性。 ## 8.解构赋值解构赋值是一种在 JavaScript 中方便地从数组或对象中提取数据并赋值给变量的方法。它可以让你通过一种更简洁的语法从复杂的数据结构中提取需要的值。 ### 数组解构赋值在数组解构赋值中，可以通过模式匹配的方式从数组中提取值，并将它们赋值给变量。 ``` // 数组解构赋值 const [a, b] = [1, 2]; console.log(a); // 输出：1 console.log(b); // 输出：2 ``` ### 对象解构赋值在对象解构赋值中，可以通过指定属性名的方式从对象中提取值，并将它们赋值给变量。 ``` // 对象解构赋值 const { x, y } = { x: 1, y: 2 }; console.log(x); // 输出：1 console.log(y); // 输出：2 ``` ### 嵌套解构赋值解构赋值也支持嵌套结构，可以从嵌套的数组或对象中提取值。 ``` // 嵌套解构赋值 const [a, [b, c]] = [1, [2, 3]]; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(c); // 输出：3 const { x, y, z: { w } } = { x: 1, y: 2, z: { w: 3 } }; console.log(x); // 输出：1 console.log(y); // 输出：2 console.log(w); // 输出：3 ``` ### 默认值在解构赋值中，可以为变量指定默认值，以防提取的值为 undefined。 ``` // 默认值 const [a = 0, b = 0] = [1]; console.log(a); // 输出：1 console.log(b); // 输出：0 ``` 解构赋值在处理函数返回的数据、处理对象属性、交换变量值等场景中非常有用，并且能够让代码更简洁易读。 ## 9. 模板字符串模板字符串是 JavaScript 中一种方便创建包含插值表达式的字符串的方法。它使用反引号（`` ` ``）作为字符串的定界符，并允许在字符串中嵌入变量或表达式。 ### 基本用法 ``` const name = 'Alice'; const greeting = `Hello, ${name}!`; console.log(greeting); // 输出：Hello, Alice! ``` 在上面的例子中，`${name}` 是插值表达式，它会被变量 `name` 的值所替代，最终形成完整的字符串。 ### 多行字符串使用模板字符串可以轻松地创建多行字符串，而不需要使用 `\n` 来表示换行。 ``` const multiLineString = ` This is a multi-line string created using template literals. `; console.log(multiLineString); ``` 在这个例子中，字符串 `multiLineString` 包含了多行文本，每行都以换行符开头。 ### 表达式除了变量之外，模板字符串还可以包含任意的 JavaScript 表达式。 ``` const a = 10; const b = 5; const result = `The sum of ${a} and ${b} is ${a + b}.`; console.log(result); // 输出：The sum of 10 and 5 is 15. ``` 在这个例子中，`${a + b}` 是一个表达式，它会计算变量 `a` 和 `b` 的和，并将结果插入到字符串中。 # CSS3 新增的特性 ## 1.Flexbox 布局 [CSS基础flex布局](https://juejin.cn/post/7329691357210656806) ## 2.Grid 布局在 Grid 布局中，您可以创建一个网格容器（Grid Container），并在其中定义行（Rows）和列（Columns）。然后，您可以将网页内容放置在这个网格中的不同单元格（Grid Cells）中，通过指定内容在网格中的位置来实现布局。以下是 Grid 布局的一些关键概念和用法： 1. **网格容器（Grid Container）** ：包含了整个网格布局的容器。通过设置容器的 `display` 属性为 `grid` 或 `inline-grid` 来创建一个 Grid 容器。 ``` .grid-container { display: grid; /* 或 display: inline-grid; */ } ``` 1. **行（Rows）和列（Columns）** ：在网格容器中，您可以使用 `grid-template-rows` 和 `grid-template-columns` 属性来定义行和列的大小、数量和分布方式。 ``` .grid-container { display: grid; grid-template-rows: 100px 200px; /* 定义两行，第一行高度为 100px，第二行高度为 200px */ grid-template-columns: 1fr 2fr; /* 定义两列，第一列占剩余空间的1/3，第二列占剩余空间的2/3 */ } ``` ## 3.过渡和动画 CSS 提供的用于实现页面元素在状态变化时产生平滑效果的工具。它们可以为用户界面增添生动性和交互性，提升用户体验。 ### 过渡过渡允许您在状态改变时为元素的某些属性添加过渡效果，使其在一种状态到另一种状态的过渡过程中变得平滑。您可以定义过渡的持续时间、延迟时间、过渡函数以及触发过渡的属性。 ``` css复制代码 .element { transition-property: width; /* 过渡的属性 */ transition-duration: 0.3s; /* 过渡持续时间 */ transition-timing-function: ease-in-out; /* 过渡函数 */ transition-delay: 0s; /* 过渡延迟时间 */ } .element:hover { width: 200px; /* 触发过渡的状态变化 */ } ``` ### 动画动画允许您创建更复杂和灵活的效果，您可以通过关键帧（Keyframes）来定义动画的各个阶段，并且可以控制动画的持续时间、延迟时间、重复次数等。与过渡不同，动画可以实现更多样化的效果，如旋转、缩放、淡入淡出等。 ``` @keyframes slidein { from { transform: translateX(-100%); } to { transform: translateX(0); } } .element { animation-name: slidein; /* 动画名称 */ animation-duration: 1s; /* 动画持续时间 */ animation-timing-function: ease; /* 动画函数 */ animation-delay: 0s; /* 动画延迟时间 */ animation-iteration-count: 1; /* 动画重复次数 */ animation-direction: normal; /* 动画方向 */ animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */ } ``` 通过结合过渡和动画，您可以创建出丰富多彩、交互性强的页面效果，从而提升用户对网页的体验感。 ## 4.阴影和圆角阴影（Box Shadows）和圆角（Border Radius）是 CSS 中常用的样式属性，它们可以为元素添加视觉效果和装饰性。 ### 阴影（Box Shadows）阴影属性允许您在元素周围创建阴影效果。以下是一些常见的属性： 1. **box-shadow**：定义阴影效果的水平偏移、垂直偏移、模糊半径、阴影大小和颜色。 ``` .element { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } ``` - 第一个值表示水平偏移量。 - 第二个值表示垂直偏移量。 - 第三个值表示模糊半径。 - 第四个值表示阴影大小。 - 最后一个值表示阴影颜色。 1. **inset**：可选属性，将阴影效果更改为内部阴影效果。 ``` .element { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } ``` ### 圆角（Border Radius）圆角属性允许您为元素的边框创建圆角。以下是一些常见的属性： 1. **border-radius**：定义元素的四个角的圆角半径。 ``` .element { border-radius: 10px; } ``` - 如果只指定一个值，则四个角都会使用相同的半径。 - 如果指定两个值，则第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。 - 如果指定四个值，则分别对应左上角、右上角、右下角和左下角的圆角半径。 1. **border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius**：分别定义元素的每个角的圆角半径。 ``` .element { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; } ``` 使用这些属性，您可以轻松地为元素添加阴影和圆角效果，从而增强其外观和可视性。 # HTML5 新增的特性： ## 1.语义化标签语义化标签是指在HTML中使用具有明确含义的标签来描述页面内容的结构和含义，而不仅仅是为了样式或布局目的而使用通用的标签。语义化标签有助于提高网页的可读性、可访问性和搜索引擎优化（SEO）。以下是一些常见的语义化标签： 1. **`

`** ：用于定义文档或节的页眉，通常包含导航链接、网站标志、搜索框等内容。 1. **`

`** ：用于定义导航链接的容器，通常包含网站的主要导航菜单。 1. **`

`** ：用于定义文档的主要内容，通常包含页面的主要内容部分。 1. **`

`** ：用于定义独立的、完整的内容块，如博客文章、新闻文章等。 1. **`

`** ：用于定义文档中的区段，通常用于组织相关的内容。 1. **`

`** ：用于定义页面的侧边栏或附加内容，通常包含与页面主要内容相关但不是必需的内容，如广告、相关链接等。 1. **`