JavaScript 核心知识点解析：运算符、函数与异步编程

一、运算符与表达式

1. 算术、比较与逻辑运算符

JavaScript 提供了丰富的运算符用于各种计算和逻辑判断：

// 算术运算符
console.log(10 + 5);  // 15
console.log(10 % 3);   // 1 (取余)

// 比较运算符
console.log(5 == '5');  // true (宽松相等)
console.log(5 === '5'); // false (严格相等)

// 逻辑运算符
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

实践建议：

• 始终使用 === 而非 == 避免类型转换带来的意外行为
• 利用短路求值特性简化代码：const value = input || defaultValue

2. 解构赋值

解构赋值可以快速从数组或对象中提取值：

// 数组解构
const [first, second] = [1, 2, 3];
console.log(first); // 1

// 对象解构
const { name, age } = { name: 'Alice', age: 25 };
console.log(name); // 'Alice'

// 重命名和默认值
const { username: name = 'Guest' } = { username: 'Bob' };

3. 可选链与空值合并

// 可选链操作符
const street = user?.address?.street; // 不会抛出null/undefined错误

// 空值合并运算符
const displayName = username ?? 'Anonymous'; // 仅在null/undefined时使用默认值

实践建议：

• 使用 ?. 替代复杂的 && 链式检查
• ?? 比 || 更精确，因为它只对 null/undefined 生效

二、函数进阶

1. 函数声明 vs 表达式

// 函数声明 (会提升)
function sum(a, b) { return a + b; }

// 函数表达式
const multiply = function(a, b) { return a * b; };

2. 箭头函数与 this

const obj = {
  value: 42,
  getValue: function() {
    return this.value; // 42 (this指向obj)
  },
  getValueArrow: () => {
    return this.value; // undefined (this继承自外层)
  }
};

实践建议：

• 需要动态 this 时用普通函数
• 需要词法 this 时用箭头函数

3. 高阶函数示例

// 使用reduce实现复杂逻辑
const total = [1, 2, 3].reduce((sum, num) => sum + num, 0);

// 函数组合
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

三、异步编程

1. Promise 链式调用

fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .catch(error => console.error(error))
  .finally(() => hideLoading());

2. async/await 最佳实践

async function loadUserData() {
  try {
    const response = await fetch('/api/user');
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (error) {
    // 统一错误处理
    showErrorToast(error.message);
    return null;
  }
}

实践建议：

• 总是用 try/catch 包裹 await 调用
• 对于并行请求使用 Promise.all

四、模块化开发

ES Modules 示例

// utils.js
export const formatDate = date => /*...*/;
export default function validate() { /*...*/ }

// app.js
import validate, { formatDate } from './utils.js';

实践建议：

• 优先使用 ES Modules (浏览器原生支持)
• 默认导出保持简洁，一个模块最好只有一个默认导出

五、DOM 操作优化

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
listElement.appendChild(fragment);

// 事件委托
document.getElementById('list').addEventListener('click', event => {
  if (event.target.tagName === 'LI') {
    handleItemClick(event.target);
  }
});

性能优化技巧

1. 防抖与节流：

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(handleResize, 200));

2. 虚拟列表：对于长列表渲染，只渲染可视区域内的元素

通过掌握这些核心概念，您将能够编写更高效、更健壮的 JavaScript 代码。记住，理解原理比记忆 API 更重要，这将帮助您适应 JavaScript 生态系统的快速变化。