重温 ES6 常用语法，玩转面试高频题

前端

2023-09-26 05:36:03

ES6：现代 Web 开发的基础

简介

在当今瞬息万变的技术领域，掌握最新的编程语言和技术至关重要。ES6（又称 ECMAScript 2015）作为 JavaScript 的最新版本，已成为现代 Web 开发的基石。精通其常用语法已成为软件开发人员面试中的必备技能。

ES6 核心语法

ES6 引入了一系列强大而高效的语法特性，旨在简化 JavaScript 开发，提升代码的可读性和可维护性。以下是一些核心语法及其用法示例：

1. 模板字符串

模板字符串（使用反引号 `` 标记）允许使用嵌入式表达式创建动态字符串。这使得字符串操作更加简洁灵活，例如：

const name = "Alice";
const message = `Hello, ${name}!`;
console.log(message); // 输出："Hello, Alice!"

2. 箭头函数

箭头函数（使用 => 符号）提供了一种更简洁的方式来创建匿名函数。它们自动绑定 this 上下文，并且可以很好地用于回调和事件处理程序，例如：

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
greet("Bob"); // 输出："Hello, Bob!"

3. 展开运算符

展开运算符（...）允许将数组或对象展开为单个元素列表或键值对。它经常用于复制数组或对象，或将它们合并到另一个数据结构中，例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2]; // 输出：[1, 2, 3, 4, 5, 6]

4. 解构赋值

解构赋值允许从数组或对象中提取特定元素或属性，并将其分配给变量。这简化了从数据结构中提取数据的过程，例如：

const [first, second] = [10, 20]; // first = 10, second = 20
const { name: fullName } = { name: "John Doe", age: 30 }; // fullName = "John Doe"

5. 类

ES6 引入了类作为一种更面向对象的方式来组织和结构化代码。类允许创建自定义数据类型，其中包含属性和方法，例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}
const alice = new Person("Alice", 25);
alice.greet(); // 输出："Hello, my name is Alice!"