ES6、Css3 和 HTML5 新增的特性

前言

📢最近准备春招啦了，所以整理了一些前端高频大厂面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，关注➕，感谢！

2024 高频前端面试题汇总之CSS篇（一）
2024 高频前端面试题汇总之CSS篇（二）
2024 高频前端面试题汇总之js篇（一）
2024 高频前端面试题汇总之jS篇（二)

在最近的面试中经常被问到这些问题，我写这篇文章总结一下，自己也可以复习巩固一下，也为大家分享一下。那就开始吧

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. 简洁的语法：相比传统的函数声明，箭头函数的语法更加简洁明了。
2. 隐式返回 ：如果箭头函数体只有一条语句，它将隐式返回这条语句的结果，不需要使用 return 关键字。
3. 没有自己的 this，arguments，super，或 new.target ：箭头函数不会创建自己的 this 上下文，而是会继承父级作用域中的 this 值。
4. 不能用作构造函数 ：箭头函数不能使用 new 关键字调用，因此不能用作构造函数来创建对象实例。
5. 没有 prototype ：箭头函数没有自己的 prototype 属性。

箭头函数在许多情况下都很有用，特别是在回调函数或简单的函数表达式中。然而，需要注意的是，由于箭头函数没有自己的 this 上下文，它们并不适用于所有的情况，特别是当需要访问函数自身的 this 时。

3.模块化

ES6 模块化提供了 import 和 export 关键字，允许开发者在不同的 JavaScript 文件之间导入和导出功能。这样可以将代码分割成多个文件，每个文件负责一个特定的功能，使得代码更易于管理和维护在 Node.js 中，模块化是通过 CommonJS 标准实现的，可以使用 require()和module.exports 来导入和导出模块。

1. 代码复用：可以将功能拆分为独立的模块，以便在项目中多次使用。
2. 可维护性：模块化使得代码更易于理解、调试和修改。
3. 命名空间隔离：每个模块都有自己的作用域，避免了全局命名空间的污染。
4. 依赖管理：模块化系统可以明确地声明模块之间的依赖关系，使得项目结构更清晰。

4.Promise 对象

Promises 揭晓：掌握 JavaScript 中的异步和谐

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布局

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);
   }

   • 第一个值表示水平偏移量。
   • 第二个值表示垂直偏移量。
   • 第三个值表示模糊半径。
   • 第四个值表示阴影大小。
   • 最后一个值表示阴影颜色。

2. inset：可选属性，将阴影效果更改为内部阴影效果。

   .element {
       box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
   }

圆角（Border Radius）

圆角属性允许您为元素的边框创建圆角。以下是一些常见的属性：

1. border-radius：定义元素的四个角的圆角半径。

   .element {
       border-radius: 10px;
   }

   • 如果只指定一个值，则四个角都会使用相同的半径。
   • 如果指定两个值，则第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。
   • 如果指定四个值，则分别对应左上角、右上角、右下角和左下角的圆角半径。

2. 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. <header> ：用于定义文档或节的页眉，通常包含导航链接、网站标志、搜索框等内容。
2. <nav> ：用于定义导航链接的容器，通常包含网站的主要导航菜单。
3. <main> ：用于定义文档的主要内容，通常包含页面的主要内容部分。
4. <article> ：用于定义独立的、完整的内容块，如博客文章、新闻文章等。
5. <section> ：用于定义文档中的区段，通常用于组织相关的内容。
6. <aside> ：用于定义页面的侧边栏或附加内容，通常包含与页面主要内容相关但不是必需的内容，如广告、相关链接等。
7. <footer> ：用于定义文档或节的页脚，通常包含版权信息、联系方式、网站地图等内容。
8. <figure> 和 <figcaption> ：用于组织和标记图片、图表、音频、视频等媒体内容及其标题。
9. <details> 和 <summary> ：用于创建可展开的详细信息块，其中 <summary> 定义了默认可见的摘要。
10. <time> ：用于标记日期、时间等信息，有助于搜索引擎理解和处理时间相关内容。

使用这些语义化标签可以使你的HTML结构更具有可读性和可维护性，同时有助于搜索引擎正确解读你的网页内容，提高网页的排名和可访问性。

2.多媒体支持

• 图片： 使用 <img> 标签来插入图片，或者通过 CSS 的 background-image 属性设置背景图像。

• 视频： 使用 <video> 标签来嵌入视频，提供多种格式以增加兼容性。

• 音频： 使用 <audio> 标签来嵌入音频，同样提供多种格式以增加兼容性。

3.canvas和svg

1. Canvas：

   • Canvas 是一个HTML5元素，允许通过JavaScript动态绘制图形。
   • 它提供了一个类似绘图板的API，可以在其中绘制2D图形，如线条、矩形、圆形等。
   • 绘制的图形是像素基础的，一旦绘制完成，就无法单独操作其中的元素。
   • Canvas 通常用于需要实时渲染、动态交互的场景，如图表、游戏、图像处理等。

2. SVG (Scalable Vector Graphics) ：

   • SVG 是一种基于XML的矢量图形描述语言，可以在HTML中以标记形式使用。
   • 它描述的是图形元素的几何属性和样式，可以缩放而不失真。
   • SVG 图形是矢量基础的，可以通过CSS和JavaScript进行操作和动画。
   • SVG 支持事件处理，可以与HTML元素交互。
   • SVG 适用于需要响应式设计、复杂图形和动画的场景，如图标、地图、数据可视化等。

选择使用Canvas还是SVG取决于你的具体需求：

• 如果你需要实时绘制和动态交互，Canvas可能是更好的选择。
• 如果你需要可伸缩、响应式的图形，以及更好的文档结构和可访问性，则应选择SVG。

有时候，Canvas和SVG也可以结合使用，根据需求的不同，选择合适的技术来实现。

全双⼯通信协议websocket

WebSocket 是一种全双工通信协议，它允许在 Web 应用程序和服务器之间建立持久性连接，从而实现实时数据交换。与传统的 HTTP 请求-响应模式不同，WebSocket 允许双方同时发送和接收数据，使得在客户端和服务器之间进行实时通信变得更加高效和简单。

一些关键特点包括：

1. 全双工通信：WebSocket 允许客户端和服务器之间的双向通信，而不像传统的 HTTP 请求-响应模式那样需要先发出请求再等待响应。
2. 持久连接：一旦建立 WebSocket 连接，它将保持打开状态，允许随时发送数据，而不需要在每次通信时都重新建立连接。
3. 低延迟：由于 WebSocket 建立的是长期持久的连接，因此通信过程中的延迟较低，适合需要实时性要求高的应用场景，如在线游戏、实时聊天等。
4. 轻量级：WebSocket 协议相对于传统的 HTTP 请求-响应协议来说，通信时的开销较小，因为在连接建立后只需少量的额外开销。
5. 跨域支持：WebSocket 支持跨域通信，但需要在服务器端进行相应的配置。

WebSocket 在许多实时性要求高的 Web 应用中得到广泛应用，例如在线游戏、聊天应用、股票市场行情等。通过 WebSocket，客户端和服务器之间可以更有效地实现实时数据传输和交互。

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！有什么写错的，需要增加的可以在评论区留言 谢谢大家支持