1.4 编写第一个 ES6+ 程序

1.4 编写第一个 ES6+ 程序

在本节中，我们将编写一个简单的 ES6+ 程序，体验现代 JavaScript 的语法和特性。通过这个程序，你将学会如何使用 let、const、箭头函数、模板字符串等 ES6+ 特性。

1.4.1 程序目标

我们将编写一个简单的程序，实现以下功能：

1. 定义一个用户对象，包含姓名、年龄和爱好。
2. 使用模板字符串输出用户信息。
3. 使用箭头函数计算用户的出生年份。
4. 使用解构赋值提取用户信息。

1.4.2 编写代码

步骤 1：创建项目文件

1. 在项目目录下创建一个新文件，命名为 index.js。
2. 打开文件，开始编写代码。

步骤 2：定义用户对象
使用 const 定义一个用户对象，包含姓名、年龄和爱好：

const user = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "coding", "traveling"],
};

步骤 3：使用模板字符串输出信息
模板字符串（Template Literals）是 ES6 引入的新特性，支持多行字符串和嵌入表达式：

console.log(`User Info:
Name: ${user.name}
Age: ${user.age}
Hobbies: ${user.hobbies.join(", ")}`);

步骤 4：使用箭头函数计算出生年份
箭头函数是 ES6 引入的简洁函数语法，适合用于短小的函数：

const getBirthYear = (currentYear) => currentYear - user.age;
console.log(`Birth Year: ${getBirthYear(2023)}`);

步骤 5：使用解构赋值提取用户信息
解构赋值（Destructuring Assignment）可以方便地从对象或数组中提取值：

const { name, age, hobbies } = user;
console.log(`Extracted Info:
Name: ${name}
Age: ${age}
Hobbies: ${hobbies.join(", ")}`);

完整代码

// 定义用户对象
const user = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "coding", "traveling"],
};

// 使用模板字符串输出信息
console.log(`User Info:
Name: ${user.name}
Age: ${user.age}
Hobbies: ${user.hobbies.join(", ")}`);

// 使用箭头函数计算出生年份
const getBirthYear = (currentYear) => currentYear - user.age;
console.log(`Birth Year: ${getBirthYear(2023)}`);

// 使用解构赋值提取用户信息
const { name, age, hobbies } = user;
console.log(`Extracted Info:
Name: ${name}
Age: ${age}
Hobbies: ${hobbies.join(", ")}`);

1.4.3 运行程序

步骤 1：在终端中运行

1. 打开终端，进入项目目录。
2. 运行以下命令：

   node index.js
   

步骤 2：查看输出
如果一切正常，你会看到以下输出：

User Info:
Name: Alice
Age: 25
Hobbies: reading, coding, traveling
Birth Year: 1998
Extracted Info:
Name: Alice
Age: 25
Hobbies: reading, coding, traveling

1.4.4 代码解析

1. const 和 let：

   • const 用于定义常量，值不可重新赋值。
   • let 用于定义变量，值可以重新赋值。

2. 模板字符串：

   • 使用反引号（`）包裹字符串。
   • 通过 ${expression} 嵌入表达式。

3. 箭头函数：

   • 语法：(参数) => 表达式。
   • 如果函数体只有一行，可以省略 return。

4. 解构赋值：

   • 从对象中提取属性：const { 属性1, 属性2 } = 对象。
   • 从数组中提取元素：const [元素1, 元素2] = 数组。

1.4.5 总结

通过本节的学习，你已经编写了第一个 ES6+ 程序，并体验了以下特性：

• const 和 let 声明变量。
• 模板字符串输出动态内容。
• 箭头函数简化函数定义。
• 解构赋值提取对象属性。

这些特性是现代 JavaScript 开发的基础，掌握它们将为后续的学习打下坚实的基础。接下来，我们将深入学习 JavaScript 的核心语法和高级特性。

思考题：

1. const 和 let 的区别是什么？在什么情况下使用它们？
2. 模板字符串相比普通字符串有哪些优势？
3. 解构赋值可以用于哪些场景？如何从嵌套对象中提取值？