学习日记-JS+DOM-day56-9.16
1. js数组定义的4种方式
知识点 | 核心内容 | 易混淆点 |
数组定义方式一 | 使用中括号直接定义数组元素 let cars1 = ["奥迪", "宝马", "沃尔沃"] | JavaScript数组元素类型可以不同（弱数据类型） |
数组访问方式 | 通过索引访问元素（从0开始）cars1[1]返回"宝马" | 访问不存在的索引返回undefined（非报错） |
数组定义方式二 | 先声明空数组再动态添加元素 let cars2 = []; cars2[0]="奥迪" | 与Java固定长度数组的差异 |
数组定义方式三 | 使用Array构造函数 let cars3 = new Array("奥迪", "宝马") | 构造参数为单个数字时表示数组长度 |
数组定义方式四 | 空构造函数动态赋值 let cars4 = new Array(); cars4[0]="法拉利" | 跳过下标赋值会产生undefined元素 |
数组扩容特性 | 可任意扩展长度 cars4[8]="红旗" | 中间未赋值的元素自动填充为undefined |
数组覆盖特性 | 重复定义相同索引会覆盖原值 cars4[0]="ZZ" | 不同于Java的数组越界异常 |
类型检测 | typeof array返回object | 数组是特殊对象类型 |
2.js数组遍历
知识点 | 核心内容 | 重点 |
数组定义方式 | 直接赋值法（混合类型：整数、小数、布尔值、字符串） | JavaScript数组元素类型不强制统一 |
数组遍历方法 | for循环 + length属性获取数组长度 | console.log自动换行特性 |
console输出方法 | log/info/warn/error不同日志级别及可视化差异 | 占位符等高级用法 |
编码规范 | 禁止中文命名文件 | 实际开发与教学的差异 |
数组长度获取 | array.length属性返回元素数量 | 混合类型不影响长度计算 |
3.js函数快速入门
知识点 | 核心内容 | 重点 |
JavaScript函数定义 | function关键字声明函数，示例：function hi() { alert("hi"); } | 函数需主动调用或事件触发才会执行 |
函数调用方式 | 1. 主动调用（如hi()）; 2. 事件驱动（如onclick="hi()"） | 事件绑定需注意函数名匹配，未定义会报错 |
事件机制 | 常见事件：onclick（单击）、onchange（值变更）、onload（加载完成） | 事件与DOM操作强关联，需区分基础事件与高级DOM事件 |
函数作用 | 封装可重复执行的代码块，支持参数传递（文中未演示） | 对比JAVA：语法差异大（如无返回值类型声明） |
调试与报错 | 未定义函数时报错：Uncaught ReferenceError: hiX is not defined | 需掌握浏览器开发者工具查看错误信息 |
4.js函数定义方式1-function关键字
知识点 | 核心内容 | 重点 |
JavaScript函数定义方式 | 使用function关键字定义函数，支持无参、带参、带返回值三种形式 | 形参无需指定类型，由实参动态决定（类似泛型） |
无返回值函数 | function f1() { alert("f1被调用"); } | 直接调用f1()即可执行 |
带形参函数 | function f2(name) { alert("hi " + name); } | 形参无类型声明，可接受任意数据类型（如f2(800)输出hi 800） |
带返回值函数 | function f3(n1, n2) { return n1 + n2; } | 返回值类型由数据决定（数值相加或字符串拼接） |
动态类型特性 | 函数内操作（如+）根据实参类型解释执行（数值相加/字符串拼接） | 与Java强类型对比（需重点区分） |
5.js函数定义方式2-将函数赋给变量
知识点 | 核心内容 | 重点 |
JS函数定义的第二种方式（函数表达式） | 将函数赋给变量，通过变量调用函数（如var f1 = function() {...}） | 函数声明 vs 函数表达式（前者提升，后者需先定义后调用） |
函数作为数据类型 | JavaScript中函数属于function类型，可被变量引用或传递 | 通过typeof f1验证类型输出"function" |
函数调用与传参 | 通过变量名调用函数（如f2("小米")），形参与实参传递逻辑与传统函数一致 | 无名称的函数表达式（匿名函数）需通过变量调用 |
函数引用与灵活性 | 变量可重新赋值指向其他函数（如f3 = f1），实现多变量共享同一函数逻辑 | 变量指向同一函数体时，调用效果相同（如f3()与f1()） |
带返回值的函数表达式 | 通过return返回值（如f4 = function(n1, n2) { return n1+n2 }） | 调用时需接收返回值（如res = f4(10, 50)） |
6.js函数注意事项和细节
知识点 | 核心内容 | 易混淆点 |
函数重载 | JavaScript不支持传统重载，同名函数会覆盖前一个定义 | 与Java不同，不会报错但会直接覆盖前一个函数定义 |
函数调用机制 | 调用时匹配最新定义的函数版本，即使参数不匹配 | 无参调用有形参函数时，参数值为undefined |
arguments对象 | 函数内置的隐式参数数组，自动接收所有传入的实参 | 不需要声明即可使用，类似Java可变参数但更灵活 |
参数匹配规则 | 实参按顺序匹配形参，多余的实参不会被丢弃 | 形参多于实参时，多余形参值为undefined |
console.log输出技巧 | 使用逗号可输出对象详细信息，加号仅输出类型 | console.log(obj)与console.log(""+obj)效果不同 |
参数传递特性 | 即使形参不匹配，所有实参仍会存入arguments对象 | 形参和arguments是独立但关联的存储机制 |
类型宽容性 | 函数可接收任意数量、任意类型的参数 | 与Java严格参数检查形成鲜明对比 |
7.js函数练习
编写一个函数计算所有参数相加的和并返回，如果实参不是number类型就过滤掉
知识点 | 核心内容 | 重点 |
函数参数处理 | 使用arguments对象动态获取传入参数，通过for循环遍历 | arguments非标准数组，需注意遍历方式 |
类型过滤机制 | 通过typeof判断参数是否为number类型，过滤非数值数据 | typeof返回值为字符串（如"number"），需直接与字符串比较 |
函数返回值 | 必须显式return结果，否则返回undefined | 易遗漏return导致逻辑正确但输出异常 |
变量初始化 | for循环中索引变量必须初始化（如i=0） | 未初始化可能导致意外行为 |
代码格式化 | 使用快捷键（如Ctrl+Shift+L）快速格式化代码 | 不同编辑器快捷键可能差异 |
8.使用Object定义对象
知识点 | 核心内容 | 重点 |
JavaScript自定义对象 | 两种定义方式： 1. new Object()创建空对象后动态添加属性和方法; 2. 对象字面量（大括号）语法 | 动态属性添加与传统面向对象语言的区别; 变量提升现象（未定义属性返回undefined） |
方式一：Object构造函数 | 1. var obj = new Object(); 2. 通过obj.属性名=值添加属性; 3. 通过obj.方法名=function(){}添加方法 | this关键字指向当前对象实例; 方法调用必须带括号obj.method() |
对象属性访问 | 1. 点运算符访问：obj.property; 2. 未定义属性返回undefined | 属性访问不会报错（与Java严格语法对比）; 方法未定义会报is not function错误 |
动态特性案例 | javascript; var person = new Object(); person.name = "xx"; person.show = function(){; console.log(this.name); }; | 运行时类型可通过typeof验证; 方法内this绑定机制 |
易错点警示 | 1. 直接调用未定义方法会报错; 2. 访问未定义属性返回undefined; 3. 方法必须通过函数表达式赋值 | 变量提升现象的特殊表现; 与类式语言（Java）的本质区别 |
9.使用{}定义对象
知识点 | 核心内容 | 易混淆点 |
JS对象字面量创建方式 | 使用大括号直接定义对象，包含属性和方法，属性间用逗号分隔 | 冒号用于属性名和值间隔（非等号），逗号用于分隔属性（非分号） |
对象属性访问 | 通过对象名.属性访问，方法调用需加括号（无参也需空括号） | 外部访问不要用this（与内部方法中的this指向不同） |
方法定义 | 属性值为function类型，支持参数传递（规则与普通函数一致） | 方法间仍需用逗号分隔，最后一个属性/方法后不加符号 |
this关键字 | 在对象方法内通过this.属性访问当前对象成员 | 外部访问直接使用对象名，this在内外环境具有不同指向 |
JSON风格对象 | 类似Java类定义但更简洁，支持多属性和多方法 | 与Java类语法表面相似但本质不同（JS基于原型） |
10.事件介绍
知识点 | 核心内容 | 重点 |
JavaScript事件概念 | 事件（Event）是用户或浏览器触发的行为（如点击、按键、加载等），本质是对象，与JAVA等语言的事件机制类似 | 事件与浏览器关联性（如onload仅适用于浏览器环境） |
事件类型示例 | onclick（点击）、onkeydown（按键按下）、onmouseover（鼠标悬停）、onload（页面加载完成） | 动态注册与静态注册区别（代码绑定 vs HTML属性绑定） |
编程语言共性 | 事件机制跨语言通用（如JAVA坦克大战的按键事件），差异主要在语法和实现细节（如JS弱类型 vs JAVA强类型） | 脚本语言宽松性（JS无需严格类型声明） |
实战案例关联 | JS版/HTML5版坦克大战（通过onkeydown实现按键控制） | 事件驱动开发模式（用户行为触发程序响应） |
学习方法 | 掌握核心概念后，其他语言主要学习语法差异（如面向对象中JS无严格访问控制修饰符） | 前端事件与后端事件应用场景对比 |
11.动态注册和静态注册
知识点 | 核心内容 | 重点 |
事件注册概念 | 通过绑定（关联）使HTML元素与函数建立触发关系，分为静态注册和动态注册 | 绑定 vs 注册（术语等价性） |
静态注册 | 通过HTML标签的事件属性（如onclick）直接关联代码/函数 | 事件属性名称（如onclick需完整拼写） |
动态注册 | 1. 通过DOM编程获取标签对象; 2. 操作DOM对象绑定事件 | DOM对象与标签的区别（映射关系易混淆） |
DOM对象本质 | 浏览器将标签解析为可编程对象，通过属性和方法控制元素行为 | 标签（视觉） vs DOM（编程接口） |
动态注册优势 | 支持运行时绑定/解绑，灵活性高（如点击后触发绑定逻辑） | 解绑操作的代码实现 |
常见事件类型 | onclick、onblur、onchange、onsubmit等 | 事件命名规范（全小写+前缀on） |
12.页面加载完毕事件
知识点 | 核心内容 | 重点 |
unload事件 | 页面或图像加载完成时触发的事件 | 静态注册与动态注册的区别 |
静态注册 | 通过HTML元素的onload属性直接绑定事件处理函数 | 需明确绑定到具体DOM元素（如body） |
动态注册 | 通过window.onload绑定事件处理函数 | window对象代表整个页面窗口的DOM映射 |
加载完毕概念 | 所有DOM组件已创建完成的状态 | 执行时机：弹窗时页面元素必须已渲染完成 |
事件绑定原理 | 函数需主动绑定才会执行 | 未绑定事件时函数定义不会自动调用 |
DOM对象特性 | 浏览器将页面组件映射为可编程对象 | window对象包含控制窗口行为的方法属性 |
代码执行顺序 | 同步代码立即执行 vs 事件回调异步执行 | 典型错误：在元素未加载时操作DOM |
13.点击事件
知识点 | 核心内容 | 重点 |
on click事件注册 | 静态注册（通过HTML事件属性绑定）与动态注册（通过DOM对象绑定）的两种实现方式 | 动态注册需确保DOM加载完成（需使用window.onload或脚本位置控制） |
DOM对象获取 | 使用document.getElementById()方法获取指定ID的DOM元素 | 执行时机问题（未加载完成时获取结果为null） |
事件绑定原理 | 静态注册直接关联函数名；动态注册通过DOM对象的onclick属性赋值函数 | 动态注册的代码位置依赖（需在DOM加载后执行） |
页面加载机制 | window.onload确保脚本在页面完全加载后执行 | 与直接脚本执行的差异（后者可能因DOM未就绪失败） |
代码演示案例 | 静态注册：<button onclick="sayOK()">； 动态注册：btn.onclick = function(){...} | 动态注册的典型错误场景（未处理加载顺序） |