0-3 现代 JavaScript(ES6+)

配套 Demo

在线运行：0-3-es6

这是进入 Vue 前最关键的一章。Vue 代码全是现代 JS 语法,这些语法不熟,看 Vue 代码会处处卡壳。

好消息:你有后端基础,这些概念大多有对应物,本章只讲最高频、Vue 里天天用的部分。

配套 demo:demo/0-3-es6.html。它把每个知识点的运行结果直接打印在网页上,你边看讲义边对照效果。双击打开即可。

---

1. 变量:let 和 const(别再用 var)

const PI = 3.14;   // 常量,不可重新赋值(优先用它)
let count = 0;     // 变量,可以改
count = 1;         // OK
// PI = 3;         // ❌ 报错

规则:默认用 const,确实需要改的才用 let。忘掉老教程里的 var。

注意:const 对象/数组「本身」不能重新赋值,但里面的内容可以改:

const user = { name: '张三' };
user.name = '李四';  // ✅ 可以,改的是内容
// user = {};         // ❌ 不行,重新赋值整个变量

---

2. 模板字符串(反引号)

拼字符串不用 + 了,用反引号 ` 和 ${}:

const name = '张三';
const age = 30;
// 老写法:'你好 ' + name + ',今年 ' + age + ' 岁'
const msg = `你好 ${name},今年 ${age} 岁`; // 清爽多了

${} 里能放任何表达式:`总价:${price * count} 元`。Vue 模板里到处是这种思路。

---

3. 箭头函数(Arrow Function)

定义函数的简写。后端类比:像 Java 的 Lambda、C# 的 =>。

// 老写法
function add(a, b) { return a + b; }

// 箭头函数
const add = (a, b) => a + b;        // 单行直接返回,省略 {} 和 return
const square = x => x * x;          // 一个参数可省括号
const log = () => { console.log('hi'); }; // 无参/多行用 {}

Vue 里事件处理、数组遍历几乎全用箭头函数。

进阶提醒:箭头函数没有自己的 this(用外层的)。初学先不纠结,Vue 3 的 <script setup> 里基本不用操心 this。

---

4. 解构(Destructuring)——超高频

从对象/数组里「拆」出值,少写很多 obj.xxx。

// 对象解构
const user = { name: '张三', age: 30, city: '深圳' };
const { name, age } = user;   // 直接得到 name='张三', age=30

// 数组解构
const arr = [10, 20, 30];
const [first, second] = arr;  // first=10, second=20

Vue 里 import { ref, computed } from 'vue' 就是对象解构;const { data } = await axios.get(...) 取接口返回也靠它。

---

5. 展开运算符 ...(Spread)

把数组/对象「摊开」,常用于复制和合并。

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];        // [1, 2, 3, 4]

const base = { name: '张三', age: 30 };
const copy = { ...base, age: 31 };  // 复制并覆盖 age → {name:'张三', age:31}

为什么重要:前端讲究「不直接改原数据,而是基于旧数据造新数据」(不可变思想)。... 是实现它的主力,Vue/Pinia 里常见。

---

6. 数组方法:map / filter / find(必须熟练)

后端写循环遍历列表很常见,前端几乎不写 for 循环,改用这些函数式方法。它们都返回新数组/新值,不改原数组。

const nums = [1, 2, 3, 4];

// map:每个元素「变换」一下,返回等长新数组(后端:stream().map())
const doubled = nums.map(n => n * 2);          // [2, 4, 6, 8]

// filter:筛选出满足条件的,返回新数组(后端:stream().filter())
const evens = nums.filter(n => n % 2 === 0);   // [2, 4]

// find:找第一个满足条件的元素(找不到返回 undefined)
const found = nums.find(n => n > 2);           // 3

// 对象数组很常见:
const users = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
const names = users.map(u => u.name);          // ['A', 'B']
const u2 = users.find(u => u.id === 2);        // {id:2, name:'B'}

map 是 Vue 渲染列表的灵魂:接口返回一个数组,你 map 成一个个界面元素。务必练熟。

---

7. 对象简写

const name = '张三';
const age = 30;

// 属性名和变量名相同时可简写
const user = { name, age };      // 等价于 { name: name, age: age }

// 方法简写
const obj = {
  greet() { return 'hi'; }       // 等价于 greet: function() {...}
};

---

8. 异步:Promise 与 async/await(调接口必备)

前端调后端接口是异步的(发请求要等响应,不能卡住界面)。现代写法用 async/await,读起来像同步代码。

// 一个返回 Promise 的函数(比如发 HTTP 请求)
function getUser() {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(res => res.json());
}

// 用 async/await 调用(推荐写法,像后端的同步代码)
async function show() {
  try {
    const user = await getUser();   // await 等结果回来再往下走
    console.log('拿到用户:', user.name);
  } catch (err) {
    console.error('请求失败:', err); // 异常捕获,和后端 try/catch 一样
  }
}
show();

要点:

• 函数前加 async,内部才能用 await。
• await 后面跟一个 Promise,会等它完成再继续。
• 错误用 try/catch 抓,和后端一致。

第 2 部分用 axios 调接口时,全是这个套路。现在理解「await = 等异步结果」即可。

---

9. 模块化 import / export(第 2 部分起天天用)

把代码拆到不同文件,互相引用。后端类比:import 一个包/类。

// utils.js —— 导出
export function add(a, b) { return a + b; }
export const PI = 3.14;
export default function () { /* 默认导出,一个文件一个 */ }

// main.js —— 导入
import { add, PI } from './utils.js';        // 命名导入,要加 {}
import myDefault from './utils.js';           // 默认导入,不加 {}

第 0~1 部分的 CDN demo 不用模块;到第 2 部分 Vite 工程,每个 .vue / .js 文件都靠 import/export 串起来。

---

动手练习

打开 demo/0-3-es6.html,网页上能看到每段代码的运行结果。然后:

1. 改模板字符串里的 name,刷新看输出。
2. 在数组 [1,2,3,4] 后面加几个数,看 map/filter 结果怎么变。
3. 把 filter 的条件从 n % 2 === 0(偶数)改成 n > 2,观察结果。

---

小结(进入 Vue 前的检查清单)

确认你看懂了这些,就可以进第 1 部分了:

• [ ] const / let,默认用 const
• [ ] 模板字符串 `${}`
• [ ] 箭头函数 (a) => a + 1
• [ ] 解构 const { a, b } = obj
• [ ] 展开 [...arr] / {...obj}
• [ ] 数组 map / filter / find(最重要)
• [ ] async/await 调异步(知道 await 是「等结果」)
• [ ] import / export 概念

➡️ 下一章进入正题:第 1 部分 1-1 第一个 Vue 应用