JavaScript 语法

栏目： Javascript 发布时间：2024-11-04

本文将涵盖JavaScript的基本结构、变量、数据类型、运算符、条件语句、循环、函数等核心概念。

一、JavaScript 基本结构

JavaScript代码通常嵌入在HTML文档的<script>标签中，或者作为外部文件通过<script src="file.js"></script>引入。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <script>
        // JavaScript代码写在这里
        console.log("Hello, World!");
    </script>
</body>
</html>

二、变量和数据类型

1、变量

变量用于存储数据。在JavaScript中，使用var、let或const关键字声明变量。

var message = "Hello, World!";
let count = 10;
const PI = 3.14159;

2、数据类型

JavaScript支持多种数据类型，包括：

字符串（String）
数字（Number）
布尔值（Boolean）
对象（Object）
数组（Array）
函数（Function）
null
undefined

let isTrue = true; // 布尔值
let num = 42; // 数字
let str = "Hello"; // 字符串
let obj = {name: "Alice", age: 25}; // 对象
let arr = [1, 2, 3, 4, 5]; // 数组

三、运算符

运算符用于执行数学计算、赋值、比较等操作。

let a = 5;
let b = 10;

// 算术运算符
let sum = a + b; // 加法
let diff = b - a; // 减法
let product = a * b; // 乘法
let quotient = b / a; // 除法
let remainder = b % a; // 取余

// 赋值运算符
a += 5; // 等同于 a = a + 5

// 比较运算符
let isEqual = (a === b); // 严格等于（值和类型都相等）
let isNotEqual = (a !== b); // 严格不等于

四、条件语句

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

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

// 使用三元运算符
let status = (age >= 18) ? "adult" : "minor";
console.log(`You are a ${status}.`);

五、循环

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

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

// while循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do...while循环
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

六、函数

函数是可重用的代码块，用于执行特定任务。

// 函数声明
function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("Alice");

// 函数表达式
const add = function(a, b) {
    return a + b;
};

console.log(add(2, 3)); // 输出: 5

// 箭头函数
const multiply = (x, y) => x * y;

console.log(multiply(4, 5)); // 输出: 20

七、总结

以上介绍了JavaScript的基础语法，包括变量声明、数据类型、运算符、条件语句、循环和函数。这些是构建JavaScript应用的基础。随着学习的深入，你将接触到更多高级特性，如对象字面量、数组方法、ES6+新特性（如模板字符串、解构赋值、类）、异步编程（如Promises、async/await）等。

本文地址：https://www.tides.cn/p_js-syntax

标签：前端教程