JavaScript 核心语法与DOM操作 - 第八周学习内容

wenan__

393人浏览 · 2025-09-28 10:47:55

wenan__ · 2025-09-28 10:47:55 发布

JavaScript 核心语法与DOM操作 - 第八周学习内容

运算符优先级深度解析

完整的运算符优先级表

// 运算符优先级从高到低
let example = {
    // 1. 成员访问、计算成员访问、new（带参数列表）
    '最高优先级': [
        'obj.property',      // 成员访问
        'obj[expression]',   // 计算成员访问  
        'new Class()'        // new（带参数）
    ],
    
    // 2. 函数调用、new（无参数列表）
    '高优先级': [
        'func()',           // 函数调用
        'new Class'         // new（无参数）
    ],
    
    // 3. 后置递增递减
    '后置运算符': [
        'variable++',
        'variable--'
    ],
    
    // 4. 逻辑非、一元运算符
    '一元运算符': [
        '!expression',      // 逻辑非
        '~expression',      // 按位非
        '+expression',      // 一元加法
        '-expression',      // 一元减法
        '++variable',       // 前置递增
        '--variable',       // 前置递减
        'typeof expression'
    ],
    
    // 5. 乘性运算符
    '乘除运算符': [
        '*', '/', '%'
    ],
    
    // 6. 加性运算符  
    '加减运算符': [
        '+', '-'
    ],
    
    // 7. 关系运算符
    '关系运算符': [
        '<', '>', '<=', '>=', 'instanceof', 'in'
    ],
    
    // 8. 相等运算符
    '相等运算符': [
        '==', '!=', '===', '!=='
    ],
    
    // 9. 逻辑与
    '逻辑与': '&&',
    
    // 10. 逻辑或
    '逻辑或': '||',
    
    // 11. 三元运算符
    '条件运算符': '? :',
    
    // 12. 赋值运算符
    '赋值运算符': [
        '=', '+=', '-=', '*=', '/=', '%='
    ],
    
    // 13. 逗号运算符
    '最低优先级': ','
};

// 复杂表达式示例
let result = 10 + 5 * 2;           // 20，不是30
let logical = true || false && false; // true，&&优先于||
let ternary = a > b ? a + 1 : b - 1; // 三元运算符优先级较低

使用括号明确优先级

// 推荐：使用括号明确优先级
let clearResult = (10 + 5) * 2;    // 30，明确意图

// 复杂逻辑使用括号分组
if ((age >= 18 && hasLicense) || (withParent && age >= 16)) {
    console.log("可以驾驶");
}

// 数学表达式括号使用
let math = ((a + b) * c) / (d - e);

for循环全面掌握

基础for循环详解

// 标准for循环结构
for (let i = 0; i < 5; i++) {
    console.log(`当前循环次数: ${i + 1}`);
}

// 循环执行过程分析
// 1. 初始化: let i = 0 (执行一次)
// 2. 条件判断: i < 5
// 3. 循环体执行
// 4. 更新: i++
// 5. 重复2-4步直到条件为false

多种for循环变体

// 1. 递减循环
for (let i = 10; i > 0; i--) {
    console.log(`倒计时: ${i}`);
}

// 2. 步长不为1的循环
for (let i = 0; i <= 100; i += 10) {
    console.log(`当前值: ${i}`);
}

// 3. 多个变量循环
for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(`i=${i}, j=${j}`);
}

// 4. 无限循环（需要break退出）
for (let i = 0; ; i++) {
    if (i > 5) break;
    console.log(i);
}

// 5. 空循环体
let sum = 0;
for (let i = 1; i <= 100; sum += i, i++);
console.log(`1-100的和: ${sum}`);

for循环与数组遍历

const fruits = ['苹果', '香蕉', '橙子', '葡萄'];

// 1. 标准数组遍历
for (let i = 0; i < fruits.length; i++) {
    console.log(`索引 ${i}: ${fruits[i]}`);
}

// 2. 提前缓存数组长度（性能优化）
for (let i = 0, len = fruits.length; i < len; i++) {
    console.log(fruits[i]);
}

// 3. 倒序遍历数组
for (let i = fruits.length - 1; i >= 0; i--) {
    console.log(fruits[i]);
}

// 4. 跳过某些元素（continue使用）
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === '香蕉') continue; // 跳过香蕉
    console.log(fruits[i]);
}

对象字面量与操作

对象创建与属性访问

// 对象字面量创建
const person = {
    firstName: '张',
    lastName: '三',
    age: 25,
    isStudent: false,
    
    // 方法定义
    getFullName: function() {
        return this.firstName + this.lastName;
    },
    
    // ES6简写方法
    introduce() {
        return `我叫${this.getFullName()}，今年${this.age}岁`;
    }
};

// 属性访问
console.log(person.firstName);        // 点语法
console.log(person['lastName']);      // 括号语法

// 动态属性名
const propName = 'age';
console.log(person[propName]);        // 25

// 方法调用
console.log(person.getFullName());    // 张三
console.log(person.introduce());      // 我叫张三，今年25岁

对象操作高级技巧

// 对象合并
const defaults = { theme: 'light', language: 'zh-CN' };
const userSettings = { language: 'en-US', fontSize: 14 };
const finalSettings = { ...defaults, ...userSettings };

// 对象解构
const { firstName, age, isStudent } = person;
console.log(firstName, age); // 张 25

// 动态添加属性
person.email = 'zhangsan@example.com';
person['phoneNumber'] = '13800138000';

// 删除属性
delete person.isStudent;

// 检查属性存在
console.log('firstName' in person);           // true
console.log(person.hasOwnProperty('age'));    // true

// 获取所有属性名
const keys = Object.keys(person);
console.log(keys); // ['firstName', 'lastName', 'age', ...]

DOM增删改查全面掌握

节点创建与添加

// 创建新元素
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.innerHTML = '<h1>新创建的元素</h1>';

// 添加到DOM的不同方式
document.body.appendChild(newDiv);                 // 追加到末尾
document.body.prepend(newDiv);                    // 插入到开头
document.body.insertBefore(newDiv, existingElement); // 插入到指定元素前

// 创建文本节点
const textNode = document.createTextNode('这是文本内容');
newDiv.appendChild(textNode);

// 创建文档片段（性能优化）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `项目 ${i + 1}`;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

节点删除与替换

// 删除节点
const elementToRemove = document.getElementById('old-element');
if (elementToRemove) {
    elementToRemove.parentNode.removeChild(elementToRemove);
    // 或使用现代方法
    elementToRemove.remove();
}

// 替换节点
const newElement = document.createElement('div');
newElement.textContent = '新内容';
const oldElement = document.getElementById('to-replace');
oldElement.parentNode.replaceChild(newElement, oldElement);

// 清空子节点
const container = document.getElementById('container');
while (container.firstChild) {
    container.removeChild(container.firstChild);
}
// 或使用简单方法
container.innerHTML = '';

节点修改与属性操作

const element = document.getElementById('my-element');

// 修改内容
element.textContent = '新的文本内容';     // 只处理文本
element.innerHTML = '<strong>HTML内容</strong>'; // 解析HTML

// 修改样式
element.style.color = 'red';
element.style.fontSize = '20px';
element.classList.add('active');        // 添加类
element.classList.remove('old-class');  // 移除类
element.classList.toggle('hidden');     // 切换类

// 属性操作
element.setAttribute('data-id', '123'); // 设置属性
const id = element.getAttribute('data-id'); // 获取属性
element.removeAttribute('data-id');     // 移除属性

// 数据集操作（data-*属性）
element.dataset.userId = '456';         // 设置data-user-id
console.log(element.dataset.userId);    // 获取值

事件处理与默认行为阻止

事件监听器多种写法

// 1. HTML内联事件（不推荐）
<button onclick="handleClick()">点击我</button>

// 2. DOM属性事件
const btn = document.getElementById('myButton');
btn.onclick = function() {
    console.log('按钮被点击了');
};

// 3. 标准事件监听（推荐）
btn.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    console.log('事件类型:', event.type);
});

// 4. 事件监听器支持多个处理函数
btn.addEventListener('click', handleClick1);
btn.addEventListener('click', handleClick2);

超链接默认行为阻止的多种方式

// 方式1：return false
document.getElementById('link1').onclick = function() {
    console.log('链接被点击，但不会跳转');
    return false; // 阻止默认行为
};

// 方式2：preventDefault()（推荐）
document.getElementById('link2').addEventListener('click', function(event) {
    event.preventDefault();
    console.log('阻止了链接跳转');
    
    // 可以执行其他操作
    window.location.href = '/new-page'; // 编程式导航
});

// 方式3：使用JavaScript:void(0)
<a href="javascript:void(0)" onclick="myFunction()">点击我</a>

// 方式4：使用#号并阻止默认行为
<a href="#" id="link3">伪链接</a>

document.getElementById('link3').addEventListener('click', function(event) {
    event.preventDefault();
    // 防止页面滚动到顶部
});

JavaScript基础语法深入

变量声明与作用域

// var - 函数作用域（存在变量提升）
function varExample() {
    console.log(x); // undefined（变量提升）
    var x = 10;
    if (true) {
        var y = 20; // 没有块级作用域
    }
    console.log(y); // 20（可以访问）
}

// let - 块级作用域
function letExample() {
    // console.log(x); // 报错（暂时性死区）
    let x = 10;
    if (true) {
        let y = 20; // 块级作用域
        console.log(x); // 10（可以访问外部）
    }
    // console.log(y); // 报错（不能访问块内变量）
}

// const - 常量声明
const PI = 3.14159;
// PI = 3.14; // 报错（不能重新赋值）

const obj = { name: '张三' };
obj.name = '李四'; // 允许（修改属性）
// obj = {}; // 报错（不能重新赋值）

数据类型与检测

// 基本数据类型
const types = {
    string: 'Hello World',
    number: 42,
    boolean: true,
    undefined: undefined,
    null: null,
    symbol: Symbol('unique')
};

// 复杂数据类型
const complexTypes = {
    object: { key: 'value' },
    array: [1, 2, 3],
    function: function() { return '函数'; },
    date: new Date()
};

// typeof运算符使用
console.log(typeof 'hello');        // 'string'
console.log(typeof 42);            // 'number'
console.log(typeof true);          // 'boolean'
console.log(typeof undefined);     // 'undefined'
console.log(typeof null);          // 'object'（历史遗留问题）
console.log(typeof {});            // 'object'
console.log(typeof []);            // 'object'
console.log(typeof function(){});  // 'function'

// 更准确的类型检测
console.log(Array.isArray([]));                    // true
console.log({} instanceof Object);                 // true
console.log(Object.prototype.toString.call([]));   // '[object Array]'

条件语句实战应用

// if-else if-else 链
function getGrade(score) {
    if (score >= 90) {
        return 'A';
    } else if (score >= 80) {
        return 'B';
    } else if (score >= 70) {
        return 'C';
    } else if (score >= 60) {
        return 'D';
    } else {
        return 'F';
    }
}

// switch语句
function getDayName(dayNumber) {
    switch (dayNumber) {
        case 1:
            return '星期一';
        case 2:
            return '星期二';
        case 3:
            return '星期三';
        case 4:
            return '星期四';
        case 5:
            return '星期五';
        case 6:
            return '星期六';
        case 7:
            return '星期日';
        default:
            return '无效的天数';
    }
}

// 三元运算符简化
const isAdult = age >= 18 ? '成年人' : '未成年人';
const message = isLoggedIn ? `欢迎, ${username}` : '请登录';

循环控制与算法实践

不同循环场景选择

// for循环 - 明确次数
function sumArray(numbers) {
    let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
    }
    return total;
}

// while循环 - 不明确次数
function findFirstNegative(numbers) {
    let i = 0;
    while (i < numbers.length && numbers[i] >= 0) {
        i++;
    }
    return i < numbers.length ? numbers[i] : null;
}

// do-while循环 - 至少执行一次
function getUserInput() {
    let input;
    do {
        input = prompt('请输入正数:');
    } while (isNaN(input) || input <= 0);
    return Number(input);
}

循环嵌套与算法

// 九九乘法表
function multiplicationTable() {
    for (let i = 1; i <= 9; i++) {
        let line = '';
        for (let j = 1; j <= i; j++) {
            line += `${j}×${i}=${i * j}\t`;
        }
        console.log(line);
    }
}

// 寻找质数
function findPrimes(limit) {
    const primes = [];
    
    for (let num = 2; num <= limit; num++) {
        let isPrime = true;
        
        for (let i = 2; i <= Math.sqrt(num); i++) {
            if (num % i === 0) {
                isPrime = false;
                break; // 发现因子，立即跳出内层循环
            }
        }
        
        if (isPrime) {
            primes.push(num);
        }
    }
    
    return primes;
}