第一周js学习

JavaScript 学习总结（第一周）

一、 JavaScript 基础（Day 1 - Day 2）

1. 语言概述
   • JavaScript 是轻量级、动态类型、单线程的脚本语言，主要运行于浏览器和 Node.js 环境。
   • 组成部分：ECMAScript（核心语法）、DOM（文档对象模型）、BOM（浏览器对象模型）。
2. 变量与数据类型
   • 声明关键字：
     • var：ES3，存在变量提升，伪全局作用域。
     • let / const：ES6，块级作用域，存在暂时性死区。const 用于声明常量（地址不可变）。
   • 数据类型：
     • 值类型：string、number、boolean、undefined、null、bigint、symbol。
     • 引用类型：object、array、function 等。
   • 类型转换：
     • 显式：String()、Number()、Boolean()、toString()、parseInt()、parseFloat()。
     • 隐式：+ 转字符串、- 转数字、! 转布尔。
     • 进制转换：parseInt(str, radix)、number.toString(radix)。
3. 运算符与控制语句
   • 算术运算符、赋值运算符、比较运算符（==、===）、逻辑运算符（&&、||、!）。
   • 条件语句：if...else（区间判断）、switch...case（值判断）。
   • 循环语句：for、while、do...while、for...in（遍历对象属性）、for...of（遍历可迭代对象）。
   • 特殊值处理：Number.EPSILON 解决精度问题、Infinity、NaN。
4. 数组与字符串
   • 数组方法：
     • 修改原数组：push、pop、shift、unshift、splice、reverse、sort、fill。
     • 不修改原数组：concat、join、slice、includes、indexOf、flat。
     • 高阶函数（ES5+）：map、filter、reduce、some、every、forEach（ES6 新增 find、findIndex）。
   • 字符串方法：
     • 查找：indexOf、lastIndexOf、includes、search、match。
     • 变换：replace、split、trim、toUpperCase、toLowerCase、padStart、padEnd。
     • 截取：slice、substring、substr。

---

二、 函数与面向对象（Day 2 - Day 3）

1. 函数
   • 声明方式：function 关键字（匿名/具名）、箭头函数（ES6）、new Function()。
   • 参数：形参与实参、默认参数值（a=1）、不定参数（...args）。
   • 作用域：全局作用域、函数作用域、作用域链（向上查找）。
   • this 指向：
     • 普通函数：指向调用者。
     • 箭头函数：无自身 this，继承外层作用域。
   • 改变 this 指向：bind（返回新函数）、call/apply（立即执行）。
   • 递归：三要素（出口、规律、自调用），适用于未知层级的遍历。
2. 对象
   • 实例化：字面量、new Object()。
   • 属性操作：.、[] 访问；delete 删除；in 检查存在性。
   • 属性描述符：Object.defineProperty、Object.defineProperties。
   • 对象简写（ES6）：属性简写、方法简写（省略 function）。
   • 强制转换顺序：Symbol.toPrimitive → toString → valueOf。
3. 内置对象
   • Date：时间操作、获取/设置方法、字符串转换、moment.js 库简化操作。
   • Math：数学计算方法（Math.random、Math.floor、Math.ceil、Math.round 等）、随机生成颜色与字符串。
   • 数据结构与算法：
     • 排序算法：冒泡排序（O(n²)）、选择排序（O(n²)）、快速排序（O(n log n)）。
     • 时间复杂度：O(1)、O(log n)、O(n)、O(n log n)、O(n²) 等。

---

三、 浏览器对象模型 BOM（Day 4）

1. window 对象
   • 作为全局对象，包含所有全局变量、函数及内置对象。
   • 常用方法：
     • 弹窗：alert、confirm、prompt。
     • 定时器：setTimeout、setInterval（异步执行，需清除避免内存泄漏）。
     • 窗口操作：open、close、resizeTo、moveTo、scrollTo。
   • 存储：
     • localStorage：永久存储。
     • sessionStorage：会话级存储。
     • IndexedDB：浏览器数据库。
   • 内置类：Blob、ArrayBuffer、FileReader 等。
2. location 对象
   • URL 操作：href（完整地址）、protocol、host、pathname、search（GET 参数）、hash（锚点）。
   • 方法：reload()、assign()（新增历史记录）、replace()（不新增历史记录）。
3. history 对象
   • 历史记录管理：back()、forward()、go()。
   • 前端路由：
     • Hash 路由：监听 hashchange 事件，不刷新页面。
     • History 路由：使用 pushState/replaceState，监听 popstate 事件。
4. 其他 BOM 对象
   • navigator：浏览器信息、语言、CPU 核数、媒体设备（mediaDevices.getUserMedia）、地理位置（geolocation）、剪切板（clipboard）。
   • screen：屏幕尺寸、分辨率、可用区域。
   • document：DOM 操作的入口，提供元素获取方法。

---

四、 文档对象模型 DOM（Day 5）

1. DOM 树与渲染机制
   • 浏染管线：解析 HTML → 生成 DOM 树 → 解析 CSS → 生成 CSSOM → 合成渲染树 → 布局 → 绘制 → 合成。
   • 重绘与回流：
     • 重绘：样式变更不影响位置（如颜色）。
     • 回流：尺寸或位置变更（CPU 密集型）。
     • 优化：减少 DOM 操作、使用虚拟 DOM、使用 CSS 动画、避免 table 布局。
2. 元素操作
   • 获取元素：getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll。
   • 属性操作：
     • 内置属性：id、className、innerHTML、innerText、dataset、classList。
     • 自定义属性：setAttribute、getAttribute、removeAttribute、hasAttribute。
   • 样式操作：
     • 内联样式：element.style。
     • 计算样式：getComputedStyle(element)（IE 兼容用 currentStyle）。
     • 设置样式：推荐通过 classList 添加类名，减少回流。
3. 节点操作
   • 节点类型：Element（1）、Attribute（2）、TextNode（3）。
   • 关系属性：parentNode、childNodes、children、firstChild、lastChild、previousSibling、nextSibling。
   • 节点方法：
     • 创建：createElement、createTextNode、createAttribute。
     • 添加：appendChild、insertBefore、insertAdjacentElement。
     • 修改：replaceChild、replaceWith。
     • 删除：removeChild、remove。
     • 克隆：cloneNode(deep)。
4. 事件
   • 事件基于发布-订阅模式，是异步操作。
   • 绑定方式：
     • 内嵌：<button onclick="handler()">。
     • 脚本：element.onclick = function() {}。
   • 事件分类：
     • 鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseenter、mouseleave、mouseover、mouseout、wheel。
     • 键盘事件：keydown、keyup、keypress。
     • 触摸事件：touchstart、touchmove、touchend、touchcancel。
     • HTML 事件：load、submit、input、change、focus、blur、copy、paste。
   • 拖拽 API：draggable="true"，事件包括 dragstart、drag、dragend、dragenter、dragover、drop。