跳到主要内容

JavaScript 语法

JavaScript是一门灵活而强大的编程语言，掌握其基本语法是成为前端开发者的第一步。本文将介绍JavaScript的核心语法规则，帮助初学者打下坚实的基础。

JavaScript 基础结构​

JavaScript代码可以直接嵌入HTML文件中，也可以作为单独的.js文件引入。

html
<!-- 内嵌JavaScript -->
<script>
  // JavaScript代码
  console.log("Hello, World!");
</script>

<!-- 引入外部JavaScript文件 -->
<script src="script.js"></script>

语句和注释​

JavaScript代码由一系列语句组成，每个语句通常以分号(;)结尾。

javascript
let name = "小明";  // 声明变量
console.log(name);  // 打印变量

JavaScript支持两种注释方式：

javascript
// 单行注释

/*
  多行
  注释
*/
编码习惯

虽然JavaScript中的分号在很多情况下是可选的，但养成添加分号的习惯可以避免一些潜在问题。

变量声明​

JavaScript提供三种声明变量的方式：var、let和const。

javascript
// var - 传统变量声明(现代开发中通常避免使用)
var age = 25;

// let - 声明可以改变值的变量
let score = 90;
score = 95;  // 可以重新赋值

// const - 声明常量，值不可更改
const PI = 3.14159;
// PI = 3.14;  // 错误! 常量不能重新赋值
变量声明注意事项
  • var有变量提升问题，作用域是函数级的
  • let和const是块级作用域，没有变量提升
  • 优先使用const，需要修改的变量才使用let

数据类型​

JavaScript有七种基本数据类型：

原始类型​

javascript
// 数值型 - 包括整数和浮点数
let count = 42;
let price = 19.99;

// 字符串 - 文本数据
let greeting = "你好";
let message = '世界';
let template = `${greeting}, ${message}!`;  // 模板字符串

// 布尔值 - true或false
let isActive = true;
let isLoggedIn = false;

// undefined - 未赋值的变量
let userName;
console.log(userName);  // 输出: undefined

// null - 表示空值或不存在
let selectedItem = null;

// Symbol - ES6引入的唯一标识符
let uniqueId = Symbol('id');

// BigInt - 大整数
let bigNumber = 1234567890123456789012345n;

引用类型​

javascript
// 对象
let person = {
  name: "张三",
  age: 30,
  isStudent: false
};
console.log(person.name);  // 输出: 张三

// 数组
let colors = ["红", "绿", "蓝"];
console.log(colors[0]);  // 输出: 红

// 函数
function greet() {
  return "你好!";
}
console.log(greet());  // 输出: 你好!

运算符​

JavaScript包含多种运算符类型：

算术运算符​

javascript
let a = 10;
let b = 3;

console.log(a + b);  // 加法: 13
console.log(a - b);  // 减法: 7
console.log(a * b);  // 乘法: 30
console.log(a / b);  // 除法: 3.3333...
console.log(a % b);  // 取余: 1
console.log(a ** b); // 幂运算: 1000 (10的3次方)

// 递增和递减
let count = 5;
count++;  // 相当于 count = count + 1
console.log(count);  // 输出: 6
count--;  // 相当于 count = count - 1
console.log(count);  // 输出: 5

赋值运算符​

javascript
let x = 10;
x += 5;  // 相当于 x = x + 5, 结果是 15
x -= 3;  // 相当于 x = x - 3, 结果是 12
x *= 2;  // 相当于 x = x * 2, 结果是 24
x /= 4;  // 相当于 x = x / 4, 结果是 6
x %= 4;  // 相当于 x = x % 4, 结果是 2

比较运算符​

javascript
let a = 5;
let b = "5";

console.log(a == b);   // 相等(值): true（类型转换后比较）
console.log(a === b);  // 严格相等(值和类型): false
console.log(a != b);   // 不相等: false
console.log(a !== b);  // 严格不相等: true
console.log(a > 3);    // 大于: true
console.log(a <= 5);   // 小于等于: true
注意类型比较

在JavaScript中，建议始终使用严格相等(===)和严格不相等(!==)，避免自动类型转换带来的问题。

逻辑运算符​

javascript
let isAdult = true;
let hasPermission = false;

console.log(isAdult && hasPermission);  // 逻辑与: false
console.log(isAdult || hasPermission);  // 逻辑或: true
console.log(!isAdult);  // 逻辑非: false

// 短路求值
let user = null;
let name = user && user.name;  // 如果user为null，不会尝试访问user.name
console.log(name);  // 输出: null

let defaultName = user || "游客";
console.log(defaultName);  // 输出: "游客"

条件语句​

条件语句用于根据不同条件执行不同的代码块。

if...else语句​

javascript
let hour = 14;

if (hour < 12) {
  console.log("早上好");
} else if (hour < 18) {
  console.log("下午好");
} else {
  console.log("晚上好");
}
// 输出: "下午好"

switch语句​

javascript
let day = "星期二";
let activity;

switch (day) {
  case "星期一":
    activity = "学习JavaScript";
    break;
  case "星期二":
  case "星期四":
    activity = "学习HTML和CSS";
    break;
  case "星期三":
    activity = "项目练习";
    break;
  default:
    activity = "休息";
}

console.log(activity);  // 输出: "学习HTML和CSS"

三元运算符​

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

循环语句​

循环语句用于多次执行同一块代码。

for循环​

javascript
// 基本for循环
for (let i = 0; i < 5; i++) {
  console.log(`计数: ${i}`);
}
// 输出: 计数: 0, 计数: 1, 计数: 2, 计数: 3, 计数: 4

// 遍历数组
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for...of循环 (ES6)​

javascript
// 遍历数组
let colors = ["红", "绿", "蓝"];
for (let color of colors) {
  console.log(color);
}

// 遍历字符串
let name = "张明";
for (let char of name) {
  console.log(char);
}

for...in循环​

javascript
// 遍历对象的属性
let person = {
  name: "李华",
  age: 28,
  job: "开发者"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

while循环​

javascript
let count = 0;
while (count < 3) {
  console.log(`while循环计数: ${count}`);
  count++;
}

do...while循环​

javascript
let i = 0;
do {
  console.log(`do-while循环计数: ${i}`);
  i++;
} while (i < 3);

函数​

函数是JavaScript中的基本构建块，用于封装可重复使用的代码。

函数声明​

javascript
// 基本函数声明
function greet(name) {
  return `你好，${name}！`;
}

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

// 带默认参数的函数(ES6)
function welcome(name = "游客") {
  return `欢迎，${name}！`;
}

console.log(welcome());  // 输出: 欢迎，游客！
console.log(welcome("小王"));  // 输出: 欢迎，小王！

函数表达式​

javascript
// 函数表达式
const square = function(x) {
  return x * x;
};

console.log(square(4));  // 输出: 16

// 箭头函数(ES6)
const cube = x => x * x * x;

console.log(cube(3));  // 输出: 27

// 多参数箭头函数
const add = (a, b) => a + b;
console.log(add(5, 3));  // 输出: 8

// 多行箭头函数
const calculateArea = (width, height) => {
  const area = width * height;
  return area;
};
函数声明vs函数表达式

函数声明会被提升，可以在声明前调用；而函数表达式必须在声明后才能调用。

作用域​

JavaScript有三种作用域类型：

1. 全局作用域​

javascript
// 全局变量
let globalVar = "我是全局变量";

function showGlobal() {
  console.log(globalVar);  // 可以访问全局变量
}

showGlobal();  // 输出: "我是全局变量"

2. 函数作用域​

javascript
function test() {
  let localVar = "我是局部变量";  // 函数内的局部变量
  console.log(localVar);
}

test();  // 输出: "我是局部变量"
// console.log(localVar);  // 错误! 不能在函数外部访问局部变量

3. 块级作用域 (ES6)​

javascript
{
  let blockVar = "我是块级变量";  // 块级作用域内的变量
  const blockConst = "我是块级常量";
  console.log(blockVar);  // 输出: "我是块级变量"
}
// console.log(blockVar);  // 错误! 不能在块外访问块级变量

实际案例：简单计算器​

下面通过一个简单计算器的例子，综合运用JavaScript的语法知识：

javascript
function calculator() {
  // 获取用户输入
  const operation = prompt("请选择运算类型：+、-、*、/");
  const num1 = parseFloat(prompt("请输入第一个数字:"));
  const num2 = parseFloat(prompt("请输入第二个数字:"));
  
  let result;
  
  // 检查输入是否为有效数字
  if (isNaN(num1) || isNaN(num2)) {
    return "请输入有效的数字!";
  }
  
  // 根据操作类型进行计算
  switch (operation) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      if (num2 === 0) {
        return "错误: 不能除以零!";
      }
      result = num1 / num2;
      break;
    default:
      return "请输入有效的运算符!";
  }
  
  // 返回计算结果
  return `${num1} ${operation} ${num2} = ${result}`;
}

// 调用计算器函数
const calculationResult = calculator();
console.log(calculationResult);

总结​

本文介绍了JavaScript的基本语法，包括：

  • 变量声明：var、let和const
  • 数据类型：原始类型和引用类型
  • 运算符：算术、赋值、比较和逻辑运算符
  • 条件语句：if...else、switch和三元运算符
  • 循环语句：for、for...of、for...in、while和do...while
  • 函数：函数声明、函数表达式和箭头函数
  • 作用域：全局作用域、函数作用域和块级作用域

掌握这些基础语法是学习JavaScript的第一步，为进一步学习JavaScript的高级特性和应用开发打下基础。

练习题​

  1. 编写一个函数，接收一个数组作为参数，返回数组中所有偶数的和。
  2. 使用三种不同的循环方式遍历一个数组，并打印每个元素。
  3. 创建一个对象，代表一个学生，包含姓名、年龄和成绩属性，然后编写一个函数来判断该学生是否及格(成绩>=60)。

扩展阅读​

继续学习和实践这些语法规则，很快你就能熟练掌握JavaScript编程！