ES6+ 新特性 - JavaScript 基础

← 返回课程JavaScript 基础 › 第 12 关

进度 0%

第 12 关：ES6+ 新特性

JavaScript入门

📖 本课目标

本关属于《JavaScript 基础》第 12 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

ES6+ 新特性
1. let 和 const（块级作用域）

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 JavaScript，浏览器可直接运行代码并显示真实输出。

main.pytest.py

// ES6+ 新特性

// 1. let 和 const（块级作用域）
const PI = 3.14159;
let radius = 5;
console.log("圆面积:", PI * radius ** 2);

// 2. 模板字符串
const name = "CodeLearn";
const version = 2.0;
console.log(`欢迎使用 ${name} v${version}`);
console.log(`计算: 2 + 3 = ${2 + 3}`);

// 3. 解构赋值
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log("解构数组:", first, second, rest);

const { title, author = "匿名" } = { title: "JS 教程" };
console.log("解构对象:", title, author);

// 4. 箭头函数
const double = x => x * 2;
const add = (a, b) => a + b;
console.log("箭头函数:", double(5), add(3, 4));

// 5. 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log("展开数组:", arr2);

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log("展开对象:", obj2);

// 6. Map 和 Set
const map = new Map();
map.set("name", "小明");
map.set("age", 16);
console.log("\nMap:", map.get("name"), "大小:", map.size);

const set = new Set([1, 2, 2, 3, 3, 3]);
console.log("Set (自动去重):", [...set]);

// 7. 可选链和空值合并
const user = { profile: { name: "小明" } };
console.log("\n可选链:", user?.profile?.name);
console.log("空值合并:", user?.address?.city ?? "未设置");

⚠️ 请勿运行 while(true) 死循环，会卡死本页

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 12 关：ES6+ 新特性

JavaScript · 入门 · 《JavaScript 基础》

ES6+ 新特性
1. let 和 const（块级作用域）

本关可在浏览器直接运行。