从 0开始学前端 第五十九课：ES6及更高版本的JavaScript新特性

第五十九课：ES6及更高版本的JavaScript新特性

学习目标

在本课中，我们将专注于以下目标：

1. 理解和使用ES6及更高版本的JavaScript新特性。
2. 掌握异步编程的概念，并学习如何使用Promise和async/await来处理异步操作。
3. 通过实例，深入了解这些新特性和异步编程模式的实际应用。

学习内容

ES6及更高版本的新特性

1. let 和 const

• 概念：let允许你声明一个块作用域的局部变量，const用于声明常量。
• 代码示例：

  let a = 2;
  const b = 3;
  a = 3; // 正确
  b = 4; // TypeError: Assignment to constant variable.
  

• 预计输出：尝试给b重新赋值时，会抛出一个错误。

2. 箭头函数

• 概念：箭头函数提供了一种更简洁的函数写法。
• 代码示例：

  const add = (x, y) => x + y;
  console.log(add(2, 3));
  

• 预计输出：5

3. 模板字符串

• 概念：模板字符串提供了一种声明字符串的新方式，允许嵌入变量或表达式。
• 代码示例：

  const user = 'Alice';
  console.log(`Hello, ${user}!`);
  

• 预计输出：Hello, Alice!

4. 解构赋值

• 概念：解构赋值允许你从数组或对象中提取数据，并赋值给独立变量。
• 代码示例：

  const [first, second] = [1, 2];
  const {name, age} = {name: 'Bob', age: 25};
  console.log(first, name);
  

• 预计输出：1 'Bob'

5. 扩展运算符

• 概念：扩展运算符...允许一个表达式在某处展开数组或字符串等可迭代的元素。
• 代码示例：

  const parts = ['shoulders', 'knees'];
  const body = ['head', ...parts, 'toes'];
  console.log(body);
  

• 预计输出：['head', 'shoulders', 'knees', 'toes']

异步编程、Promise和async/await

1. 异步编程

• 概念：异步编程是一种程序设计模式，它允许某些任务在等待任务完成时继续进行，而不是阻塞进程。

2. Promise

• 概念：Promise是一个表示异步操作最终完成或失败的对象。
• 代码示例：

  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
  
  myPromise.then((data) => {
    console.log(data);
  });
  

• 预计输出：2秒后控制台输出Data received。

3. async/await

• 概念：async/await是一种写异步代码的新方式，可以用同步代码的方式实现异步流程。
• 代码示例：

  async function fetchData() {
    const res = await myPromise;
    console.log(res);
  }
  fetchData();
  

• 预计输出：和上一个Promise实例相同，2秒后控制台输出Data received。

课后练习

练习1：使用ES6新特性

• 创建一个名为userInfo的对象，包含属性name和age。
• 使用解构赋值来获取这两个属性。
• 使用模板字符串打印出：“Name: [name], Age: [age]”。

练习2：异步编程实战

• 创建一个返回Promise的函数simulateAsyncOp，该函数模拟一个异步操作，1秒后解析为字符串"Async operation completed"。
• 使用async/await语法编写一个异步函数来调用simulateAsyncOp，并打印出结果。

解析

练习1解析：

const userInfo = { name: 'Alice', age: 30 };
const { name, age } = userInfo;
console.log(`Name: ${name}, Age: ${age}`);

练习2解析：

function simulateAsyncOp() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Async operation completed"), 1000);
  });
}

async function performAsyncOp() {
  const result = await simulateAsyncOp();
  console.log(result);
}

performAsyncOp();

• 预计输出：1秒后控制台输出Async operation completed。

通过上述练习，学生应该能够理解并应用JavaScript的高级特性，以及如何处理异步操作。

---

章节目录
第六十课：JavaScript设计模式