前端小白速看！JavaScript 速成指南
前言
马上就要考 JavaScript 啦，可知识点却忘得差不多？别慌！这篇速成指南将带你快速回顾 JavaScript 核心知识点，助你临阵磨枪，顺利应考！
一、JavaScript 基础语法
1. 变量声明
在 JavaScript 中，有三种声明变量的方式：var、let 和 const。
// 使用 var 声明变量（存在变量提升问题）
var name = '张三';
// 使用 let 声明变量（块级作用域）
let age = 20;
// 使用 const 声明常量（值不能被重新赋值）
const PI = 3.14;
2. 数据类型
JavaScript 有 7 种基本数据类型：undefined、null、boolean、number、string、symbol 和 bigint，以及一种引用数据类型 object。
// 数字类型
let num = 10;
// 字符串类型
let str = "Hello, World!";
// 布尔类型
let isTrue = true;
// undefined 类型
let undef;
// null 类型
let empty = null;
// 对象类型
let person = {
name: '李四',
age: 25
};
其实也谈不上类型，js是弱类型语言。
二、函数
1. 函数声明
// 函数声明式
function add(a, b) {
return a + b;
}
// 函数表达式
let multiply = function(a, b) {
return a * b;
};
// 箭头函数
let subtract = (a, b) => a - b;
2. 函数调用
let result1 = add(2, 3); // 5
let result2 = multiply(4, 5); // 20
let result3 = subtract(7, 4); // 3
三、条件语句和循环语句
1. 条件语句
let score = 80;
if (score >= 90) {
console.log('优秀');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
// switch 语句
let day = 3;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
default:
console.log('其他');
}
2. 循环语句
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
// do...while 循环
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);
四、对象
1. 对象创建和属性访问
// 创建对象
let car = {
brand: 'Toyota',
model: 'Corolla',
year: 2023
};
// 访问对象属性
console.log(car.brand); // Toyota
console.log(car['model']); // Corolla
// 修改对象属性
car.year = 2024;
2. 对象方法
let person = {
name: '王五',
age: 30,
sayHello: function() {
console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁。`);
}
};
person.sayHello(); // 你好，我是 王五，今年 30 岁。
五、DOM 操作
1. 获取 DOM 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="myDiv">这是一个 div</div>
<script>
// 通过 id 获取元素
let divElement = document.getElementById('myDiv');
// 通过类名获取元素
let elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名获取元素
let elementsByTag = document.getElementsByTagName('p');
</script>
</body>
</html>
2. 修改 DOM 元素
let divElement = document.getElementById('myDiv');
// 修改元素内容
divElement.innerHTML = '修改后的内容';
// 修改元素样式
divElement.style.color = 'red';
六、事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="myButton">点击我</button>
<script>
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
</script>
</body>
</html>
总结
通过以上内容，我们快速回顾了 JavaScript 的基础语法、函数、条件语句、循环语句、对象、DOM 操作和事件处理等核心知识点。包过的铁子们。
