JavaScript 技术学习文档

Nash

• 4 min read

1. 基本语法

1.1 变量和常量声明

// 变量声明
let name = 'John';
var age = 25; // 不推荐使用var
let isStudent = true;

// 常量声明
const PI = 3.14159;
const API_URL = 'https://api.example.com';

1.2 数据类型

// 基本数据类型
let string = "Hello";           // 字符串
let number = 42;               // 数字
let boolean = true;            // 布尔值
let nullValue = null;          // null
let undefinedValue;           // undefined
let symbol = Symbol('key');    // Symbol

// 引用数据类型
let array = [1, 2, 3];        // 数组
let object = {                 // 对象
    name: 'John',
    age: 25
};

1.3 运算符和表达式

// 算术运算符
let sum = 5 + 3;
let difference = 10 - 5;
let product = 4 * 2;
let quotient = 15 / 3;
let remainder = 17 % 5;

// 比较运算符
let isEqual = 5 === 5;        // 严格相等
let isNotEqual = 5 !== '5';   // 严格不相等
let greaterThan = 10 > 5;
let lessThan = 3 < 7;

// 逻辑运算符
let and = true && false;      // 与
let or = true || false;       // 或
let not = !true;             // 非

2. 控制结构

2.1 条件语句

// if-else 语句
if (age >= 18) {
    console.log('成年人');
} else if (age >= 13) {
    console.log('青少年');
} else {
    console.log('儿童');
}

// switch 语句
switch (grade) {
    case 'A':
        console.log('优秀');
        break;
    case 'B':
        console.log('良好');
        break;
    default:
        console.log('一般');
}

2.2 循环语句

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 循环
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

// forEach 循环
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
    console.log(number);
});

// for...of 循环
for (const number of numbers) {
    console.log(number);
}

// for...in 循环（用于对象）
const person = { name: 'John', age: 25 };
for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

3. 函数

3.1 函数声明

// 普通函数声明
function greet(name) {
    return `Hello, ${name}!`;
}

// 函数表达式
const greet = function(name) {
    return `Hello, ${name}!`;
};

// 箭头函数
const greet = (name) => `Hello, ${name}!`;

// 带默认参数的函数
function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

3.2 回调函数

// 回调函数示例
function fetchData(callback) {
    setTimeout(() => {
        const data = { id: 1, name: 'John' };
        callback(data);
    }, 1000);
}

fetchData((result) => {
    console.log(result);
});

// Promise 方式
function fetchDataPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { id: 1, name: 'John' };
            resolve(data);
        }, 1000);
    });
}

fetchDataPromise()
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await 方式
async function getData() {
    try {
        const data = await fetchDataPromise();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

4. 数组和对象操作

4.1 数组操作

// 数组创建和基本操作
const fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');         // 添加元素到末尾
fruits.unshift('pear');      // 添加元素到开头
fruits.pop();                // 删除最后一个元素
fruits.shift();              // 删除第一个元素

// 数组方法
const numbers = [1, 2, 3, 4, 5];

// map - 转换数组元素
const doubled = numbers.map(num => num * 2);

// filter - 过滤数组元素
const evenNumbers = numbers.filter(num => num % 2 === 0);

// reduce - 累积计算
const sum = numbers.reduce((acc, cur) => acc + cur, 0);

// find - 查找元素
const found = numbers.find(num => num > 3);

// some - 检查是否存在满足条件的元素
const hasEven = numbers.some(num => num % 2 === 0);

4.2 对象操作

// 对象创建和基本操作
const person = {
    name: 'John',
    age: 25,
    address: {
        city: 'New York',
        country: 'USA'
    }
};

// 访问和修改属性
console.log(person.name);
person.age = 26;
person['email'] = 'john@example.com';

// 对象解构
const { name, age } = person;

// 展开运算符
const updatedPerson = {
    ...person,
    age: 27
};

// Object 方法
const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

5. 事件处理

5.1 事件监听

// 添加事件监听器
const button = document.querySelector('#myButton');

button.addEventListener('click', function(event) {
    console.log('Button clicked!');
    console.log(event);
});

// 移除事件监听器
const handleClick = (event) => {
    console.log('Button clicked!');
};

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

// 事件委托
document.querySelector('#parentElement').addEventListener('click', function(event) {
    if (event.target.matches('.child-element')) {
        console.log('Child element clicked!');
    }
});

5.2 事件冒泡与捕获

// 事件冒泡
element.addEventListener('click', function(event) {
    console.log('Bubble phase');
}, false);

// 事件捕获
element.addEventListener('click', function(event) {
    console.log('Capture phase');
}, true);

// 阻止事件冒泡
element.addEventListener('click', function(event) {
    event.stopPropagation();
});

6. DOM 操作

6.1 元素选择

// 通过 ID 选择
const element = document.getElementById('myId');

// 通过类名选择
const elements = document.getElementsByClassName('myClass');

// 通过标签名选择
const divs = document.getElementsByTagName('div');

// 使用 querySelector
const firstElement = document.querySelector('.myClass');
const allElements = document.querySelectorAll('.myClass');

6.2 DOM 修改

// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
newDiv.className = 'new-class';

// 添加元素
parentElement.appendChild(newDiv);
parentElement.insertBefore(newDiv, referenceElement);

// 删除元素
element.remove();
parentElement.removeChild(element);

// 修改内容
element.textContent = 'New text';
element.innerHTML = '<span>New HTML</span>';

// 修改样式
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

// 修改类
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

7. 最佳实践

  1. 使用现代 JavaScript 特性（ES6+）
  2. 避免全局变量
  3. 使用严格模式 ('use strict')
  4. 适当处理错误（try-catch）
  5. 使用适当的代码组织方式
  6. 注意性能优化
  7. 编写清晰的文档和注释

8. 调试技巧

  1. 使用 console 方法
  2. 使用断点调试
  3. 使用开发者工具
  4. 错误处理和日志记录

这份文档涵盖了 JavaScript 的核心概念和常用操作，可以作为开发参考指南。建议在实际项目中不断实践和深入学习各个特性的应用场景。

苏ICP备2025153828号