跳到主要内容

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提供三种声明变量的方式:varletconst

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

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

// const - 声明常量,值不可更改
const PI = 3.14159;
// PI = 3.14; // 错误! 常量不能重新赋值
变量声明注意事项
  • var有变量提升问题,作用域是函数级的
  • letconst是块级作用域,没有变量提升
  • 优先使用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的基本语法,包括:

  • 变量声明:varletconst
  • 数据类型:原始类型和引用类型
  • 运算符:算术、赋值、比较和逻辑运算符
  • 条件语句:if...elseswitch和三元运算符
  • 循环语句:forfor...offor...inwhiledo...while
  • 函数:函数声明、函数表达式和箭头函数
  • 作用域:全局作用域、函数作用域和块级作用域

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

练习题

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

扩展阅读

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