JavaScript（简称JS）是一个广泛使用的客户端脚本语言，常用于网页开发中。它可以在浏览器中运行，执行交互操作和动态效果。以下是JavaScript基础的所有核心知识点，按主题分类列出。
1. 基本语法
- 声明变量
使用var、let和const来声明变量：
var name = 'Alice'; // var 不建议使用
let age = 25; // let 是可变的
const pi = 3.14; // const 是常量，值不可变
数据类型
JavaScript的基本数据类型包括：
- Number：数字类型（整数和浮点数）
- String：字符串类型
- Boolean：布尔类型（
true或false） - undefined：表示未定义的变量
- null：表示空值
- Symbol：唯一且不可变的值
- BigInt：大整数类型
let num = 42; // Number
let str = 'Hello'; // String
let isActive = true; // Boolean
let un = undefined; // undefined
let n = null; // null
2. 运算符
- 算术运算符：
+,-,*,/,%,++,-- - 比较运算符：
==,===,!=,!==,>,<,>=,<= - 逻辑运算符：
&&(与)，||(或)，!(非) - 赋值运算符：
=,+=,-=,*=,/=,%= - 三元运算符：
condition ? expr1 : expr2 - 按位运算符：
&,|,^,~,<<,>>,>>> - 其他：
typeof,instanceof
3. 控制流
- 条件语句
if (x > 10) {
console.log('x 大于 10');
} else if (x === 10) {
console.log('x 等于 10');
} else {
console.log('x 小于 10');
}
- switch 语句
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
default:
console.log('Unknown day');
}
循环语句
for循环while循环do...while循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
4. 函数
- 函数声明
function greet(name) {
return 'Hello, ' + name;
}
console.log(greet('Alice'));
- 函数表达式
const greet = function(name) {
return 'Hello, ' + name;
};
console.log(greet('Alice'));
- 箭头函数（ES6+）
const greet = (name) => 'Hello, ' + name;
console.log(greet('Alice'));
- 默认参数（ES6+）
function greet(name = 'Guest') {
return 'Hello, ' + name;
}
console.log(greet()); // 'Hello, Guest'
- Rest 参数（ES6+）
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
5. 作用域和闭包
- 作用域：全局作用域、函数作用域、块级作用域（由
let和const引入） - 闭包：函数可以访问外部函数的变量，形成闭包。
function outer() {
let outerVar = 'I am outer';
return function inner() {
console.log(outerVar);
};
}
const closure = outer();
closure(); // 输出 'I am outer'
6. 对象和数组
- 对象：
let person = {
name: 'Alice',
age: 25,
greet() {
console.log('Hello ' + this.name);
}
};
console.log(person.name); // 'Alice'
person.greet(); // 'Hello Alice'
- 数组：
let numbers = [1, 2, 3, 4];
numbers.push(5); // 添加元素
numbers.pop(); // 移除最后一个元素
console.log(numbers); // [1, 2, 3, 4, 5]
7.ES6+ 特性
- 模板字符串（Template Literals）
let name = 'Alice';
let greeting = `Hello, ${name}!`; // 字符串插值
console.log(greeting); // 'Hello, Alice!'
- 解构赋值
对象解构：
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // 'Alice' 25
数组解构：
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 1 2
- 扩展运算符（Spread Operator）
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
- Promise（用于处理异步操作）
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});
promise
.then(result => console.log(result))
.catch(error => console.log(error));
8. 异步编程
- 回调函数
function fetchData(callback) {
setTimeout(() => {
callback('Data loaded');
}, 1000);
}
fetchData(data => console.log(data));
- Promise
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Data loaded'), 1000);
});
};
fetchData().then(data => console.log(data));
- async/await（ES8）
const fetchData = async () => {
let data = await new Promise(resolve => {
setTimeout(() => resolve('Data loaded'), 1000);
});
console.log(data);
};
fetchData();
9. 事件处理
- 事件监听
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
10. DOM 操作
- 获取元素：
const element = document.getElementById('myId');
const elements = document.getElementsByClassName('myClass');
const queryElement = document.querySelector('.myClass');
- 修改元素内容：
element.innerHTML = 'New content';
element.textContent = 'Text content';
11. 错误处理
- try...catch
用于捕获运行时错误并进行处理：
try {
let result = riskyFunction();
} catch (error) {
console.log('Error occurred: ' + error);
}
12. 模块化
- 模块导出和导入（ES6+）
- 导出：
export const myFunction = () => { console.log('Hello World'); };
- 导出：
import { myFunction } from './myModule.js';
myFunction();