第9课：小白进阶必看！ES6+JavaScript新特性全攻略

前端Hardy

已于 2025-05-07 15:28:27 修改

阅读量734

点赞数 26

分类专栏： JavaScript 文章标签： javascript es6 开发语言

于 2025-05-07 15:26:22 首次发布

本文链接：https://blog.csdn.net/weixin_52814911/article/details/147767102

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

越努力，越幸运！

2015 年发布的 ES6 是 JavaScript 历史上最重要的更新，它让 JS 蜕变为“工程化语言”。但很多时候面对 () => {}、…等符号仍会懵圈。本课将用真实项目高频场景 解析必学特性，让你读懂并写出优雅的现代 JS 代码！

一、颠覆旧时代的四大核心特性

1. 块级作用域：let/const 取代 var

旧痛点

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i));  // 输出3次3！
}

ES6 解法

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i));  // 0,1,2
}

规则：

let：可变的块级变量
const：不可变的常量（对象属性可改）
禁止变量提升，必须先声明后使用

2. 箭头函数：简化回调地狱

旧写法

const nums = [1, 2, 3];
nums.map(function (n) {
  return n * 2;
});

ES6 写法

nums.map(n => n * 2);  // 简洁！

特性：

自动绑定外层 this（解决 this 指向难题）
单参数可省略括号，单表达式可省略 return

3. 解构赋值：数据拆包神器

数组解构

const [a, , b] = [1, 2, 3];  // a=1, b=3
console.log('--',a, b)

对象解构

const { name, age } = { name: "小明", age: 18 };
console.log('--',name, age)

4. 模板字符串：告别拼接噩梦

旧写法

let name = 'Hardy'
let points = 100
console.log("你好，" + name + "！当前积分：" + points);

ES6 写法

let name = 'Hardy'
let points = 100
console.log(`你好，${name}！当前积分：${points}`);

进阶用法：

多行文本（HTML 模板）

const html = `
  <div class="box">
    <h2>${title}</h2>
  </div>
`;

二、提升开发效率的四大实用特性

// 默认参数
function order(name = "匿名用户", food = "咖啡") {
  console.log(`${name}点了 ${food}`);
}
order()
// 剩余参数（替代arguments）
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}
sum(1, 2, 3);  // 6

2. 展开运算符（…）

// 数组合并
const arr1 = [1, 2];
const arr2 = [...arr1, 3];  // [1,2,3]
console.log('arr2',arr2)
// 对象合并
const config = { port: 8080 };
const finalConfig = { ...config, env: "dev" };
console.log('finalConfig',finalConfig)

3. 对象属性简写

// 旧写法
const name = "小明";
const user = { name: name, age: 18 };
console.log('user',user)
// ES6写法
const user = { name, age: 18 };  // 自动同名匹配
console.log('user',user)

4. 可选链与空值合并（ES2020）

// 安全访问嵌套属性
const street = user?.address?.street ?? "未知街道";

// 等效旧代码
let street = "未知街道";
if (user && user.address && user.address.street) {
  street = user.address.street;
}

三、实战：用 ES6+重构抽奖器

1. 旧版代码痛点

回调嵌套可读性差
用 var 声明变量
字符串拼接复杂

2. 重构后代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第9课：进阶ES6+新特性</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            /* 浅蓝色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            background-color: #ffffff;
            /* 白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        button {
            background-color: #4CAF50;
            /* 绿色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 20px;
        }

        button:hover {
            background-color: #45a049;
            /* 按钮悬停时颜色加深 */
        }

        #result {
            font-size: 20px;
            color: #333333;
        }

        #result span {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <button id="lotteryBtn">点击抽奖</button>
        <p id="result"></p>
    </div>
    <script>
        const staffs = ["张三", "李四", "王五", "赵六"];

        // 箭头函数 + 解构
        const getRandom = arr => {
            const index = Math.floor(Math.random() * arr.length);
            return [...arr].splice(index, 1)[0];  // 避免重复中奖
        };

        // 模板字符串 + 解构
        const showResult = name => {
            const resultEl = document.querySelector("#result");
            resultEl.innerHTML = `🎉 中奖者：<span class="winner">${name}</span>`;
        };

        // 事件监听简化
        document.querySelector("#lotteryBtn").addEventListener("click", () => {
            const winner = getRandom(staffs);
            showResult(winner);
        });
    </script>
</body>

</html>