JavaScript基础课程十一、ES6+核心语法（一）——变量与函数升级

RFCEO2026-03-18 12:11

本课作为ES6+语法入门第一课，聚焦变量与函数两大核心模块升级，是从传统JS走向现代JS的关键过渡。重点掌握let、const替代var的核心规则，解决变量提升、全局污染、作用域混乱等痛点，养成const优先、let次之的声明习惯；吃透箭头函数语法与this指向特性，简化回调函数写法，规避this指向异常；掌握默认参数与剩余参数，优化函数传参逻辑。本课知识是Vue、React等框架开发的基础，直接影响后续代码规范与可读性，彻底摒弃老旧语法，实现代码简洁化、逻辑严谨化，为后续ES6+进阶学习打下坚实基础。

一、课程学习目的

  1. 理解ES6+语法的核心意义，区分ES5传统语法与ES6新语法的差异，掌握现代JS标准写法；

  2. 吃透let、const声明变量的规则，对比var的缺陷，杜绝变量提升、重复声明、作用域混乱问题；

  3. 掌握箭头函数的语法、特性与适用场景，理解this指向变化，简化函数书写逻辑；

  4. 熟练运用函数默认参数、剩余参数，优化函数传参逻辑，适配前端实战开发需求；

  5. 衔接前序函数、数组、DOM课程，实现新旧语法过渡，养成规范的现代JS编码习惯。

二、核心知识点讲解

1. ES6+基础认知

ES6全称ECMAScript 2015，是JavaScript的重要版本更新，后续新增的语法统称为ES6+，属于现代JavaScript必学语法，目前企业开发、框架开发均以ES6+为标准，弥补了传统ES5语法的诸多缺陷，代码更简洁、逻辑更严谨、可读性更强。

2. let关键字：块级作用域变量

let用于声明变量，可后续修改值，核心解决var的变量提升、重复声明、全局污染问题，核心特性：

  • 块级作用域：仅在当前{}代码块内有效（if、for、函数、独立代码块均适用），外部无法访问；

  • 无变量提升：必须先声明后使用，否则报错，避免逻辑异常；

  • 不可重复声明：同一作用域内，不允许重复声明同名let变量，防止变量覆盖；

  • 不会挂载到window：避免全局变量污染，保护变量安全。

3. const关键字：常量声明

const用于声明常量，一旦赋值不可修改，是企业开发中优先使用的声明方式，核心特性：

  • 具备let的所有特性：块级作用域、无变量提升、不可重复声明、不污染全局；

  • 必须初始化赋值：声明时必须直接赋值，不允许先声明后赋值；

  • 基本数据类型值不可改：字符串、数字、布尔值赋值后无法修改；

  • 引用数据类型（数组、对象）：地址不可改，内部属性和元素可修改。

4. 箭头函数：ES6函数简写

箭头函数是传统函数的简写形式，语法更简洁，适合匿名函数、回调函数场景，核心特性：

  • 省略function关键字，用=>定义函数，支持单行简写；

  • 无自身this指向：继承上级作用域的this，解决传统函数this指向混乱问题；

  • 没有arguments对象，无法获取所有实参集合；

  • 不能作为构造函数使用，不支持new关键字实例化；

  • 单行代码可省略{}和return，自动返回结果。

5. 函数参数升级

（1）函数默认参数

声明函数时直接给形参设置默认值，调用函数时不传对应实参，自动使用默认值，无需额外判断，简化代码逻辑。

（2）剩余参数...

用...args接收多余的实参，整合为一个数组，替代arguments对象，适配不确定个数的传参场景，使用更灵活。

三、示例程序

示例1：let与const基础用法（对比var）

javascript 复制代码 
// 1. var传统声明：存在变量提升、全局污染、可重复声明
console.log(numVar); // 变量提升，输出undefined
var numVar = 10;
var numVar = 20; // 重复声明不报错

// 2. let声明：块级作用域、无变量提升、不可重复
// console.log(numLet); // 报错，无变量提升
let numLet = 30;
// let numLet = 40; // 报错，不可重复声明
if(true){
  let numLet = 50; // 块级作用域，仅if内有效
  console.log('if内let：', numLet);
}
console.log('全局let：', numLet);

// 3. const声明常量：必须赋值，值不可改
const PI = 3.14159;
// PI = 3.14; // 报错，基本数据类型值不可改
console.log('圆周率PI：', PI);

// const声明数组/对象：地址不可改，内部可修改
const arr = [1,2,3];
arr.push(4); // 允许修改内部元素
// arr = [4,5,6]; // 报错，地址不可改

示例说明：本示例完整对比var、let、const三种声明方式的核心差异，直观展示变量提升、块级作用域、重复声明等特性，帮助快速摒弃var语法，掌握let和const的正确用法，区分常量与变量的适用场景，养成优先使用const的编码习惯，规避传统变量声明的常见坑点。

示例2：箭头函数基础用法

javascript 复制代码 
// 1. 传统函数写法
const sum1 = function(a,b){
  return a + b;
};
console.log('传统函数求和：', sum1(10,20));

// 2. 箭头函数标准写法
const sum2 = (a,b) => {
  return a + b;
};
console.log('箭头函数求和：', sum2(10,20));

// 3. 箭头函数简写：单行代码省略{}和return
const sum3 = (a,b) => a + b;
console.log('箭头函数简写：', sum3(10,20));

// 4. 单个参数可省略()
const printWord = word => console.log('学习单词：', word);
printWord('apple');

// 5. 无参数需保留()
const sayHi = () => console.log('欢迎学习ES6语法！');
sayHi();

示例说明：本示例从传统函数过渡到箭头函数，逐步讲解标准写法、单行简写、单参数省略、无参数写法，覆盖日常常用场景，清晰展示箭头函数的简洁优势。结合儿童英语单词打印场景，贴合前序课程案例，帮助快速掌握简写规则，适配DOM事件、数组遍历、定时器等回调函数场景。

示例3：箭头函数this指向特性

javascript 复制代码 
// 传统函数：this指向调用者
const obj1 = {
  name: '英语学习工具',
  getName: function(){
    // this指向obj1
    setTimeout(function(){
      console.log('传统函数this：', this); // this指向window
      console.log('传统函数name：', this.name); // 空值
    },1000);
  }
};
obj1.getName();

// 箭头函数：继承上级this
const obj2 = {
  name: '英语学习工具',
  getName: function(){
    // this指向obj2
    setTimeout(() => {
      console.log('箭头函数this：', this); // this继承obj2
      console.log('箭头函数name：', this.name); // 正常输出
    },1000);
  }
};
obj2.getName();

示例说明：本示例对比传统函数与箭头函数的this指向差异，解决定时器、回调函数中this指向混乱的痛点，这是ES6箭头函数的核心价值。结合对象方法场景，直观展示箭头函数继承上级this的特性，帮助理解框架开发、实战项目中this指向逻辑，避免常见的this指向错误。

示例4：函数默认参数+剩余参数

javascript 复制代码 
// 1. 函数默认参数
const printInfo = (name,age = 10) => {
  console.log(`姓名：${name}，年龄：${age}`);
};
// 不传age，使用默认值10
printInfo('小明');
// 传age，覆盖默认值
printInfo('小红',12);

// 2. 剩余参数... 接收多余实参
const sumTotal = (...nums) => {
  // nums是数组，存储所有实参
  let total = 0;
  for(let num of nums){
    total += num;
  }
  return total;
};
console.log('多参数求和：', sumTotal(1,2,3,4,5));

// 3. 固定参数+剩余参数结合
const printWords = (first,...others) => {
  console.log('第一个单词：', first);
  console.log('其余单词：', others);
};
printWords('apple','banana','orange','cat');

示例说明：本示例讲解函数参数两大升级特性，默认参数省去手动判空逻辑，剩余参数灵活接收多实参，替代arguments对象。结合年龄打印、多数字求和、单词打印场景，贴合儿童英语学习与日常数据处理需求，代码更简洁、可读性更强，适配各类不确定传参的函数场景。

四、掌握技巧与方法

  1. 声明变量优先用const ，值需要修改时改用let，彻底摒弃var，杜绝变量污染；

  2. const声明基本数据类型必须赋值，且不可修改，数组、对象可修改内部内容；

  3. 箭头函数适合回调函数、工具函数，不适合构造函数、对象方法（需动态this场景）；

  4. 单行箭头函数省略{}和return，多行代码必须保留{}，逻辑更清晰；

  5. 函数默认参数放在形参末尾，剩余参数必须放在最后一位，不可颠倒顺序；

  6. 实战开发中，ES6+语法与前序DOM、BOM、数组知识结合，代码更简洁高效。

五、课后作业

基础必做作业

  1. 分别用let、const声明变量，验证块级作用域、不可重复声明特性，对比var的差异；

  2. 用箭头函数改写传统函数，实现打印3个英语单词的功能，尝试单行简写写法；

  3. 给函数设置默认参数，实现姓名+职业的打印功能，不传职业时默认显示"学生"。

进阶必做作业

  1. 用const声明英语单词数组，修改数组内部元素，尝试直接修改数组地址，观察报错结果；

  2. 用剩余参数实现求多个数字最大值的函数，支持传入任意个数数字参数；

  3. 对比箭头函数与传统函数的this指向，写出核心区别。

实战场景作业

  1. 结合DOM操作，用let/const声明变量，箭头函数绑定点击事件，点击按钮修改页面单词内容，要求全程使用ES6+语法，不出现var、传统函数写法，实现现代JS规范的交互效果。

六、上一课后作业答案

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第十课 DOM操作实战 - 儿童英语单词学习工具</title>
    <style>
        /* 基础页面样式，不占用JS DOM操作知识点 */
        .container {
            width: 600px;
            margin: 50px auto;
            text-align: center;
            font-family: "Microsoft YaHei";
        }
        .word-box {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        button {
            padding: 8px 16px;
            margin: 0 10px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 待修改的标题元素 -->
        <h2 id="mainTitle">儿童英语单词学习工具</h2>
        
        <!-- 单词展示区域 -->
        <div id="wordShow" class="word-box">
            点击下方按钮，开始学习单词
        </div>
        
        <!-- 单词图片元素（待修改属性） -->
        <img id="wordImg" src="" alt="单词图片" width="150" style="margin: 15px 0;display: none;">
        
        <!-- 操作按钮 -->
        <button id="changeContentBtn">展示单词</button>
        <button id="changeStyleBtn">高亮样式</button>
        <button id="changeAttrBtn">显示单词图片</button>
    </div>

    <script>
        // ===================== 第十课核心：提前获取所有DOM元素（操作前提） =====================
        // 通过id获取元素，是最常用、最稳定的获取方式
        const mainTitle = document.getElementById('mainTitle');
        const wordShow = document.getElementById('wordShow');
        const wordImg = document.getElementById('wordImg');
        const changeContentBtn = document.getElementById('changeContentBtn');
        const changeStyleBtn = document.getElementById('changeStyleBtn');
        const changeAttrBtn = document.getElementById('changeAttrBtn');

        // 预设单词数据，贴合课程案例场景
        const wordData = {
            en: 'apple',
            cn: '苹果',
            imgSrc: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
            // 此处可替换为真实苹果图片链接，本地图片需填写对应路径
        };

        // ===================== 1. 修改元素内容（innerText/innerHTML） =====================
        // 绑定点击事件，点击修改文本内容
        changeContentBtn.onclick = function() {
            // innerText 修改纯文本内容，不解析HTML标签
            wordShow.innerText = `当前学习单词：${wordData.en} ------ 中文释义：${wordData.cn}`;
            // 同步修改标题内容，强化知识点练习
            mainTitle.innerText = '正在学习：apple（苹果）';
        };

        // ===================== 2. 修改元素行内样式（style.属性，小驼峰命名） =====================
        changeStyleBtn.onclick = function() {
            // 修改文字颜色、背景色、字号、边框（CSS带横线属性转为小驼峰）
            wordShow.style.color = '#ffffff';
            wordShow.style.backgroundColor = '#42b983';
            wordShow.style.fontSize = '20px';
            wordShow.style.borderColor = '#42b983';
            // 修改按钮自身样式
            changeStyleBtn.style.backgroundColor = '#42b983';
            changeStyleBtn.style.color = '#fff';
        };

        // ===================== 3. 修改元素属性（src/alt/display等） =====================
        changeAttrBtn.onclick = function() {
            // 修改图片src属性（图片路径）
            wordImg.src = wordData.imgSrc;
            // 修改图片alt替代文本
            wordImg.alt = `${wordData.en}单词配图`;
            // 修改display样式，显示隐藏的图片
            wordImg.style.display = 'inline-block';
        };
    </script>
</body>
</html>

代码对应知识点说明

  1. 获取DOM元素 ：全程使用 document.getElementById()，符合课程基础核心，先获取再操作，遵循DOM操作标准流程。

  2. 修改内容 ：使用innerText 修改纯文本，适配单词展示场景，不涉及复杂HTML，贴合入门教学。

  3. 修改样式 ：严格遵循小驼峰命名规则 ，如 backgroundColor、fontSize，修改文字、背景、边框等常用样式。

  4. 修改属性 ：修改图片 src、alt 属性，以及 display 显示隐藏属性，覆盖课程属性操作核心考点。

  5. 场景连贯：沿用儿童英语单词学习场景，和前序课程案例无缝衔接，上下文流畅无断层。

实战作业要求

  1. 点击"展示单词"按钮，页面正常显示英文单词+中文释义，标题同步更新。

  2. 点击"高亮样式"按钮，单词区域变色、字号变大，按钮样式同步修改。

  3. 点击"显示单词图片"按钮，图片正常加载显示，替代文本生效。

  4. 代码无报错，注释清晰，完全对应第十课DOM操作三大核心知识点。

HTML编程 课程一、HTML 基础入门

前端编程 课程十一、：CSS 基础入门 基本语法

热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04UV安装并设置国内源05OpenClaw Control UI安全上下文访问配置06Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08本地部署 OpenClaw + DeepSeek-R1 完全指南09小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南