ECMAScript(2)核心语法课件（Node.js/React 环境）

📚 ECMAScript 核心语法课件（Node.js/React 环境）

1. 变量与作用域

变量声明方式

  • var：函数作用域，存在变量提升（hoisting）
    console.log(a); // undefined（变量提升）
var a = 10;
  • let：块级作用域，无变量提升
    // console.log(b); // 报错（暂时性死区）
let b = 20;
  • const：块级作用域，声明时必须初始化，不可重新赋值
    const c = 30;
// c = 40; // 报错

作用域类型

  • 全局作用域：在函数外声明，全局可访问
  • 函数作用域：var 声明的变量在函数内有效
  • 块级作用域：let/const 在 {} 内有效（如 if、for 语句）

示例对比

// var 的变量提升
function testVar() {console.log(x); // undefinedvar x = 1;
}// let 的块级作用域
if (true) {let y = 2;
}
// console.log(y); // 报错：y is not defined

2. 数据类型

基本数据类型（7种）

  1. undefined：未定义的值
  2. null：空值
  3. boolean：true/false
  4. number：整数/浮点数（包括 NaN、Infinity）
let num = 3.14;
let nan = NaN; // 非数字值
  1. string：字符串（可用单/双引号或模板字符串）
let name = "Alice";
let greeting = `Hello, ${name}!`; // 模板字符串
  1. symbol：唯一值（ES6+）
let sym = Symbol("id");
  1. bigint：大整数（ES2020+）
let bigNum = 9007199254740991n;

引用数据类型

  • object：对象、数组、函数等
    let obj = { key: "value" };
let arr = [1, 2, 3];
function func() {}

类型检测方法

  • typeof：检测基本类型（注意 typeof null === "object"）
  • instanceof：检测引用类型（如 arr instanceof Array）
  • Object.prototype.toString.call()：精确检测所有类型
    Object.prototype.toString.call([]); // "[object Array]"

3. 运算符与表达式

算术运算符

  • +、-、*、/、%、**（指数）
    console.log(2 ** 3); // 8

比较运算符

  • ==（宽松相等）、===（严格相等）
    "5" == 5;   // true
"5" === 5;  // false

逻辑运算符

  • &&（与）、||（或）、!（非）
    let value = null || "default"; // "default"

赋值运算符

  • =、+=、-=、*= 等
    let count = 10;
count += 5; // 15

其他运算符

  • 三元运算符：condition ? expr1 : expr2
    let result = score > 60 ? "及格" : "不及格";
  • 可选链（?.）：避免访问 null/undefined 属性（ES2020+）
    let name = user?.profile?.name; // 安全访问

4. 流程控制

条件语句

  • if...else：
    if (score > 90) {console.log("优秀");
} else if (score > 60) {console.log("及格");
} else {console.log("不及格");
}
  • switch：
    switch (color) {case "red":console.log("红色");break;default:console.log("其他颜色");
}

循环语句

  • for：
    for (let i = 0; i < 5; i++) {console.log(i);
}
  • while/do...while：
    let i = 0;
while (i < 5) {console.log(i);i++;
}
  • for...of（遍历可迭代对象，如数组）：
    let arr = [1, 2, 3];
for (let item of arr) {console.log(item);
}

跳转语句

  • break：退出循环
  • continue：跳过本次循环
  • return：函数返回值

💡 教学建议

  1. 结合 Node.js 环境演示：使用 node 命令直接运行示例代码，观察结果。
  2. 对比 TypeScript：在讲解时可提示 TS 的增强点（如类型注解、静态检查）。
  3. 联系 React 开发：
    • 组件状态（useState）常用 let/const 声明。
    • Props 传递涉及对象类型检测。
    • 条件渲染需熟练运用 &&、三元运算符。
  4. 常见陷阱强调：
    • var 的变量提升与作用域问题。
    • NaN 的特殊性（NaN !== NaN）。
    • 浮点数精度问题（如 0.1 + 0.2 !== 0.3）。

好的，以下是针对【函数、对象与面向对象、集合、模块化】的 ECMAScript 课件内容和知识点举例，结合了现代 ES6+ 语法和 React 开发中的常见模式。

📘 ECMAScript 核心概念进阶课件

1. 函数

函数定义与提升

  • 函数声明：整体提升，可在定义前调用
    console.log(add(2, 3)); // 5 (函数提升)
function add(a, b) {return a + b;
}
  • 函数表达式：仅变量提升，不可提前调用
    // console.log(multiply(2, 3)); // 报错
const multiply = function(a, b) {return a * b;
};

箭头函数 (ES6+)

  • 语法简洁，无自身 this，继承自外层作用域
    // 传统函数
[1, 2, 3].map(function(x) { return x * x; });// 箭头函数
[1, 2, 3].map(x => x * x); // [1, 4, 9]// React 中的使用：避免 this 绑定问题
const MyComponent = () => <div>Hello World</div>;

默认参数与剩余参数

  • 默认参数：为参数提供默认值
    function greet(name = "Guest", greeting = "Hello") {return `${greeting}, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
  • 剩余参数：将不定数量的参数表示为数组
    function sum(...numbers) {return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

2. 对象与面向对象

对象字面量增强 (ES6+)

  • 属性简写：变量名直接作为属性名
    const name = "Alice";
const age = 25;
// ES5
const personOld = { name: name, age: age };
// ES6+
const personNew = { name, age }; // { name: "Alice", age: 25 }
  • 方法简写：省略 function 关键字
    const person = {name: "Bob",// ES5sayHello: function() { console.log("Hello"); },// ES6+sayHi() { console.log("Hi"); }
};
  • 计算属性名：使用 [] 动态定义属性名
    const propKey = "firstName";
const person = {[propKey]: "John", // firstName: "John"[`get${propKey}`]() { return this[propKey]; } // getFirstName()
};

类 (Class) 语法 (ES6+)

  • class 定义类，constructor 定义构造函数，extends 实现继承
    class Person {constructor(name, age) {this.name = name;this.age = age;}// 方法定义在原型上greet() {console.log(`Hello, my name is ${this.name}`);}// 静态方法static describe() {console.log("This is a Person class");}
}class Student extends Person {constructor(name, age, grade) {super(name, age); // 调用父类 constructorthis.grade = grade;}study() {console.log(`${this.name} is studying`);}
}const alice = new Student("Alice", 22, "A");
alice.greet(); // "Hello, my name is Alice"
Student.describe(); // "This is a Person class"

3. 集合

Set

  • 成员值唯一，无重复
    const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = new Set(numbers); // Set(5) {1, 2, 3, 4, 5}
console.log([...uniqueNumbers]); // [1, 2, 3, 4, 5] (转数组)// 常用方法
const set = new Set();
set.add(1).add(2).add(3); // 添加
console.log(set.has(2)); // true (检查是否存在)
set.delete(2); // 删除
console.log(set.size); // 2 (获取大小)
set.clear(); // 清空

Map

  • 键值对集合，键可以是任意类型
    const map = new Map();
const keyObj = { id: 1 };map.set(keyObj, "value associated with object"); // 设置键值对
map.set("name", "Alice");console.log(map.get(keyObj)); // "value associated with object" (获取值)
console.log(map.has("name")); // true
console.log(map.size); // 2map.delete("name"); // 删除
// map.clear(); // 清空// 遍历
for (let [key, value] of map) {console.log(key, value);
}

WeakSet 与 WeakMap

  • 弱引用，键必须是对象，不可枚举，无 size 属性，不易造成内存泄漏
    let obj = { data: "test" };
const weakSet = new WeakSet();
weakSet.add(obj);const weakMap = new WeakMap();
weakMap.set(obj, "some value");// 当 obj = null 时，垃圾回收机制会自动回收 weakSet 和 weakMap 中的记录

4. 模块化 (ES6 Module)

导出 (Export)

  • 命名导出：一个模块可导出多个[citation:10][citation:11]
    // math.js
export const PI = 3.14159;
export function square(x) {return x * x;
}
export class Calculator {add(a, b) { return a + b; }
}
// 或者最后统一导出
// export { PI, square, Calculator };
  • 默认导出：一个模块只能有一个[citation:10][citation:11]
    // logger.js
const defaultLogger = {log: (msg) => console.log(`LOG: ${msg}`)
};
export default defaultLogger;

导入 (Import)

  • 导入命名导出：[citation:10][citation:11]
    // main.js
import { PI, square, Calculator } from './math.js';
console.log(PI);
  • 导入默认导出：[citation:10][citation:11]
    import logger from './logger.js'; // 名称可自定义
logger.log("Hello");
  • 混合导入：[citation:10][citation:11]
    import React, { Component } from 'react'; // React 默认导出，Component 是命名导出
  • 动态导入：按需加载[citation:10][citation:11]
    // 返回一个 Promise
import('./module.js').then(module => {module.doSomething();}).catch(err => {console.error("Module loading failed", err);});// 或在 async 函数中使用
async function loadModule() {const module = await import('./module.js');module.doSomething();
}

在 Node.js 和浏览器中使用

  • Node.js：在 package.json 中设置 "type": "module"，或使用 .mjs 扩展名[citation:10][citation:11]
    // package.json
{"type": "module"
}
  • 浏览器：使用 <script type="module"> 标签[citation:11]
    <script type="module" src="main.js"></script>

💡 教学提示与最佳实践

  1. 函数选择：

    • 优先使用箭头函数，尤其在需要固定 this 的场景（如 React 事件处理、定时器）。
    • 对于需要自身 this（如对象方法）或需要提升的函数，使用函数声明。

  2. 面向对象编程：

    • 使用 class 语法让代码更清晰易读，更接近传统面向对象语言。
    • extends 和 super 使继承变得简单。

  3. 集合运用：

    • 需要存储唯一值时用 Set。
    • 需要键值对且键可能为非字符串时用 Map（优于普通对象）。
    • 处理** DOM 节点**等对象且担心内存泄漏时，考虑 WeakMap 或 WeakSet。

  4. 模块化工程：

    • ES6 Module 是现代 JavaScript 项目的标准模块化方案。
    • 合理使用命名导出和默认导出，保持模块职责单一。
    • 动态导入可用于代码分割（Code Splitting），提升大型应用初始加载速度。

  5. React 关联示例：

    • 函数组件：大量使用箭头函数和默认导出。
    // React 函数组件 (通常默认导出)
const Welcome = (props) => <h1>Hello, {props.name}</h1>;
export default Welcome;
    • 类组件：使用 class 和 extends Component。
    import React, { Component } from 'react';
class Welcome extends Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}
export default Welcome;
    • Hooks：模块化导入。
    import React, { useState, useEffect } from 'react';

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/96151.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/96151.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Selenium 页面加载超时pageLoadTimeout与 iframe加载关系解析

Selenium 页面加载超时pageLoadTimeout与 iframe加载关系解析

引言 在 Web 自动化测试中&#xff0c;处理页面加载超时是每个 Selenium 使用者都会遇到的挑战。特别是当页面包含 iframe 时&#xff0c;加载行为变得更加复杂。许多测试工程师困惑于&#xff1a;pageLoadTimeout 究竟能否控制 iframe 的加载&#xff1f;本文将深入探讨这一问…
阅读更多...
AI面试将重塑企业招聘流程：从效率到精准度的全面升级

AI面试将重塑企业招聘流程：从效率到精准度的全面升级

每年校招季&#xff0c;HR团队总被“面试官不够用”“简历太多看不清”“候选人放鸽子”等问题折磨。传统招聘流程冗长、成本高昂、标准参差&#xff0c;已难以适应快速变化的用人需求。而AI面试技术的突破&#xff0c;正在从底层逻辑上重塑招聘链条——从初筛到终面&#xff0…
阅读更多...
IOC为什么交由spring容器管理？

IOC为什么交由spring容器管理？

根本原因&#xff1a;在 Spring 框架中&#xff0c;将控制反转&#xff08;IoC&#xff09; 交由 Spring 容器管理&#xff0c;是为了解决传统编程模式中 “对象创建与依赖管理耦合度高” 的核心问题&#xff0c;最终实现代码的低耦合、高可维护性、高可测试性。要理解这一设计…
阅读更多...
Java反射与动态代理学习笔记

Java反射与动态代理学习笔记

Java 反射与动态代理学习笔记反射概述反射允许对成员变量、成员方法和构造方法进行编程访问&#xff0c;提供了在运行时分析类和对象的能力。获取Class对象的三种方式方式代码示例说明Class.forName()Class.forName("全类名")通过类的全限定名获取Class对象对象.getC…
阅读更多...
RAG提示词分解

RAG提示词分解

RAG提示词分解 System Message # 智能问答助手&#xff08;RAG系统提示&#xff09;## 角色定义 您是"智能问答助手"&#xff0c;专门基于提供的上下文信息回答用户问题。## 核心规则 1. **严格基于上下文**&#xff1a;仅使用用户提供的<context>中的信息&…
阅读更多...
YOLOv8 在 Intel Mac 上的 Anaconda 一键安装教程

YOLOv8 在 Intel Mac 上的 Anaconda 一键安装教程

YOLOv8 在 Intel Mac 上的 Anaconda 一键安装教程 本文适用于 Intel 芯片 Mac&#xff0c;通过 Anaconda 快速搭建 YOLOv8 环境&#xff0c;支持 CPU 推理与 Notebook 可视化。 全程一键安装&#xff0c;适合小白和入门用户。 &#x1f4d1; 目录 环境准备 一键安装脚本 运行…
阅读更多...
Spring 日志文件

Spring 日志文件

Spring 日志文件 文章目录Spring 日志文件日志有什么用&#xff1f;日志怎么用&#xff1f;自定义日志在程序中获取日志对象常用日志框架说明使用日志对象打印日志日志格式说明日志级别日志级别有啥用日志级别分类和使用日志持久化保存更简单的日志输出——lomboklombok更多注解…
阅读更多...
五、误差反向传播法（上）

五、误差反向传播法（上）

上一章中&#xff0c;我们介绍了神经网络的学习&#xff0c;并通过数值微分计算了神经网络的权重参数的梯度&#xff08;严格来说&#xff0c;是损失函数关于权重参数的梯度&#xff09;。数值微分虽然简单&#xff0c;也容易实现&#xff0c;但缺点是计算上比较费时间。本章我…
阅读更多...
Rust Axum 快速上手指南（静态网页和动态网页2024版）

Rust Axum 快速上手指南（静态网页和动态网页2024版）

本文基于 Axum 0.7.5&#xff08;当前稳定版&#xff09;、tower-http 0.5.2、MiniJinja 0.7.2 编写&#xff0c;涵盖生产环境核心场景&#xff1a;tower-http Layer 叠加与数据传递、静态网页服务、MiniJinja 动态模板渲染&#xff0c;并重点解析请求 / 应答在多 Layer 中的流…
阅读更多...
Golang语言设计理念

Golang语言设计理念

起源 Golang语言始于2007年&#xff0c;是一门编译型、静态类型、并发友好 的语言&#xff0c;由Robert Griesemer&#xff08; 罗伯特格里森、图灵奖获得者、C 语法联合发明人、Unix 之父&#xff09;、Rob Pike&#xff08; 罗布派克、Plan 9 操作系统领导者、UTF-8 编码的最…
阅读更多...
深入掌握 nsenter：Linux命名空间操作的利器

深入掌握 nsenter：Linux命名空间操作的利器

#作者&#xff1a;朱雷 文章目录1、简介2、功能与用途2.1. 核心功能2.1.1. 进入命名空间2.1.2. 支持多种命名空间2.1.3. 容器调试3、安装3.1. 依赖包3.2. 权限要求3.3. 命令用法与示例3.3.1. 基本语法3.3.2. 常用选项包括&#xff1a;3.3.3. 示例4、 应用场景与优势4.1. 容器调…
阅读更多...
Ubuntu Qt x64平台搭建 arm64 编译套件

Ubuntu Qt x64平台搭建 arm64 编译套件

环境&#xff1a; 主机平台&#xff1a;Ubuntu22.04.5 x86_64 目标平台&#xff1a;IMX8QM Ubuntu22.04.5 arm64 Qt版本&#xff1a;Qt6.5.3 LST GUI实现&#xff1a;QML 一、获取Ubuntu22.04.5 x86_64 系统镜像文件 1、镜像下载与安装 使用国内镜像下载对应版本的Ubuntu镜像…
阅读更多...
mysql第五天学习 Mysql全局优化总结

mysql第五天学习 Mysql全局优化总结

Mysql全局优化总结 从上图可以看出SQL及索引的优化效果是最好的&#xff0c;而且成本最低&#xff0c;所以工作中我们要在这块花更多时间。 补充一点配置文件my.ini或my.cnf的全局参数&#xff1a; 假设服务器配置为&#xff1a; CPU&#xff1a;32核内存&#xff1a;64GDISK…
阅读更多...
leetcode hot100 二叉搜索树

leetcode hot100 二叉搜索树

二叉搜索树的第k小的数class Solution:def kthSmallest(self, root: Optional[TreeNode], k: int) -> int:# 二叉搜索树的中序遍历是 升序排列的&#xff0c; 求第k小的&#xff0c;即第k个数self.res []def fun(root):if not root:returnfun(root.left)if root:self.res.a…
阅读更多...
从Sonnet到Opus：一次解决RAG知识库流式输出难题的探索

从Sonnet到Opus：一次解决RAG知识库流式输出难题的探索

又到周末&#xff0c;还得消耗消耗 ➡️ anyrouter 上的Claude资源&#xff0c;万一哪天都不能用了&#xff0c;也是浪费。 2025/9/5&#xff0c;Claude AI 的母公司 Anthropic 发布了一项新政策&#xff1a;即日起&#xff0c;Anthropic将不再对中国控股公司及其海外子公司开放…
阅读更多...
「数据获取」中国科技统计年鉴（1991-2024）Excel

「数据获取」中国科技统计年鉴（1991-2024）Excel

02、数据详情数据名称&#xff1a;《中国科技统计年鉴》&#xff08;1991-2024年&#xff09;数据年份&#xff1a;1991-202403、数据截图 04、获取方式&#xff08;获取方式看绑定的资源&#xff09;
阅读更多...
SimLingo：纯视觉框架下的自动驾驶视觉 - 语言 - 动作融合模型

SimLingo：纯视觉框架下的自动驾驶视觉 - 语言 - 动作融合模型

摘要 本文深入探讨了 SimLingo&#xff0c;一个在自动驾驶领域具有开创性意义的视觉-语言-动作一体化模型。SimLingo 创新性地将自动驾驶、语言理解和指令感知控制整合到一个统一的纯摄像头框架中&#xff0c;显著提升了自动驾驶系统在复杂环境中的感知、决策与执行能力。该模…
阅读更多...
第五十四天(SQL注入数据类型参数格式JSONXML编码加密符号闭合复盘报告)

第五十四天(SQL注入数据类型参数格式JSONXML编码加密符号闭合复盘报告)

#SQL注入产生原理&#xff1a; 代码中执行的SQL语句存在可控变量导致 #常见SQL注入的利用过程&#xff1a; 1、判断数据库类型 2、判断参数类型及格式 3、判断数据格式及提交 4、判断数据回显及防护 5、获取数据库名&#xff0c;表名&#xff0c;列名 5、获取对应数据及…
阅读更多...
VMWare上搭建Hive集群

VMWare上搭建Hive集群

文章目录1. MySQL安装2. 安装Hive集群3. 使用Hive客户端4. 实战总结本实战在VMware上搭建Hive集群&#xff0c;集成MySQL作为元数据存储&#xff0c;完成Hive环境配置、元数据初始化及HDFS仓库目录创建&#xff0c;实现Hive on Hadoop的SQL查询能力&#xff0c;为大数据分析提供…
阅读更多...
Android网络之WIFI技术网络模型概述

Android网络之WIFI技术网络模型概述

文章目录术语1、WLAN与WIFI2、802.11 WIFI无线网络标准演进3、WIFI5、WIFI6和WIFI7的最高速率对比4、WIFI网络中的各个角色&#xff08;元件&#xff09;1&#xff09;网络拓扑架构图5、802.11权威指南1&#xff09;OSI与TCP/IP2&#xff09;IEEE 802.11协议簇介绍3&#xff09…
阅读更多...
最新文章

Copyright @ 2022~2023