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的高级特性和应用开发打下基础。
练习题
- 编写一个函数,接收一个数组作为参数,返回数组中所有偶数的和。
- 使用三种不同的循环方式遍历一个数组,并打印每个元素。
- 创建一个对象,代表一个学生,包含姓名、年龄和成绩属性,然后编写一个函数来判断该学生是否及格(成绩>=60)。
扩展阅读
继续学习和实践这些语法规则,很快你就能熟练掌握JavaScript编程!