JavaScript核心内容

原创已于 2025-08-06 16:19:28 修改 · 976 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2018-10-18 10:30:20 首次发布

一、基础语法（必须肌肉记忆）

变量与类型

// 变量声明（优先const）
const name = 'Alice';  // 不可变引用
let age = 25;         // 可变变量
var legacy = '避免使用'; // 旧版作用域问题

// 类型检测
typeof 42;          // 'number'
Array.isArray([]);  // true

运算符与流程控制

// 逻辑运算
a || b;  // 短路求值
a?.b;    // 可选链（ES2020）

// 循环（for...of最常用）
for (const item of array) { /*...*/ }
array.forEach(item => { /*...*/ });

二、函数与作用域（核心之核心）

函数定义

// 箭头函数（首选）
const sum = (a, b) => a + b;

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

作用域与闭包

// 闭包经典案例
function counter() {
  let count = 0;
  return () => count++;
}
const myCounter = counter();

三、对象与数组（每天必用）

对象操作

const person = {
  name: 'Alice',
  age: 25,
  // 方法简写
  sayHi() { console.log(`Hi, I'm ${this.name}`) }
};

// 动态属性
person['new' + 'Key'] = 'value';

// 解构赋值
const { name, age } = person;

数组方法（掌握这5个够用80%场景）
| 方法 | 作用 | 示例 |
|------------|----------------------|------------------------------|
| map() | 数据转换 | arr.map(x => x * 2) |
| filter() | 数据筛选 | arr.filter(x => x > 5) |
| find() | 查找元素 | arr.find(x => x.id === 2) |
| reduce() | 累计计算 | arr.reduce((sum, x) => sum + x, 0) |
| includes()| 包含检测 | arr.includes('apple') |

四、异步编程（现代JS灵魂）

Promise基础

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

async/await（更优雅）

async function loadData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

五、DOM操作（前端必备）

元素选择与操作

// 查询
const btn = document.querySelector('#submit-btn');

// 事件监听
btn.addEventListener('click', () => {
  console.log('Button clicked');
});

// 动态修改
document.getElementById('title').textContent = '新标题';

动态创建元素

const newDiv = document.createElement('div');
newDiv.classList.add('alert');
newDiv.innerHTML = '<strong>提示！</strong>';
document.body.appendChild(newDiv);

六、ES6+关键特性（提升代码质量）

模板字符串

const message = `用户 ${name} 今年 ${age} 岁`;

展开运算符

const newArr = [...arr1, ...arr2];
const objCopy = { ...original };

模块化

// 导出
export const PI = 3.14;
export function double(x) { return x * 2; }

// 导入
import { PI, double } from './math.js';

七、常见陷阱与最佳实践

相等判断

0 == false;    // true（避免用==）
0 === false;   // false（始终用===）

this指向

// 箭头函数固定this
const obj = {
  name: 'Alice',
  sayName: () => console.log(this.name) // 错误！
  sayName() { console.log(this.name) }  // 正确
};

深拷贝简单实现

const deepCopy = JSON.parse(JSON.stringify(obj));

优先级学习路线

第1天：变量/函数/条件判断
第2天：数组方法/DOM操作
第3天：Promise/async-await
第4天：ES6模块化/解构

💡 效率技巧：

在Chrome控制台实时练习代码片段
使用VS Code片段工具存储常用代码模板
掌握这20%核心后，再逐步扩展其他知识