JavaScript 核心语法速查手册
一、基础语法
1. 变量声明
```javascript
// ES5 (函数作用域)
var name = "张三"; // 可重复声明，会提升
// ES6+ (块级作用域)
let age = 25; // 可重新赋值，不可重复声明
const PI = 3.14; // 不可重新赋值，必须初始化
```
2. 数据类型
```javascript
// 原始类型 (7种)
typeof "string" // string
typeof 42 // number
typeof true // boolean
typeof undefined // undefined
typeof null // object (历史遗留)
typeof Symbol() // symbol
typeof 42n // bigint
// 引用类型
typeof {} // object
typeof [] // object
typeof function(){} // function
```
3. 类型转换
```javascript
// 显式转换
Number("123") // 123
String(123) // "123"
Boolean(1) // true
// 隐式转换
"5" + 2 // "52" (字符串连接)
"5" - 2 // 3 (数字运算)
!!value // 转布尔值
```
二、运算符
1. 算术运算符
```javascript
-
- * / % ** // 加、减、乘、除、取模、幂
++ -- // 自增自减
```
2. 比较运算符
```javascript
== != // 宽松相等（会类型转换）
=== !== // 严格相等（推荐使用）
> < >= <= // 大小比较
```
3. 逻辑运算符
```javascript
&& || ! // 与、或、非
?? // 空值合并（ES2020）
?. // 可选链（ES2020）
```
4. 赋值运算符
```javascript
= += -= *= /= %= // 赋值
```
三、流程控制
1. 条件语句
```javascript
// if-else
if (condition) {
// 执行代码
} else if (condition2) {
// 执行代码
} else {
// 执行代码
}
// 三元运算符
condition ? expr1 : expr2;
// switch
switch (value) {
case 1:
// 代码
break;
case 2:
// 代码
break;
default:
// 代码
}
```
2. 循环语句
```javascript
// for 循环
for (let i = 0; i < 10; i++) {
// 循环体
}
// for...of (遍历可迭代对象)
for (const item of array) {
console.log(item);
}
// for...in (遍历对象属性)
for (const key in object) {
console.log(key, object[key]);
}
// while
while (condition) {
// 循环体
}
// do-while
do {
// 循环体
} while (condition);
```
3. 跳转语句
```javascript
break; // 跳出循环
continue; // 跳过本次循环
return; // 函数返回
```
四、函数
1. 函数定义
```javascript
// 函数声明 (会提升)
function add(a, b) {
return a + b;
}
// 函数表达式
const multiply = function(a, b) {
return a * b;
};
// 箭头函数 (ES6+)
const divide = (a, b) => a / b;
const sayHi = name => `Hello ${name}`;
const noArg = () => console.log('Hi');
// 参数默认值
function greet(name = 'Guest') {
return `Hello ${name}`;
}
// 剩余参数
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
```
2. 高阶函数
```javascript
// 函数作为参数
function process(arr, fn) {
return arr.map(fn);
}
// 函数作为返回值
function createMultiplier(multiplier) {
return function(x) {
return x * multiplier;
};
}
```
五、对象
1. 对象创建
```javascript
// 字面量
const obj = {
name: '张三',
age: 25,
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
};
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`Hello, I'm ${this.name}`);
};
// Class (ES6)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, I'm ${this.name}`);
}
// 静态方法
static isPerson(obj) {
return obj instanceof Person;
}
}
```
2. 对象操作
```javascript
// 访问属性
obj.name // 点表示法
obj['name'] // 括号表示法
// 添加/修改属性
obj.email = 'test@example.com';
// 删除属性
delete obj.age;
// 检查属性
'name' in obj // true
obj.hasOwnProperty('name') // true (只检查自身属性)
Object.keys(obj) // 获取所有可枚举属性名
Object.values(obj) // 获取所有属性值
Object.entries(obj) // 获取所有键值对
```
六、数组
1. 数组创建
```javascript
const arr1 = [1, 2, 3]; // 字面量
const arr2 = new Array(5); // 长度为5的空数组
const arr3 = Array.from('hello'); // 从类数组创建
const arr4 = Array.of(1, 2, 3); // 创建包含参数的数组
```
2. 数组方法
```javascript
// 修改原数组
arr.push(item) // 末尾添加
arr.pop() // 末尾删除
arr.unshift(item) // 开头添加
arr.shift() // 开头删除
arr.splice(start, deleteCount, ...items) // 增删改
arr.reverse() // 反转
arr.sort((a, b) => a - b) // 排序
// 不修改原数组
arr.slice(start, end) // 切片
arr.concat(arr2) // 连接
arr.indexOf(item) // 查找索引
arr.includes(item) // 是否包含
arr.join(',') // 连接为字符串
// 迭代方法
arr.forEach((item, index) => {}) // 遍历
arr.map(item => item * 2) // 映射新数组
arr.filter(item => item > 0) // 过滤
arr.reduce((acc, cur) => acc + cur, 0) // 累积
arr.find(item => item.id === 1) // 查找元素
arr.findIndex(item => item.id === 1) // 查找索引
arr.every(item => item > 0) // 所有满足条件
arr.some(item => item > 0) // 至少一个满足
```
七、字符串
1. 常用方法
```javascript
// 基础操作
str.length // 长度
str[index] // 访问字符
str.charAt(index) // 访问字符
str.concat(str2) // 连接字符串
// 查找和截取
str.includes('sub') // 是否包含
str.indexOf('sub') // 查找位置
str.slice(start, end) // 切片
str.substring(start, end) // 子字符串
str.substr(start, length) // 子字符串
// 修改
str.trim() // 去除两端空格
str.toLowerCase() // 转小写
str.toUpperCase() // 转大写
str.replace('old', 'new') // 替换
str.split(',') // 分割为数组
str.repeat(3) // 重复
// 模板字符串 (ES6)
const name = '张三';
const greeting = `Hello, ${name}!`; // 支持插值、多行
```
八、异步编程
1. Promise
```javascript
// 创建Promise
const promise = new Promise((resolve, reject) => {
if (success) {
resolve(value);
} else {
reject(error);
}
});
// 使用Promise
promise
.then(value => {
// 成功处理
return processedValue;
})
.then(value => {
// 链式调用
})
.catch(error => {
// 错误处理
})
.finally(() => {
// 最终执行
});
// Promise静态方法
Promise.all([promise1, promise2]) // 全部成功
Promise.race([promise1, promise2]) // 第一个完成
Promise.any([promise1, promise2]) // 第一个成功
Promise.resolve(value) // 返回成功Promise
Promise.reject(error) // 返回失败Promise
```
2. Async/Await
```javascript
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
```
九、模块化
1. ES6模块
```javascript
// 导出 (export.js)
export const name = '张三'; // 命名导出
export function add(a, b) { // 命名导出
return a + b;
}
export default class Person { // 默认导出
constructor(name) {
this.name = name;
}
}
// 导入 (import.js)
import Person from './export.js'; // 默认导入
import { name, add } from './export.js'; // 命名导入
import * as utils from './export.js'; // 全部导入
```
2. 常用API速查
DOM操作
```javascript
// 选择元素
document.getElementById('id')
document.querySelector('.class')
document.querySelectorAll('div')
// 修改内容
element.textContent = 'text'
element.innerHTML = '<span>HTML</span>'
element.setAttribute('attr', 'value')
// 样式操作
element.style.color = 'red'
element.classList.add('class')
element.classList.remove('class')
element.classList.toggle('class')
// 事件
element.addEventListener('click', handler)
element.removeEventListener('click', handler)
```
时间
```javascript
setTimeout(() => {}, 1000) // 延时执行
setInterval(() => {}, 1000) // 间隔执行
clearTimeout(timerId) // 清除定时器
clearInterval(timerId)
```
存储
```javascript
localStorage.setItem('key', value) // 本地存储
localStorage.getItem('key')
sessionStorage.setItem('key', value) // 会话存储
```
十、现代JavaScript特性
1. 解构赋值
```javascript
// 数组解构
const [first, second, ...rest] = arr;
// 对象解构
const { name, age, ...others } = obj;
const { name: userName } = obj; // 重命名
// 参数解构
function printUser({ name, age }) {
console.log(name, age);
}
```
2. 扩展运算符
```javascript
// 数组
const newArr = [...arr1, ...arr2];
const copyArr = [...arr];
// 对象
const newObj = { ...obj1, ...obj2 };
const copyObj = { ...obj };
```
3. 新增语法
```javascript
// 可选链操作符 (?.)
obj?.prop?.subProp
arr?.[0]
func?.(args)
// 空值合并运算符 (??)
const value = input ?? 'default';
// 大整数 (BigInt)
const bigNum = 9007199254740991n;
// 动态导入
import('./module.js').then(module => {
// 使用模块
});
```
十一、最佳实践提示
-
**始终使用严格模式**: `'use strict';`
-
**优先使用const，其次let，避免var**
-
**使用===代替==**
-
**使用模板字符串代替字符串拼接**
-
**使用箭头函数保持this上下文**
-
**使用解构和扩展运算符简化代码**
-
**使用Promise/async-await处理异步**
-
**使用可选链和空值合并处理空值**
**记住：** 实际工作80%的时间只用到20%的语法，重点是掌握核心概念并在实践中熟练运用。遇到问题查文档比死记硬背更高效。