JavaScript核心语法详解：从零基础到实战应用

2024年5月30日

阅读需 12 分钟

wqz

JavaScript

/前端开发

/编程语言

JavaScript是当今Web开发中最重要的编程语言之一，它为网页添加交互性和动态功能。本文将以简洁明了的方式介绍JavaScript的核心语法和基本概念，帮助初学者快速入门并掌握这一强大的编程语言。

1. 什么是JavaScript？

JavaScript是一种轻量级的解释型编程语言，主要用于网页开发，让网页变得"活"起来。它是Web的三大核心技术之一（HTML、CSS和JavaScript）。

JavaScript能做什么？

改变网页内容：动态更新页面元素
响应用户操作：处理点击、滚动等事件
发送和接收数据：与服务器通信而无需刷新页面
创建动画和交互效果：提升用户体验
存储数据：在用户浏览器中保存信息
构建完整应用：结合现代框架可开发复杂应用

2. 变量 - 存储数据的盒子

变量是存储数据的容器，你可以给它命名，然后在程序中使用这个名字来引用存储的数据。

变量声明和赋值

// 声明变量
let name = "小明";  // 字符串
let age = 18;       // 数字
let isStudent = true;  // 布尔值（真/假）

// 使用变量
console.log("我叫" + name + "，今年" + age + "岁");
// 输出：我叫小明，今年18岁

// 使用模板字符串（ES6特性）
console.log(`我叫${name}，今年${age}岁`);
// 输出：我叫小明，今年18岁

变量的三种声明方式

var：传统声明方式，存在变量提升，函数作用域
let：现代声明方式，块级作用域，可以修改值
const：常量声明，一旦赋值不能修改

// let - 可修改的变量
let count = 1;
count = 2;  // 可以修改

// const - 不可修改的常量
const PI = 3.14159;
// PI = 3;  // 错误！常量不能修改

// 但const声明的对象内部属性可以修改
const person = { name: "小明" };
person.name = "小红";  // 这是允许的
// person = { name: "小红" };  // 错误！不能重新赋值

变量命名规则

只能包含字母、数字、下划线和美元符号
必须以字母、下划线或美元符号开头
区分大小写（name和Name是不同的变量）
不能使用保留字（如let、const、function等）
推荐使用驼峰命名法（如firstName、isUserLoggedIn）

3. 数据类型 - 不同种类的数据

JavaScript中有几种基本的数据类型：

基本数据类型

字符串(String)：文本，用单引号、双引号或反引号包裹

let message = "你好，世界！";
let name = '小明';
let greeting = `你好，${name}`;  // 模板字符串

数字(Number)：整数或小数

let age = 25;
let price = 99.99;
let infinity = Infinity;
let notANumber = NaN;  // 表示"不是一个数字"

布尔(Boolean)：真(true)或假(false)

let isOnline = true;
let hasError = false;

空(null)：表示"没有值"或"空值"
```
let emptyBox = null;
```
未定义(undefined)：变量声明但未赋值
```
let something;  // 值为undefined
```
符号(Symbol)：ES6引入的唯一标识符
```
let id = Symbol("id");
```
大整数(BigInt)：表示任意精度的整数
```
let bigNumber = 9007199254740991n;
```

引用数据类型

对象(Object)：存储多个相关值的集合

let person = {
  name: "小红",
  age: 20,
  isStudent: true
};

数组(Array)：有序的数据集合

let fruits = ["苹果", "香蕉", "橙子"];

函数(Function)：可执行的代码块

function greet() {
  return "你好！";
}

检查数据类型

使用typeof运算符可以检查变量的类型：

typeof "Hello"  // 返回 "string"
typeof 42       // 返回 "number"
typeof true     // 返回 "boolean"
typeof undefined  // 返回 "undefined"
typeof null     // 返回 "object"（这是JavaScript的一个历史遗留bug）
typeof {}       // 返回 "object"
typeof []       // 返回 "object"（数组是特殊的对象）
typeof function(){} // 返回 "function"

4. 运算符 - 数据的操作工具

算术运算符

let a = 5;
let b = 2;

let sum = a + b;      // 加法: 7
let difference = a - b;  // 减法: 3
let product = a * b;   // 乘法: 10
let quotient = a / b;   // 除法: 2.5
let remainder = a % b;  // 取余: 1
let power = a ** b;    // 幂运算: 25 (ES2016)

// 自增和自减
let count = 1;
count++;  // 等同于 count = count + 1
count--;  // 等同于 count = count - 1

比较运算符

let x = 10;
let y = 5;
let z = "10";

x > y   // 大于: true
x < y   // 小于: false
x >= y  // 大于等于: true
x <= y  // 小于等于: false
x == y  // 等于: false
x != y  // 不等于: true

// 严格比较（推荐使用）
x === y  // 严格等于: false
x !== y  // 严格不等于: true
x == z   // 等于: true（会进行类型转换）
x === z  // 严格等于: false（不会进行类型转换）

逻辑运算符

let sunny = true;
let warm = false;

sunny && warm  // 与(AND): false（两者都为true才返回true）
sunny || warm  // 或(OR): true（至少一个为true就返回true）
!sunny         // 非(NOT): false（取反）

// 短路求值
let name = "小明";
let user = null;
let displayName = user && user.name || "游客";  // 如果user存在则使用user.name，否则使用"游客"

赋值运算符

let x = 10;
x += 5;  // 等同于 x = x + 5
x -= 3;  // 等同于 x = x - 3
x *= 2;  // 等同于 x = x * 2
x /= 4;  // 等同于 x = x / 4
x %= 3;  // 等同于 x = x % 3

5. 条件语句 - 做决定

条件语句让程序可以根据不同条件执行不同代码。

if语句

let age = 16;

if (age >= 18) {
  console.log("你已成年");
} else {
  console.log("你还未成年");
}
// 输出：你还未成年

if-else if-else语句

let score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}
// 输出：良好

三元运算符

三元运算符是if-else语句的简写形式：

let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status);  // 输出：成年

switch语句

let day = "星期一";

switch (day) {
  case "星期一":
    console.log("开始新的一周");
    break;
  case "星期五":
    console.log("周末快到了");
    break;
  case "星期六":
  case "星期日":
    console.log("周末愉快");
    break;
  default:
    console.log("普通工作日");
}
// 输出：开始新的一周

6. 循环 - 重复执行代码

循环用于多次执行相同的代码块。

for循环

// 打印1到5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 输出：1 2 3 4 5

while循环

let count = 1;
while (count <= 5) {
  console.log(count);
  count++;
}
// 输出：1 2 3 4 5

do-while循环

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// 输出：1 2 3 4 5

for...of循环（遍历数组）

let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
  console.log(fruit);
}
// 输出：苹果 香蕉 橙子

for...in循环（遍历对象属性）

let person = { name: "小明", age: 20, city: "北京" };
for (let key in person) {
  console.log(key + ": " + person[key]);
}
// 输出：
// name: 小明
// age: 20
// city: 北京

7. 函数 - 可重用的代码块

函数是一段可以反复调用的代码块。

函数声明

// 定义函数
function sayHello(name) {
  return "你好，" + name + "！";
}

// 调用函数
let greeting = sayHello("小明");
console.log(greeting);  // 输出：你好，小明！

函数表达式

// 函数表达式
const greet = function(name) {
  return "你好，" + name + "！";
};

console.log(greet("小红"));  // 输出：你好，小红！

箭头函数（ES6新特性）

// 箭头函数写法
const add = (a, b) => {
  return a + b;
};

// 简化写法（单行函数体可以省略return和大括号）
const multiply = (a, b) => a * b;

console.log(add(5, 3));      // 输出：8
console.log(multiply(4, 2));  // 输出：8

默认参数（ES6新特性）

function greet(name = "游客") {
  return "你好，" + name + "！";
}

console.log(greet());        // 输出：你好，游客！
console.log(greet("小明"));  // 输出：你好，小明！

剩余参数（ES6新特性）

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5));  // 输出：15

8. 对象 - 存储相关数据的集合

对象用于存储多个相关的值，每个值都有一个名称（键）。

// 创建对象
let person = {
  name: "小红",
  age: 20,
  isStudent: true,

  // 对象中的方法（函数）
  sayHello: function() {
    return "你好，我是" + this.name;
  }
};

// 访问对象属性
console.log(person.name);      // 输出：小红
console.log(person["age"]);    // 输出：20

// 调用对象方法
console.log(person.sayHello());  // 输出：你好，我是小红

// 修改属性
person.age = 21;
console.log(person.age);  // 输出：21

// 添加新属性
person.city = "北京";
console.log(person.city);  // 输出：北京

对象解构（ES6新特性）

const person = { name: "小明", age: 20, city: "上海" };

// 解构赋值
const { name, age } = person;
console.log(name);  // 输出：小明
console.log(age);   // 输出：20

// 重命名
const { name: fullName, city: location } = person;
console.log(fullName);   // 输出：小明
console.log(location);  // 输出：上海

9. 数组 - 有序数据集合

数组用于存储多个值的有序列表。

// 创建数组
let colors = ["红", "绿", "蓝"];

// 访问数组元素（索引从0开始）
console.log(colors[0]);  // 输出：红
console.log(colors[2]);  // 输出：蓝

// 修改数组元素
colors[1] = "黄";
console.log(colors);  // 输出：["红", "黄", "蓝"]

// 数组长度
console.log(colors.length);  // 输出：3

// 添加元素到数组末尾
colors.push("紫");
console.log(colors);  // 输出：["红", "黄", "蓝", "紫"]

// 删除数组末尾元素
let lastColor = colors.pop();
console.log(lastColor);  // 输出：紫
console.log(colors);     // 输出：["红", "黄", "蓝"]

// 常用数组方法
colors.unshift("黑");   // 在数组开头添加元素
colors.shift();         // 删除数组开头元素
colors.splice(1, 1);    // 从索引1开始删除1个元素
colors.forEach(color => console.log(color));  // 遍历数组

数组解构（ES6新特性）

const numbers = [1, 2, 3, 4, 5];

// 解构赋值
const [first, second, ...rest] = numbers;
console.log(first);  // 输出：1
console.log(second); // 输出：2
console.log(rest);   // 输出：[3, 4, 5]

数组方法

JavaScript数组有许多强大的方法：

const numbers = [1, 2, 3, 4, 5];

// map - 创建一个新数组，其结果是对原数组的每个元素调用函数后的返回值
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // 输出：[2, 4, 6, 8, 10]

// filter - 创建一个新数组，其包含通过所提供函数测试的所有元素
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);  // 输出：[2, 4]

// reduce - 对数组中的每个元素执行一个提供的函数，将其结果汇总为单个返回值
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);  // 输出：15

// find - 返回数组中满足提供的测试函数的第一个元素的值
const found = numbers.find(num => num > 3);
console.log(found);  // 输出：4

// some - 测试数组中是否至少有一个元素通过了提供的函数测试
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // 输出：true

// every - 测试数组中的所有元素是否都通过了提供的函数测试
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // 输出：true

10. 常见错误和调试

常见错误类型

语法错误：代码写法不符合规则

// 缺少右括号
if (x === 5 {
  console.log("x等于5");
}

引用错误：使用未定义的变量

// 变量name未定义
console.log(name);

类型错误：对错误的数据类型执行操作

// 尝试对非函数值使用函数调用
let x = 5;
x();  // TypeError: x is not a function

调试技巧

使用console.log()打印变量值

let result = calculate();
console.log("计算结果:", result);

使用浏览器开发者工具（F12）
- 在Sources面板中设置断点
- 在Console面板中查看输出和错误
- 使用Watch来监视变量值

使用try-catch处理错误

try {
  // 可能出错的代码
  let result = riskyFunction();
} catch (error) {
  // 处理错误
  console.error("发生错误:", error.message);
} finally {
  // 无论是否有错误都会执行
  console.log("处理完成");
}

总结

JavaScript是一门强大而灵活的编程语言，掌握其核心语法是成为前端开发者的基础。本文介绍了JavaScript的基本概念和语法，包括：

变量和数据类型
运算符和表达式
条件语句和循环
函数和作用域
对象和数组
错误处理和调试

随着你对这些基础知识的掌握，你可以进一步学习更高级的JavaScript主题，如异步编程、DOM操作、事件处理、面向对象编程等，并最终构建复杂的Web应用程序。

学习建议

多练习：编程是一项实践技能，多写代码才能掌握
从小项目开始：尝试创建简单的网页交互
查阅文档：遇到不懂的可以查看MDN Web文档
耐心学习：编程需要时间，不要急于求成
解决问题：遇到错误时，尝试自己解决，这是最好的学习方式

1. 什么是JavaScript？​

JavaScript能做什么？​

2. 变量 - 存储数据的盒子​

变量声明和赋值​

变量的三种声明方式​

变量命名规则​

3. 数据类型 - 不同种类的数据​

基本数据类型​

引用数据类型​

检查数据类型​

4. 运算符 - 数据的操作工具​

算术运算符​

比较运算符​

逻辑运算符​

赋值运算符​

5. 条件语句 - 做决定​

if语句​

if-else if-else语句​

三元运算符​

switch语句​

6. 循环 - 重复执行代码​

for循环​

while循环​

do-while循环​

for...of循环（遍历数组）​

for...in循环（遍历对象属性）​

7. 函数 - 可重用的代码块​

函数声明​

函数表达式​

箭头函数（ES6新特性）​

默认参数（ES6新特性）​

剩余参数（ES6新特性）​

8. 对象 - 存储相关数据的集合​

对象解构（ES6新特性）​

9. 数组 - 有序数据集合​

数组解构（ES6新特性）​

数组方法​

10. 常见错误和调试​

常见错误类型​

调试技巧​

总结​

学习建议​

参考资源​

目录