JavaScript核心语法精要指南

JavaScript 基础知识（二）

变量与数据类型

JavaScript 是弱类型语言，变量声明使用var、let或const。let和const是 ES6 新增的块级作用域变量声明方式。

var name = "John"; // 函数作用域 let age = 25; // 块级作用域 const PI = 3.14; // 常量，不可重新赋值

基本数据类型包括：

• Number：整数或浮点数
• String：字符串
• Boolean：true或false
• null：表示空值
• undefined：未定义的值
• Symbol（ES6）：唯一标识符

运算符

JavaScript 支持多种运算符：

• 算术运算符：+,-,*,/,%,++,--
• 比较运算符：==,===,!=,!==,>,<,>=,<=
• 逻辑运算符：&&,||,!
• 赋值运算符：=,+=,-=,*=,/=,%=

let x = 10; let y = "10"; console.log(x == y); // true，值相等 console.log(x === y); // false，值和类型都相等

条件语句

条件语句用于基于不同条件执行不同代码块。

let score = 85; if (score >= 90) { console.log("优秀"); } else if (score >= 80) { console.log("良好"); } else { console.log("继续努力"); }

switch语句用于多条件分支：

let day = 3; switch (day) { case 1: console.log("周一"); break; case 2: console.log("周二"); break; default: console.log("其他"); }

循环语句

循环用于重复执行代码块。

for循环：

for (let i = 0; i < 5; i++) { console.log(i); }

while循环：

let i = 0; while (i < 5) { console.log(i); i++; }

do...while循环：

let i = 0; do { console.log(i); i++; } while (i < 5);

函数

函数用于封装可重复使用的代码块。

function greet(name) { return "Hello, " + name; } console.log(greet("Alice")); // Hello, Alice

ES6 箭头函数：

const greet = (name) => `Hello, ${name}`; console.log(greet("Bob")); // Hello, Bob

数组

数组用于存储多个值。

let fruits = ["Apple", "Banana", "Orange"]; console.log(fruits[1]); // Banana fruits.push("Mango"); // 添加元素 console.log(fruits.length); // 4

数组常用方法：

• push()：末尾添加元素
• pop()：移除末尾元素
• shift()：移除开头元素
• unshift()：开头添加元素
• slice()：截取子数组
• splice()：删除或替换元素

对象

对象用于存储键值对。

let person = { name: "John", age: 30, greet: function() { console.log("Hello"); } }; console.log(person.name); // John person.greet(); // Hello

事件处理

JavaScript 可以通过事件与 HTML 交互。

<button id="myBtn">点击我</button> <script> document.getElementById("myBtn").onclick = function() { alert("按钮被点击"); }; </script>

常见事件：

• onclick：点击事件
• onmouseover：鼠标悬停
• onload：页面加载完成
• onchange：表单元素值改变

DOM 操作

DOM（文档对象模型）允许 JavaScript 动态修改 HTML。

<div id="demo"></div> <script> document.getElementById("demo").innerHTML = "Hello DOM"; </script>

常用 DOM 方法：

• getElementById()：通过 ID 获取元素
• getElementsByClassName()：通过类名获取元素
• querySelector()：通过 CSS 选择器获取元素
• createElement()：创建新元素
• appendChild()：添加子元素

错误处理

try...catch用于捕获和处理错误。

try { let x = y + 1; // y 未定义，抛出错误 } catch (error) { console.log("发生错误: " + error.message); }

JSON

JSON（JavaScript Object Notation）是轻量级数据交换格式。

let jsonStr = '{"name":"John","age":30}'; let obj = JSON.parse(jsonStr); // 字符串转对象 console.log(obj.name); // John let jsonStr2 = JSON.stringify(obj); // 对象转字符串 console.log(jsonStr2); // {"name":"John","age":30}