js查缺补漏 - 技术栈

JavaScript 引入到文件

在 HTML 中使用 JavaScript

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <!-- 内联脚本 -->
    <script>
        console.log("Hello, World!");
    </script>
    
    <!-- 外部脚本 -->
    <script src="script.js"></script>
    
    <!-- 脚本放置位置 -->
    <!-- 1. 放在 head 中 -->
    <script src="head-script.js"></script>
    
    <!-- 2. 放在 body 底部（推荐） -->
    <script src="body-script.js"></script>
</body>
</html>

defer 和 async 属性

html 复制代码

<!-- defer: 延迟执行，HTML 解析完成后执行 -->
<script src="defer-script.js" defer></script>

<!-- async: 异步加载，加载完成后立即执行 -->
<script src="async-script.js" async></script>

常见输出方式

javascript 复制代码

// 1. 控制台输出
console.log("普通信息");
console.error("错误信息");
console.warn("警告信息");
console.info("提示信息");

// 2. 弹出对话框
alert("这是一个警告框");
let userName = prompt("请输入您的姓名:");
let isConfirmed = confirm("您确定要继续吗?");

// 3. 写入文档
document.write("直接写入 HTML 文档");

// 4. 修改元素内容
document.getElementById("demo").innerHTML = "修改元素内容";

常见输出方式

javascript 复制代码

// 1. 控制台输出
console.log("普通信息");
console.error("错误信息");
console.warn("警告信息");
console.info("提示信息");

// 2. 弹出对话框
alert("这是一个警告框");
let userName = prompt("请输入您的姓名:");
let isConfirmed = confirm("您确定要继续吗?");

// 3. 写入文档
document.write("直接写入 HTML 文档");

// 4. 修改元素内容
document.getElementById("demo").innerHTML = "修改元素内容";

两种方法的区别

document.write() 和 element.innerHTML 是两种不同的操作 DOM 的方法，它们有以下主要区别：

1. 作用范围不同

document.write() 是直接向整个 HTML 文档写入内容
element.innerHTML 是修改特定元素的内容

2. 执行时机影响

document.write() 如果在页面加载完成后调用，会覆盖整个页面内容
element.innerHTML 只会修改指定元素的内容，不影响页面其他部分

3. 使用场景

document.write() 主要用于在页面加载过程中动态添加内容（现在很少使用）
element.innerHTML 是现代 Web 开发中常用的 DOM 操作方法

4. 安全性

document.write() 存在安全风险，容易导致 XSS 攻击
element.innerHTML 相对更安全，但使用时仍需注意内容过滤

5. 性能影响

document.write() 会重新解析整个文档
element.innerHTML 只更新特定元素，性能更好

现代 Web 开发中，推荐使用 element.innerHTML 或更安全的 element.textContent 方法来操作 DOM 元素的内容。

undefined 和 null 的区别

1. 定义和含义

undefined 表示变量已声明但未赋值，或者不存在的属性
null 表示一个空值，是开发者主动设置的，表示"无"或"空"

2. 类型差异

typeof undefined 返回 "undefined"
typeof null 返回 "object"（这是 JavaScript 的历史遗留 bug）

3. 使用场景

undefined 通常由 JavaScript 引擎自动分配
null 通常由开发者主动设置，表示有意的空值

4. 比较操作

javascript 复制代码

console.log(undefined == null);  // true (类型转换后相等)
console.log(undefined === null); // false (类型不同)

5. 实际应用示例

javascript 复制代码

// undefined 的情况
let a;
console.log(a); // undefined

function test() {
    // 没有 return 语句
}
console.log(test()); // undefined

// null 的情况
let user = null; // 明确表示没有用户
let element = document.getElementById("nonexistent"); // 找不到元素时返回 null

// 检查值是 undefined 还是 null
function isNullOrUndefined(value) {
    return value === null || value === undefined;
    // 或者使用宽松比较: return value == null;
}

总的来说，undefined 通常是系统自动分配的，而 null 是开发者主动设置的空值。在实际开发中，建议使用 null 来表示有意的空值。

typeof 运算符

typeof 操作符用于检测变量的数据类型：

javascript 复制代码

console.log(typeof 42);          // "number"
console.log(typeof 'hello');     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (这是一个历史遗留bug)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());    // "symbol"
console.log(typeof 123456789012345678901234567890n); // "bigint"

// 实际应用示例
function checkType(value) {
    if (typeof value === 'string') {
        return '这是一个字符串';
    } else if (typeof value === 'number') {
        return '这是一个数字';
    } else if (typeof value === 'boolean') {
        return '这是一个布尔值';
    } else {
        return '其他类型';
    }
}

console.log(checkType("Hello")); // 这是一个字符串
console.log(checkType(42));      // 这是一个数字

------------------未完成