第六周学习笔记(js的核心用法)

JavaScript 是一种高级、解释型、动态类型的编程语言,主要用于为网页添加交互行为。随着 Node.js 等技术的发展,它已成为一门全栈开发语言。

一、核心语法与概念

  1. 变量声明

    • var:传统声明方式,存在函数作用域和变量提升问题,现代开发中较少使用。

    • let:块级作用域变量,允许重新赋值。

    • const:块级作用域常量,声明后不可重新赋值(但其指向的复合类型内部属性可能可变)。

  2. 数据类型

    • 原始类型Number, String, Boolean, Undefined, Null, Symbol, BigInt。它们是不可变的。

    • 引用类型Object(包括 Array, Function, Date, RegExp 等)。它们是通过引用访问的。

  3. 运算符:包含算术、赋值、比较、逻辑、三元条件、类型检查(typeof, instanceof)等运算符。

  4. 流程控制if...else, switch, for, while, do...while 等,与其他类C语言类似。

  5. 函数

    • 是一等公民,可以作为参数传递、作为返回值,也可以被赋值给变量。

    • 定义方式有:函数声明、函数表达式、箭头函数。

    • 箭头函数没有自己的 thisarguments,语法更简洁。

  6. 对象

    • 是键值对的集合。属性值可以是任何数据类型。

    • 可以通过字面量 {}new Object() 或构造函数创建。

    • 支持动态添加和删除属性。

  7. 数组

    • 用于存储有序的数据集合。

    • 提供大量内置方法,如 map, filter, reduce, forEach, push, pop, splice 等,用于遍历和操作数据。

  8. 原型与继承

    • JavaScript 使用原型继承而非经典的类继承。

    • 每个对象都有一个指向其原型的内部链接(__proto__),用于继承属性和方法。

    • ES6 引入了 class 语法,但其本质仍是基于原型的语法糖。

二、核心特性与机制

  1. 作用域

    • 定义了变量的可访问范围。

    • 主要有全局作用域、函数作用域和 let/const 带来的块级作用域。

  2. 闭包

    • 一个函数能够记住并访问其词法作用域,即使该函数在其作用域之外执行。

    • 是实现数据私有化、创建工厂函数和高阶函数的关键。

  3. this 关键字:

    • 指向调用该函数的上下文对象。

    • 其值在函数被调用时动态绑定,取决于调用方式(全局、方法、构造函数、call/apply/bind、箭头函数等)。

  4. 异步编程

    • 事件循环:JavaScript 处理异步操作的核心机制,确保非阻塞执行。

    • 回调函数:最初的异步处理方式,容易导致“回调地狱”。

    • Promise:ES6 引入,提供了更优雅的链式调用(.then, .catch)来处理异步成功或失败。

    • async/await:ES8 引入,基于 Promise 的语法糖,让异步代码看起来像同步代码,极大地提高了可读性和可维护性。

  5. 事件处理

    • 通过 addEventListener 等方法监听用户操作(点击、输入、滚动等)或浏览器事件(加载、卸载等)。

    • 事件流包括捕获阶段、目标阶段和冒泡阶段。

三、操作浏览器与文档(Web APIs)

  1. DOM 操作

    • 通过 JavaScript 访问、修改、添加或删除 HTML 元素和属性。

    • 核心对象是 document,提供如 getElementById, querySelector, createElement 等方法。

  2. BOM

    • 操作浏览器窗口本身,如 window 对象。

    • 包含 location(URL信息)、navigator(浏览器信息)、history(会话历史)、screen(屏幕信息)等子对象。

  3. 数据存储

    • Web StoragelocalStorage(永久存储)和 sessionStorage(会话期存储)。

    • IndexedDB:用于在客户端存储大量结构化数据。

    • Cookies:小型文本数据,通常用于会话管理和用户追踪。

  4. 网络请求

    • XMLHttpRequest:传统的 Ajax 请求对象。

    • Fetch API:现代、更强大的网络请求接口,基于 Promise。

四、现代 JavaScript (ES6+)

  1. 模块化:使用 importexport 语法来组织和复用代码,取代了过去的命名空间和脚本标签依赖。

  2. 解构赋值:从数组或对象中快速提取值到变量中。

  3. 模板字符串:使用反引号(`)包裹字符串,支持换行和变量嵌入(${variable})。

  4. 默认参数、剩余参数:为函数参数提供默认值,或将不定数量的参数表示为数组。

  5. 扩展运算符...,用于展开数组或对象。

五、应用场景

  1. 前端 Web 开发:与 HTML、CSS 配合,创建动态交互式用户界面。通常借助 React, Vue, Angular 等框架。

  2. 后端开发:通过 Node.js 运行 JavaScript,构建服务器、API 和工具。

  3. 移动应用开发:使用 React Native、Ionic 等框架开发跨平台移动应用。

  4. 桌面应用开发:使用 Electron 等框架开发跨平台桌面应用。

  5. 游戏开发:用于网页游戏或使用相关引擎进行更复杂的开发。

  6. 命令行工具:编写脚本和命令行工具,自动化任务。

六、工具与生态系统

  • 包管理器:npm 和 Yarn,用于管理项目依赖。

  • 构建工具:Webpack, Vite, Parcel,用于打包、转换和优化代码。

  • 编译器/转译器:Babel,将新版 JavaScript 代码转换为旧版浏览器兼容的代码。

  • 代码检查:ESLint,用于检查代码质量和风格一致性。

  • 格式化工具:Prettier,用于自动格式化代码。


第六周学习笔记(js的核心用法)
http://localhost:8090//archives/di-liu-zhou-xue-xi-bi-ji-jsde-he-xin-yong-fa
作者
李志扬
发布于
2025年11月01日
许可协议