前端基础：JS基础语法
目录
JavaScript 基础语法
变量声明
数据类型
运算符
控制结构
函数
数组操作
对象
异常处理
DOM 操作
异步编程
JavaScript 基础语法
JavaScript 是一种广泛应用于网页开发的脚本语言，具有动态类型和弱类型特性。掌握其基础语法是学习前端开发的第一步。
变量声明
JavaScript 中可以使用 var、let 和 const 来声明变量。var 是旧版语法，存在变量提升问题。let 和 const 是 ES6 引入的块级作用域变量声明方式。
var name = "John"; // 旧版语法，不推荐
let age = 25; // 可重新赋值
const PI = 3.14; // 常量，不可重新赋值
数据类型
JavaScript 有七种基本数据类型：Number、String、Boolean、Null、Undefined、Symbol 和 BigInt。引用类型包括 Object、Array 和 Function。
let num = 10; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let empty = null; // Null
let notDefined; // Undefined
let sym = Symbol("id"); // Symbol
let bigInt = 123456789012345678901234567890n; // BigInt
运算符
JavaScript 支持各种运算符，包括算术运算符、比较运算符、逻辑运算符等。
let x = 10, y = 5;
console.log(x + y); // 加法
console.log(x > y); // 比较
console.log(x && y); // 逻辑与
控制结构
条件语句和循环是控制程序流程的基本结构。
// if-else
if (age >= 18) {console.log("Adult");
} else {console.log("Minor");
}// for 循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while 循环
let j = 0;
while (j < 5) {console.log(j);j++;
}
函数
函数是 JavaScript 中的重要概念，可以封装可重用的代码块。
function greet(name) {return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 输出: Hello, Alice!// 箭头函数 (ES6)
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5
数组操作
数组是存储有序集合的数据结构，JavaScript 提供了丰富的数组操作方法。
let fruits = ["Apple", "Banana", "Orange"];
fruits.push("Mango"); // 添加元素
console.log(fruits.length); // 数组长度
console.log(fruits[1]); // 访问元素// 数组遍历
fruits.forEach(fruit => {console.log(fruit);
});
对象
对象是键值对的集合，用于存储复杂数据。
let person = {name: "Bob",age: 30,greet: function() {console.log(`Hi, I'm ${this.name}`);}
};console.log(person.name); // 访问属性
person.greet(); // 调用方法
异常处理
try-catch 语句用于处理运行时可能出现的错误。
try {// 可能出错的代码let result = 10 / 0;if (!isFinite(result)) {throw new Error("Division by zero");}
} catch (error) {console.error(error.message);
} finally {console.log("执行完毕");
}
DOM 操作
JavaScript 可以通过 DOM API 与网页元素交互。
// 获取元素
let btn = document.getElementById("myButton");// 添加事件监听
btn.addEventListener("click", function() {alert("Button clicked!");
});
异步编程
JavaScript 使用回调、Promise 和 async/await 处理异步操作。
// Promise
fetch("https://api.example.com/data").then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));// async/await
async function getData() {try {let response = await fetch("https://api.example.com/data");let data = await response.json();console.log(data);} catch (error) {console.error(error);}
}
掌握这些基础语法是 JavaScript 编程的起点，后续可以深入学习面向对象编程、模块化、框架等高级概念。