JavaScript 笔记（正在施工中）

目录

巡查施工状况
一、JavaScript 引入方式
二、JavaScript 输出
三、数据类型
四、typeof 运算符
五、补充说明
六、字符串
七、数组
八、对象与内置对象
九、DOM 操作

一、JavaScript 引入方式

推荐在 <body> </body> 标签内引入

  1. 嵌入到 HTML

    1
    2
    3
    4
    <script>
        // JavaScript 代码
        console.log("Hello, World!");
    </script>

  2. 引入本地 JavaScript 文件

    1
    <script src="script.js"></script>

  3. 引入网络 JavaScript 文件

    1
    <script src="https://example.com/script.js"></script>

二、JavaScript 输出

  1. alert()

    1
    alert("Hello, World!");

    弹出警告框

  2. console.log()

    1
    console.log("Hello, World!");

    控制台输出

  3. document.write()

    1
    document.write("Hello, World!");

    页面输出（不推荐页面加载后使用）

三、数据类型

  1. 基本数据类型

    • Number：数字
    • String：字符串
    • Boolean：布尔
    • Undefined：未定义
    • Null：空
    • Symbol：唯一值

  2. 引用数据类型

    • Object：对象
    • Array：数组
    • Function：函数

四、typeof 运算符

判断数据类型

1
2
3
4
5
6
7
typeof 123; // "number"
typeof "abc"; // "string"
typeof true; // "boolean"
typeof {a:1}; // "object"
typeof [1,2,3]; // "object"
typeof null; // "object"
typeof undefined; // "undefined"

null 一般代表对象不存在，undefined 代表变量未定义

五、补充说明

  1. 比较运算符

    • === 和 !==：严格相等/不等（不做类型转换）
    • == 和 !=：宽松相等/不等（会做类型转换）

  2. for in 遍历对象

    1
    2
    3
    4
    const obj = {name: "Alice", age: 30};
    for (const key in obj) {
        console.log(key, obj[key]);
    }

六、字符串

  1. 引号嵌套与转义

    • 单引号/双引号等价，可互相嵌套
    • 内部引号需转义 \
    • 多行字符串可用 \ 续行

  2. 常用属性与方法

    • length：字符串长度
    • charAt(n)：返回指定位置字符
    • concat()：拼接字符串
    • substring(start, end)：截取子串
    • substr(start, length)：截取指定长度子串
    • indexOf(str, fromIndex)：查找子串位置
    • trim() / trimStart() / trimEnd()：去除空白
    • split(separator, limit)：分割为数组

七、数组

  1. 定义

    1
    2
    3
    let arr = [1, 2, 3];
    let arr2 = [];
    arr2[0] = "a";

  2. 属性

    • length：数组长度

  3. 常用方法

    • Array.isArray(arr)：判断是否为数组
    • push() / pop()：末尾添加/删除
    • shift() / unshift()：头部添加/删除
    • join(separator)：数组转字符串
    • concat()：合并数组
    • reverse()：反转数组
    • indexOf(item, fromIndex)：查找元素索引

八、对象与内置对象

  1. 对象定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let user = {
        name: "mingming",
        age: 19,
        getName: function() {
            console.log(this.name);
        },
        container: {
            width: 100,
            height: 200,
            getWidth: function() { return this.width; },
            getHeight: function() { return this.height; }
        }
    };

  2. Math 对象

    • Math.abs(x)：绝对值
    • Math.max(a, b, ...) / Math.min(a, b, ...)：最大/最小值
    • Math.ceil(x) / Math.floor(x) / Math.round(x)：向上/下/四舍五入
    • Math.random()：0~1 随机数

  3. Date 对象

    • Date.now()：当前时间戳（毫秒）
    • new Date()：当前时间对象
    • 常用方法：getTime(), getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds(), getDay()

九、DOM 操作

  1. 节点类型

    节点类型 nodeType 描述 示例
    元素节点 1 HTML 元素 <div>
    文本节点 3 文本内容 “Hello”
    注释节点 8 注释 <!-- comment -->
    文档节点 9 整个文档入口 document
    文档类型节点 10 DOCTYPE 声明 <!DOCTYPE html>

  2. 查询节点

    • getElementById(id)
    • getElementsByTagName(tag)
    • getElementsByClassName(class)
    • querySelector(selector)
    • querySelectorAll(selector)

  3. 节点关系

    • parentNode：父节点
    • children：子元素节点集合
    • firstElementChild / lastElementChild
    • previousElementSibling / nextElementSibling

  4. 节点操作

    • 创建：createElement, createTextNode, createDocumentFragment
    • 插入：appendChild, insertBefore, prepend
    • 修改内容：textContent, innerHTML
    • 属性操作：setAttribute, getAttribute, removeAttribute
    • 样式操作：style, classList
    • 删除：remove(), removeChild()

由于已学习其他静态语言，基础内容略，重点记录 JavaScript 特有语法和动态特性。

🚧 JavaScript施工前线报告

核心战区

  • undefined与null的终极对决仍在胶着中，预计胜负揭晓时间：当我能分清==和===的区别时4
  • typeof null返回”object”的宇宙级谜题：官方认证彩蛋，设计师下班前5分钟的”杰作”4

高危区域

  • 异步回调地狱：Promise救援队已空降，async/await直升机正在架设安全网8
  • this指向迷宫：箭头函数特工队已潜入，.bind()特种部队随时待命9

工程事故

  • 闭包施工现场惊现时空裂缝！函数正在偷渡外部变量，安保级别升至红色警戒10
  • ==类型转换魔术表演区紧急关闭：演员[] == ![]后台斗殴（结果竟是true！）4

安全提示
遇到undefined is not a function请勿惊慌，这只是JS在玩捉迷藏👻
施工队长留言：乐高积木（数据类型）已备齐，说明书（DOM操作）被猫抓花了🐾