ES6新增的新特性以及用法（超详细）

在前端面试中经常会问到ES6，这已经是一个很热门的前端面试题了，基本都会问到，今天给大家总结ES6相关的新特性及用法。

以下是 ES6（ECMAScript 2015）引入的一些重要新特性，以及对每个特性的详细解释和相关代码示例：

箭头函数（Arrow Functions）

简介：箭头函数提供了一种简洁的函数定义语法，没有自己的this绑定，其this值取决于上下文。它们还简化了匿名函数的编写。

代码示例：

// ES5
     var numbers = [1, 2, 3, 4, 5];
     var squares = numbers.map(function(num) {
       return num * num;
     });

// ES6
     const numbers = [1, 2, 3, 4, 5];
     const squares = numbers.map(num => num * num);

模板字符串（Template Literals）

简介：模板字符串允许在字符串中嵌入表达式，并支持多行文本，无需使用拼接或转义字符。

代码示例：

 // ES5
     var name = "John";
     var greeting = "Hello, " + name + "!";

// ES6
     const name = "John";
     const greeting = `Hello, ${name}!`;

// 多行字符串
     const multiLineText = `This is line 1.
                           This is line 2.`; 

解构赋值（Destructuring Assignment）

简介：解构赋值允许从数组或对象中快速提取值并将其分配给多个变量，简化了数据交换和属性提取。

代码示例：

// 数组解构
     const [first, second, , fourth] = [1, 2, 3, 4];
     console.log(first); // 1
     console.log(fourth); // 4

// 对象解构
     const person = { name: "Alice", age: 30, city: "Seattle" };
     const { name, age } = person;
     console.log(name); // "Alice"
     console.log(age); // 30

 Promise

简介：Promise 是一种处理异步操作的标准机制，提供了更优雅的链式调用和错误处理方式，替代传统的回调函数。

代码示例：

function fetchUser() {
       return new Promise((resolve, reject) => {
         // 异步操作成功时
         resolve({ id: 1, name: "Alice" });
         // 异步操作失败时
         reject(new Error("User not found"));
       });
     }

fetchUser().then(user => console.log(user.name)).catch(error => console.error(error.message));

let与const声明变

简介：let和const是新的变量声明关键字，分别用于块级作用域变量和常量声明。

• let变量在指定的作用域内有效，避免了var可能导致的变量提升和作用域混乱问题。
• const声明的变量一旦赋值后就不能再更改，常用于声明不可变的引用或基本类型值。

 代码示例：

 // let
     {
       let count = 0;
       console.log(count); // 0
     }
     console.log(count); // ReferenceError: count is not defined

// const
     const PI = 3.14;
     PI = 3; // TypeError: Assignment to constant variable.

for...of循环

简介：for...of循环用于遍历可迭代对象（如数组、Set、Map、Generator对象等）的值，与for...in循环（遍历对象的键）相区分。

 代码示例：

const numbers = [1, 2, 3, 4, 5];

     for (let num of numbers) {
       console.log(num);
     }

Classes

简介：ES6 引入了基于原型的类（class）语法，提供了一种更接近传统面向对象语言的类定义方式，但本质上仍然是对原有构造函数和原型链机制的封装。

代码示例：

 

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

       introduce() {
         return `My name is ${this.name}, and I am ${this.age} years old.`;
       }
     }

     const alice = new Person("Alice", 30);
     console.log(alice.introduce()); // My name is Alice, and I am 30 years old.

模块化（Modules）

简介：ES6 提供了原生的模块化支持，通过import和export关键字来导入和导出模块成员，实现代码的复用和组织。

代码示例：

 

// module1.js
     export const PI = 3.14;

     // module2.js
     import { PI } from './module1.js';
     console.log(PI); // 3.14

 以上列举了 ES6 中一些关键的新特性及其代码示例。实际上，ES6 还包含了其他许多特性，如扩展运算符（...）、默认参数、剩余参数、展开语法、Symbol、Proxy、Reflect、生成器（Generator）、异步函数（Async/Await）等，这些特性共同极大地丰富了 JavaScript 语言的功能，提升了开发效率和代码质量。