JavaScript 语法

JavaScript 语法

作为程序开发人员，我们常说「语言是相通的!」，就是说当我们深入理解了一门语言之后，例如，理解了 Java 语言之后，再去学习其他语言，是一件比较容易的事情。同样，在之前介绍了 Java 语法之后，再介绍 JavaScript 语法，就会相当简单。

JavaScript 与 Java 在语法上存在不少相似之处。例如，JavaScript 同样对大小写敏感，也使用分号作为语句的结束标志，并且在代码块的组织上同样依赖大括号进行划分。除此之外，两种语言在部分关键字和流程控制结构的设计上也具有较高的相似性，这使得具有一定 Java 背景的开发者能够更快速地适应 JavaScript 的基本语法结构。

本章将系统地讲解变量声明、数据类型、运算符、对象、函数、数组、控制语句等核心编程概念，以及现代化语法特性。

---

变量声明 (Variable Declaration)

JavaScript 是一种弱类型语言，声明变量时无需指定其类型，而变量的类型由所赋值的类型动态决定。在 JavaScript 中，可以使用 var、let 和const关键字声明变量，声明时也可直接进行赋值。

var 是传统的函数作用域变量声明方式，存在变量提升；let 用于声明可重新赋值的块级作用域变量；const 则用于声明不可重新赋值的块级作用域常量。在初始化要求上，var 和let可不立即赋值，而const必须在声明时指定初始值。无论使用哪种关键字，变量的具体类型都由赋值时右侧值的类型在运行时动态确定。

var name = "开创者教程";             // 使用 var 声明变量，不推荐
var top, right, bottom, left = 100; // 可以不赋值，默认为 undefined
let url = "www.kaicz.com";          // 使用 let 声明变量，推荐使用
const PI = 3.14;                    // 使用 const 声明常量
// PI = 3.15;                       // 报错：不能重新赋值

提示：默认使用 const，只有当你知道变量需要被重新赋值时才使用 let。尽量避免使用 var。

---

数据类型 (Data Types)

JavaScript 没有显式的类型声明机制——事实上，在其保留字列表中，并不存在type或define这类用于类型定义的关键字。JavaScript 共支持 7 种基本数据类型，并在运行时自动处理类型之间的转换。

✅ 我们通常将这 7 种类型称为 JavaScript 的 “基本类型” 或 “原始类型”，具体如下：

✅ 可以使用typeof运算符来获取变量或值的数据类型：

typeof 42;           // 输出："number"，变量值不能使用引号
typeof 'hello';      // 输出："string"，变量值需要添加单引号或双引号
typeof true;         // 输出："boolean"，变量值不能使用引号
typeof undefined;    // 输出："undefined"，变量值不能使用引号
typeof null;         // 输出："object" (这是一个历史悠久的bug)
typeof {};           // 输出："object"，变量值需要添加花括号
typeof [];           // 输出："object"，变量值需要添加中括号
typeof function(){}; // 输出："function"，变量值需要添加 function 关键字，花括号，括号等

注意：null 的类型会被误判为 object，这是 JavaScript 语言设计中的一个历史遗留问题。

---

运算符 (Operators)

在 JavaScript 中，运算符是用于执行值运算（如算术、比较、逻辑操作）并返回一个结果的特殊符号。

✅ 常见的运算符类型包括：

• 算术运算符: +, -, *, /, %(取余), **(幂运算), ++, --
• 赋值运算符: =, +=, -=, *=, /=
• 比较运算符: ==(宽松相等), ===(严格相等，推荐), !=, !==, >, <, >=, <=
• 逻辑运算符: &&(与), ||(或), !(非)
• 三元运算符 (条件运算符): condition ? exprIfTrue : exprIfFalse

✅ 下面是一些运算符的使用实例：

let age = 8 + 5;                                     // 算术运算符
age += 5;                                            // 赋值运算符
let isOver18 = age >= 18;                            // 比较运算符
let isFemaleAdult = age >= 18 && gender == 'female'; // 逻辑运算符
let ageGroup = age >= 18 ? "adult" : "child";        // 三元运算符 (条件运算符)

注意：JavaScript 中的==是宽松相等运算符，会在比较前进行类型转换，而===是严格相等运算符，不会进行类型转换，推荐使用===以避免潜在的类型转换问题。

---

对象 (Objects)

对象作为一种复合值，其本质是一个动态的、可变的键值对集合。每个对象都由一系列属性构成，而每个属性又由一个唯一的键（也称为属性名，通常是字符串或 Symbol）和一个对应的值（可以是任何数据类型，包括其他对象或函数）所组成。

这种结构使得对象成为表示现实世界中复杂实体的理想工具。例如，可以用一个对象来描述一个人，其属性可以包括姓名（字符串）、年龄（数字）、爱好（数组）、地址（另一个嵌套对象）以及打招呼的方法（函数）。通过点符号（object.key）或方括号语法（object['key']），我们可以高效地访问、修改、添加或删除这些属性，从而灵活地操作数据。

✅ 创建对象的常用方法有两种：

// 使用对象字面量创建对象
let website = {
    name: "开创者教程",
    url: "www.kaicz.com",
    desc: "成长路上，我们陪你一起进步！"
};

// 使用 Object 构造函数创建对象
let website = new Object();
website.name = "开创者教程";
car.url = "www.kaicz.com";
car.desc = "成长路上，我们陪你一起进步！";

注意：JavaScript 中的对象是动态的，可以在创建后随时添加、修改或删除属性。

---

函数 (Functions)

函数是 JavaScript 中的第一类对象，这意味着函数可以像其他对象一样被创建、传递和操作。函数的定义可以通过函数声明、函数表达式、箭头函数和构造函数 (不推荐)等多种方式实现。

1. 函数声明 (Function Declaration)

使用function关键字开头，具有 “提升” 特性，可以在定义前被调用。

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet('Alice')); // 输出: Hello, Alice!

2. 函数表达式 (Function Expression)

将一个函数赋值给一个变量。不存在提升现象，必须在定义后使用。

const square = function(x) {
    return x * x;
};
console.log(square(5)); // 输出: 25

3. 箭头函数 (Arrow Function) (ES6)

提供更简洁的语法，并且不绑定自己的this关键字。

const square = function(x) {
    return x * x;
};
console.log(square(5)); // 输出: 25

4. 构造函数 (不推荐)

使用Function构造函数，但可读性和性能较差，很少使用。

const add = new Function('a', 'b', 'return a + b');

注意：函数可以作为参数传递给其他函数（回调函数），也可以作为返回值返回。

---

数组 (Arrays)

数组是一种用于在单个变量中有序存储多个值的数据集合。每个值称为一个元素，每个元素通过一个从0开始的数字索引来标识其位置。与对象存储键值对的方式不同，数组专门用于处理有序的数据集合。

✅ 数组既可以通过方括号[]字面量创建，也可以通过Array构造函数创建。

1. 数组字面量 (最常用)

使用方括号 []，直接在内部添加元素，用逗号分隔。

let fruits = ['apple', 'banana', 'orange'];     // 字符串数组
let numbers = [1, 2, 3, 4, 5];                  // 数字数组
let mixed = [1, 'hello', true, {name: 'John'}]; // 混合类型数组
let empty = [];                                 // 空数组

2. 使用 Array 构造函数

使用 new Array()，可以传入一个数字参数来创建指定长度的空数组，或者传入多个参数来创建包含这些元素的数组。

let arr1 = new Array();         // 空数组
let arr2 = new Array(5);        // 创建长度为 5 的空数组
let arr3 = new Array(1, 2, 3);  // 创建包含 1, 2, 3 的数组

✅ 下面是数组的操作方式：

let arr = [1, 2, 3];

arr.push(4); // 末尾添加 [1,2,3,4]
arr.pop(); // 移除末尾元素 [1,2,3]
arr.shift(); // 移除开头元素 [2,3]
arr.unshift(0); // 开头添加 [0,2,3]

// 高阶函数 (非常常用)
arr.map(item => item * 2); // [0, 4, 6] 映射新数组
arr.filter(item => item > 2); // [3] 过滤数组
arr.find(item => item > 1); // 2 查找元素
arr.reduce((acc, curr) => acc + curr, 0); // 5 累加器
arr.forEach(item => console.log(item)); // 遍历

注意：JavaScript 中的数组是动态的，可以随时添加或删除元素，并且可以包含不同类型的元素。

---

控制语句 (Control Statements)

控制语句是编程中用于支配程序执行流程的关键结构，主要分为条件语句、循环语句和跳转语句三类。

• 条件语句：(如if, else, switch) 根据逻辑判断决定代码执行分支；
• 循环语句：(如for, while, do-while) 通过特定条件控制代码块的重复执行；
• 跳转语句 (如break, continue, return) 实现程序执行点的无条件转移。这些结构共同构成了程序逻辑的基础框架。

✅ 下面是一些常见控制语句 (条件语句) 的示例：

let age = 20;
if (age < 18) {
    console.log("未成年");
} else if (age >= 18 && age < 65) {
    console.log("成年人");
} else {
    console.log("老年人");
}

✅ 下面是一些常见控制语句 (循环语句) 的示例：

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

注意：控制语句中的条件表达式通常会被强制转换为布尔值，以决定代码块的执行与否。

---

现代化语法特性 (Modern Syntax Features)

随着 JavaScript 语言的不断发展，现代化语法特性如：箭头函数、模板字符串、解构赋值、默认参数、展开运算符等被引入，极大地提升了代码的简洁性和可读性。

✅ 下面是一些现代化语法特性的示例：

// 箭头函数
const add = (a, b) => a + b;

// 模板字符串
const name = "开创者教程";
const greeting = `欢迎来到 ${name}！`;

// 解构赋值
const [x, y] = [1, 2];
const {title, url} = {title : "开创者教程", url: "www.kaicz.com"};

// 默认参数
function greet(name = "访客") {
    return `Hello, ${name }!`;
}
console.log(greet()); // 输出: Hello, 访客!
console.log(greet('Alice')); // 输出: Hello, Alice!

// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3}; // {a: 1, b: 2, c: 3}

注意：这些现代化语法特性大多在 ES6 及更高版本中引入，建议在支持的环境中优先使用。

---

---