关于 ES6、Css 和 HTML5 新增了哪些，这个问题我们在面试当中也是随处可见的，本次就针对这些问题做了一个合集来帮助大家更好的学习与理解~

省流版：

一、ES6 新增

新增symbol类型： 表示独一无二的值，用来定义独一无二的对象属性名。
const/let
解构赋值
模板字符串： 使用 ${} 来嵌入变量和表达式，如${data}
扩展运算符(数组、对象)
箭头函数
Set 和 Map 数据结构
Proxy/Reflect
Promise
async / await 函数
Class
Module 语法： import/export

二、CSS3新增

选择器：属性选择器，伪类选择器
box-shadow（阴影）
background-clip （裁剪）
transition （过渡）
transform （平移）
animation （动画）
渐变色

三、HTML5新增

新选择器 document.querySelector、document.querySelectorAll
媒体播放video,audio
本地存储 localStorage,sessionStorage
语义化标签header,nav,footer,section,article 等
全双⼯通信协议websocket
浏览器历史对象 history
多任务处理 webworker
页⾯可见性改变事件 visibilitychange
跨窗⼜通信 PostMessage
表单 FormData 对象
图像 canvas + SVG

详细版：

一、ES6 新增

1.1 新增 symbol 类型

Symbol 是一种基本数据类型，表示独一无二的值，用来定义对象的唯一属性名。Symbol 值通过 Symbol() 函数创建，每次调用 Symbol() 都会返回一个新的唯一值，可以用作对象的属性名，保证不会与其他属性名冲突。

javascript 复制代码

const uniqueKey = Symbol('description');
const obj = {
    [uniqueKey]: 'value'
};
console.log(obj[uniqueKey]); // 输出: 'value'

1.2 const 和 let

const 和 let 关键字用于声明变量，具有块级作用域，不可重复声明。const 用于声明常量，一旦赋值则不可修改，而 let 则允许变量重新赋值。它们的引入减少了变量提升带来的问题，同时解决了变量作用域混乱的情况，使得代码更加清晰易懂。使用 var 声明的变量会提升到当前作用域的顶部，并且在整个函数内部都是有效的，而不管它是在哪里声明的。

javascript 复制代码

const PI = 3.14; // 定义一个常量
let count = 0; // 定义一个可变变量

1.3 解构赋值

解构赋值语法是一种 JavaScript 表达式，可以将数组或对象中的值赋给变量。例如，const { x, y } = point; 可以将 point 对象的 x 和 y 属性分别赋值给变量 x 和 y。

javascript 复制代码

const [x, y] = [1, 2]; // 数组解构赋值
console.log(x); // 输出: 1
console.log(y); // 输出: 2

const { name, age } = { name: 'Alice', age: 30 }; // 对象解构赋值
console.log(name); // 输出: 'Alice'
console.log(age); // 输出: 30

1.4 模板字符串

模板字符串是 ES6 中新增的字符串语法，使用反引号 (`) 包裹字符串内容，可以在字符串中嵌入变量和表达式，使用 ${} 来引用变量或表达式。例如，const greeting = Hello, ${name}!; 可以将变量 name 的值嵌入到字符串中。

javascript 复制代码

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: 'Hello, Alice!'

1.5 扩展运算符(数组、对象)

扩展运算符（...）用于将一个数组或对象展开成多个参数或元素。在数组中，可以用于创建新数组、函数调用时传递参数等；在对象中，可以用于创建新对象、合并对象等操作。

javascript 复制代码

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 数组扩展
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // 对象扩展
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

1.6 箭头函数

箭头函数提供了一种更简洁的函数定义方式，并且能绑定上下文，避免了传统函数中 this 指向不明确的问题。箭头函数简化了函数的书写，尤其适合于回调函数和简单的函数表达式。

javascript 复制代码

const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出: 3

特点：

简洁的语法
箭头函数没有自己的 this，它会从定义时所在的上下文中继承 this。
适合作为匿名函数，在处理数组的高阶函数（如 map、filter、reduce 等）时，可以简化回调函数的书写。

注意： 箭头函数也有一些限制，比如没有自己的 this、arguments 和 super，也无法用作构造函数。

1.7 Set 和 Map 数据结构

Set 是一种集合数据结构，存储唯一值，并且保持插入顺序；Map 是一种键值对的集合，每个键对应一个值。Set 和 Map 都提供了高效的数据查找和操作方法。

javascript 复制代码

const mySet = new Set([1, 2, 3]);
mySet.add(4);
console.log(mySet); // 输出: Set(4) {1, 2, 3, 4}

const myMap = new Map([[1, 'one'], [2, 'two']]);
myMap.set(3, 'three');
console.log(myMap); // 输出: Map(3) {1 => 'one', 2 => 'two', 3 => 'three'}

1.8 Proxy/Reflect

Proxy 是 ES6 提供的用于代理目标对象的功能，可以拦截目标对象的各种操作，并进行自定义处理。Reflect 是一个内置的对象，提供了一组静态方法，与 Proxy 对象的拦截操作对应，用于在执行操作时触发默认行为。

javascript 复制代码

const handler = {
    get: function(target, prop, receiver) {
        console.log(`Getting ${prop}`);
        return Reflect.get(target, prop, receiver);
    }
};

const proxy = new Proxy({ name: 'Alice' }, handler);
console.log(proxy.name); // 输出: 'Alice'

1.9 Promise

Promise 是一种用于处理异步操作的对象，表示一个异步操作的最终完成或失败，并返回结果值或错误信息。Promise 可以链式调用，通过 then() 方法注册回调函数，处理异步操作的结果。

javascript 复制代码

const fetchData = () => {
    return new Promise((resolve, reject) => {
        // 异步操作
        if (/* 操作成功 */) {
            resolve(data);
        } else {
            reject(error);
        }
    });
};

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

1.10 async / await 函数

async 函数是 ES8 引入的用于定义异步函数的语法，用于简化 Promise 的使用。async 函数内部使用 await 关键字等待异步操作的结果，可以像同步代码一样编写异步逻辑，使得异步代码更加清晰和易读。

javascript 复制代码

const fetchData = async () => {
    try {
        const data = await fetchDataFromAPI();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
};

fetchData();

1.11 Class

class 关键字用于定义类，是 ES6 中面向对象编程的新特性。类可以包含构造函数、方法、静态方法等成员，可以通过 extends 关键字实现类的继承，更加符合面向对象的编程思想。

javascript 复制代码

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

const person = new Person('Alice', 30);
person.greet(); // 输出: 'Hello, my name is Alice and I'm 30 years old.'

1.12 Module 语法

import/export 关键字用于模块化编程，允许将 JavaScript 代码分割成多个文件，每个文件都是一个模块，可以导出模块中的变量、函数、类等，同时也可以从其他模块导入所需的功能。这种模块化的方式有助于代码的组织、维护和复用。

javascript 复制代码

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出: 3
console.log(subtract(5, 3)); // 输出: 2

二、CSS3新增

2.1 选择器：属性选择器，伪类选择器

属性选择器 ：属性选择器允许你根据元素的属性及其对应的值来选择元素。例如，[attribute] 选择所有具有指定属性的元素，[attribute=value] 选择具有指定属性值的元素，[attribute~=value] 选择具有指定属性值的元素，其中属性值是一个词列表，其中至少包含一个与 value 完全匹配的词，等等。
css 复制代码
```
/* 选择所有具有 title 属性的元素 */
[title] {
    color: red;
}

/* 选择 title 属性值为 "box" 的元素 */
[title="box"] {
    font-weight: bold;
}

/* 选择 title 属性值包含 "important" 的元素 */
[title~="important"] {
    text-decoration: underline;
}
```
伪类选择器 ：伪类选择器用于选择元素的特定状态或位置，而不是基于文档树的结构。例如，:hover 选择鼠标悬停在元素上时的状态，:first-child 选择作为其父元素的第一个子元素的元素，:nth-child() 选择作为其父元素的第 n 个子元素的元素，等等。
css 复制代码
```
/* 鼠标悬停时改变链接颜色 */
a:hover {
    color: blue;
}

/* 第一个段落设置背景色为灰色 */
p:first-child {
    background-color: lightgray;
}

/* 偶数行设置背景色为浅蓝色 */
tr:nth-child(even) {
    background-color: lightblue;
}
```

2.2 box-shadow

box-shadow 属性用于在元素周围创建阴影效果。它接受一组参数，包括阴影的水平偏移量、垂直偏移量、模糊半径、扩展半径和颜色。

css 复制代码

/* 创建一个水平和垂直偏移均为 5px、模糊半径为 10px、颜色为黑色的阴影 */
box-shadow: 5px 5px 10px black;

/* 创建一个向右下方偏移 10px 和向下方偏移 10px 的阴影，模糊半径为 5px，颜色为 #888888 */
box-shadow: 10px 10px 5px #888888;

2.3 background-clip （裁剪）

background-clip 属性用于指定背景图像或颜色的绘制区域。默认情况下，背景会延伸到边框的外边界，但可以通过 background-clip 来限制绘制区域。

css 复制代码

/* 背景绘制到内容框之内 */
background-clip: content-box;

/* 背景绘制到边框盒之内 */
background-clip: border-box;

2.4 transition （过渡）

transition 属性用于控制元素在状态变化时的过渡效果。它允许你定义一种属性变化的过渡效果，例如逐渐变化的速度、延迟时间和过渡函数。

css 复制代码

/* 定义宽度变化的过渡效果，持续 2 秒，缓慢加速然后缓慢减速，延迟 1 秒开始 */
transition: width 2s ease-in-out 1s;

2.5 transform （平移）

transform 属性允许你通过平移、旋转、缩放或倾斜等方式对元素进行变换。

css 复制代码

/* 沿着 x 轴移动 50px，沿着 y 轴移动 100px */
transform: translate(50px, 100px);

2.6 animation （动画）

animation 属性用于定义 CSS 动画。它允许你指定动画的名称、持续时间、延迟时间、重复次数、播放方向和过渡函数等。

css 复制代码

/* 应用一个名为 "slide" 的动画，持续 2 秒，延迟 1 秒开始，无限循环，交替播放 */
animation: slide 2s ease-in-out 1s infinite alternate;

2.7 渐变色

渐变色是一种从一个颜色过渡到另一个颜色的效果，可以通过 linear-gradient() 或 radial-gradient() 函数来创建线性渐变或径向渐变。

css 复制代码

/* 创建一个从红色过渡到黄色的水平线性渐变背景 */
background: linear-gradient(to right, red, yellow);

三、HTML5新增

3.1 新选择器 `document.querySelector` 和 `document.querySelectorAll`

document.querySelector(selector) 可以使用 CSS 选择器语法来查找文档中的元素。它返回匹配指定选择器的第一个元素，如果没有匹配的元素，则返回 null。

javascript 复制代码

const element = document.querySelector('.class');

document.querySelectorAll(selector) 方法与 document.querySelector 类似，但它返回所有匹配指定选择器的元素，而不仅仅是第一个匹配的元素。返回的是一个 NodeList 对象，可以通过遍历 NodeList 来访问所有匹配的元素。

javascript 复制代码

const elements = document.querySelectorAll('.class');
elements.forEach(element => console.log(element));

3.2 媒体播放 `video` 和 `audio`

<video>：HTML5 的视频标签，用于在网页中嵌入视频，可以通过指定视频的源文件（如 MP4、WebM、Ogg 等格式）和其他属性（如宽度、高度、控制按钮等）来控制视频的展示和行为。

html 复制代码

<video src="mp4" width="320" height="240" controls></video>

<audio> ：HTML5 的音频标签，用于在网页中嵌入音频。与 <video> 类似，可以通过指定音频的源文件和其他属性来控制音频的展示和行为。

html 复制代码

<audio src="mp3" controls></audio>

3.3 本地存储 `localStorage` 和 `sessionStorage`

localStorage：HTML5 提供的本地存储机制，允许在客户端（浏览器）中永久性地存储数据。存储的数据会一直保存在浏览器中，即使用户关闭浏览器或重新启动计算机也不会丢失，直到开发者显式删除它们。

javascript 复制代码

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');

sessionStorage：允许在客户端（浏览器）中临时性地存储数据。存储的数据只在当前会话期间有效，即当用户关闭标签页或浏览器时，数据会被清除。

javascript 复制代码

sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');

3.4 语义化标签 `header`, `nav`, `footer`, `section`, `article` 等

语义化标签 ：HTML5 引入的一系列语义化标签，如 header、nav、footer、section、article 等，用于更清晰地定义页面的结构和内容。这些标签使得开发者可以更准确地描述网页的各个部分，提高了页面的可读性和可访问性，有利于SEC和爬虫查找数据。

html 复制代码

<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
        </ul>
    </nav>
</header>

<section>
    <h2>文章标题</h2>
    <article>
        <p>文章内容</p>
    </article>
</section>

<footer>
    <p>页脚内容</p>
</footer>

3.5 全双工通信协议 WebSocket

WebSocket：全双工通信协议允许在浏览器和服务器之间建立持久的连接，实现实时的双向数据传输。WebSocket 提供了更低的延迟和更高的性能，适用于实时通信场景，如在线聊天、实时游戏等。

javascript 复制代码

const socket = new WebSocket('wss://1111.com');
socket.onopen = () => {
    console.log('WebSocket 连接已建立');
};
socket.onmessage = (event) => {
    console.log('收到消息：', event.data);
};
socket.send('Hello, WebSocket!');

3.6 浏览器历史对象 `history`

history ：HTML5 提供的浏览器历史对象，允许 JavaScript 修改浏览器的访问历史。history 对象包含用户在浏览器中访问过的 URL，开发者可以使用 history 对象的方法来在浏览器历史中向前或向后导航，以及获取当前页面的 URL 等信息。

javascript 复制代码

history.back(); // 后退一页
history.forward(); // 前进一页
history.go(-2); // 后退两页

3.7 多任务处理 `Web Worker`

Web Worker ：Web Worker 是 HTML5 提供的一种多线程处理机制，允许在浏览器中创建额外的线程执行 JavaScript 代码，以避免主线程的阻塞。主要分为两种类型：
1. 普通 Web Worker：在独立的线程中执行脚本，不能访问 DOM，主要用于执行耗时计算任务。
2. 共享 Web Worker：多个标签页之间共享一个 Worker 实例，可用于多个页面共享数据或协同处理任务。

3.8 页面可见性改变事件 `visibilitychange`

visibilitychange 事件 ：当页面的可见性状态发生变化时触发，如用户切换到其他标签页、最小化浏览器等。可以用来优化页面性能，例如在页面不可见时暂停某些动画或定时器。
javascript 复制代码
```
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        // 页面不可见时的操作
    } else {
        // 页面可见时的操作
    }
});
```

3.9 跨窗口通信 `PostMessage`

postMessage 方法 ：用于在不同窗口或 iframe 之间进行跨域通信，可以发送消息并在接收方监听消息。常用于实现跨窗口数据传递、跨域消息通知等。

javascript 复制代码

// 在发送方窗口中发送消息
targetWindow.postMessage(message, targetOrigin);

// 在接收方窗口中监听消息
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://1111.com') return; // 验证消息来源
    console.log('接收到的消息：', event.data);
});

3.10 表单 `FormData` 对象

FormData 对象 ：用于在 JavaScript 中创建表单数据对象，可以用于通过 AJAX 方式提交表单数据或进行文件上传等操作。
javascript 复制代码
```
const form = document.querySelector('form');
const formData = new FormData(form);
```

3.11 图像处理 Canvas 和 SVG

Canvas：HTML5 提供的绘图 API，允许在网页上动态绘制图形、动画和图片等，可以用于游戏开发、数据可视化等场景。
html 复制代码
```
<canvas id="myCanvas" width="400" height="400"></canvas>
```
SVG：可缩放矢量图形，是一种用于描述二维矢量图形的 XML 格式，支持高保真的缩放和变换，适用于制作图标、图表等图形。
html 复制代码
```
<svg width="400" height="400">
    <circle cx="200" cy="200" r="100" fill="red" />
</svg>
```

关于 ES6、Css 和 HTML5 新增了哪些？这篇带你全搞懂！

省流版：

一、ES6 新增

二、CSS3新增

三、HTML5新增

详细版：

一、ES6 新增

1.1 新增 symbol 类型

1.2 const 和 let

1.3 解构赋值

1.4 模板字符串

1.5 扩展运算符(数组、对象)

1.6 箭头函数

1.7 Set 和 Map 数据结构

1.8 Proxy/Reflect

1.9 Promise

1.10 async / await 函数

1.11 Class

1.12 Module 语法

二、CSS3新增

2.1 选择器：属性选择器，伪类选择器

2.2 box-shadow

2.3 background-clip （裁剪）

2.4 transition （过渡）

2.5 transform （平移）

2.6 animation （动画）

2.7 渐变色

三、HTML5新增

3.1 新选择器 document.querySelector 和 document.querySelectorAll

3.2 媒体播放 video 和 audio

3.3 本地存储 localStorage 和 sessionStorage

3.4 语义化标签 header, nav, footer, section, article 等

3.5 全双工通信协议 WebSocket

3.6 浏览器历史对象 history

3.7 多任务处理 Web Worker

3.8 页面可见性改变事件 visibilitychange

3.9 跨窗口通信 PostMessage

3.10 表单 FormData 对象

3.11 图像处理 Canvas 和 SVG

3.1 新选择器 `document.querySelector` 和 `document.querySelectorAll`

3.2 媒体播放 `video` 和 `audio`

3.3 本地存储 `localStorage` 和 `sessionStorage`

3.4 语义化标签 `header`, `nav`, `footer`, `section`, `article` 等

3.6 浏览器历史对象 `history`

3.7 多任务处理 `Web Worker`

3.8 页面可见性改变事件 `visibilitychange`

3.9 跨窗口通信 `PostMessage`

3.10 表单 `FormData` 对象