1.1 JavaScript 基础语法

JavaScript 是一种动态、弱类型的编程语言，广泛应用于网页开发、Node.js 后端等领域。

一、JavaScript 简介

特点

  • 动态类型（无需声明类型）
  • 脚本语言（解释执行）
  • 面向对象（基于原型）
  • 函数式编程支持

引入方式

1
2
3
4
5
6
7
<!-- 内联 -->
<script>
    console.log("Hello, World!");
</script>

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

二、变量与常量

1. var（函数作用域，不推荐）

1
2
3
4
5
6
7
8
9
var name = "张三";
var age = 25;

// 可重复声明
var name = "李四"; // 不报错

// 变量提升
console.log(name); // undefined
var name = "张三";

2. let（块级作用域，推荐）

1
2
3
4
5
6
7
8
9
10
11
let name = "张三";
let age = 25;

// 不可重复声明
// let name = "李四"; // 报错

// 块级作用域
{
    let blockScoped = "块内变量";
}
// console.log(blockScoped); // 报错

3. const（块级作用域，常量）

1
2
3
4
5
6
7
8
9
10
11
const PI = 3.14159;

// 必须初始化
const MAX_VALUE = 100;

// 不可重新赋值
// PI = 3.14; // 报错

// 对象属性可以修改
const user = { name: "张三" };
user.name = "李四"; // 可以

三、数据类型

基本类型（7种）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Number（数字）
let num = 42;
let float = 3.14;
let infinity = Infinity;
let notANumber = NaN;

// String（字符串）
let str1 = "双引号";
let str2 = '单引号';
let str3 = `模板字符串 ${num}`;

// Boolean（布尔）
let isTrue = true;
let isFalse = false;

// Undefined（未定义）
let undefinedValue;

// Null（空值）
let nullValue = null;

// Symbol（符号，ES6）
let sym = Symbol("description");

// BigInt（大整数，ES2020）
let bigNum = 9007199254740991n;

引用类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Object（对象）
let obj = { name: "张三", age: 25 };

// Array（数组）
let arr = [1, 2, 3];

// Function（函数）
let func = function() { };

// Date（日期）
let date = new Date();

// RegExp（正则）
let regex = /\d+/;

类型判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// typeof
console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"（历史遗留问题）
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"
console.log(typeof function(){}); // "function"

// instanceof
console.log(arr instanceof Array);     // true
console.log(date instanceof Date);     // true

// Array.isArray
console.log(Array.isArray(arr));       // true

// Object.prototype.toString
Object.prototype.toString.call(null);  // "[object Null]"
Object.prototype.toString.call(arr);   // "[object Array]"

四、运算符

1. 算术运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let num = 10;

+num;    // 10
-num;    // -10
num + 5; // 15
num - 5; // 5
num * 2; // 20
num / 2; // 5
num % 3; // 1 取余
num ** 2;// 100 幂运算

num++;   // 11 自增（先返回后自增）
++num;   // 12 自增（先自增后返回）
num--;   // 11 自减
--num;   // 10

2. 赋值运算符

1
2
3
4
5
6
7
8
let num = 10;

num += 5; // 15 等价于 num = num + 5
num -= 5; // 10 等价于 num = num - 5
num *= 2; // 20
num /= 2; // 10
num %= 3; // 1
num **= 2;// 1

3. 比较运算符

1
2
3
4
5
6
7
8
9
console.log(10 == "10");  // true 相等（类型转换）
console.log(10 === "10"); // false 严格相等
console.log(10 != "10");  // false 不等
console.log(10 !== "10"); // true 严格不等

console.log(10 > 5);      // true
console.log(10 >= 10);    // true
console.log(10 < 5);      // false
console.log(10 <= 10);    // true

4. 逻辑运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a = true, b = false;

a && b;   // false 逻辑与（两者都为 true 才返回 true）
a || b;   // true  逻辑或（任一为 true 就返回 true）
!a;       // false 逻辑非

// 短路求值
true && console.log("执行"); // 执行
false && console.log("不执行"); // 不执行

true || console.log("不执行"); // 不执行
false || console.log("执行"); // 执行

// 空值合并（ES11）
let value = null ?? "默认值"; // "默认值"
let value2 = 0 ?? "默认值";   // 0（0 不是 null 或 undefined）

5. 三元运算符

1
2
let age = 18;
let type = age >= 18 ? "成年" : "未成年";

五、条件语句

1. if-else

1
2
3
4
5
6
7
8
9
10
11
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

2. switch

1
2
3
4
5
6
7
8
9
10
11
12
let day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    default:
        console.log("其他");
}

3. 三元运算符（简化 if-else）

1
2
let age = 18;
let message = age >= 18 ? "成年" : "未成年";

六、循环语句

1. for 循环

1
2
3
4
5
6
7
8
9
// 基本 for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// 反向循环
for (let i = 5; i > 0; i--) {
    console.log(i);
}

2. while 循环

1
2
3
4
5
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

3. do-while 循环

1
2
3
4
5
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

4. for…in（遍历对象属性）

1
2
3
4
5
6
let obj = { name: "张三", age: 25 };

for (let key in obj) {
    console.log(key, obj[key]);
}
// 输出: name 张三, age 25

5. for…of（遍历数组/字符串）

1
2
3
4
5
6
let arr = [1, 2, 3];

for (let item of arr) {
    console.log(item);
}
// 输出: 1, 2, 3

七、类型转换

隐式转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 字符串拼接
let num = 10;
let str = "20";
console.log(num + str);  // "1020"

// 数字运算
console.log("10" - 5);   // 5
console.log("10" * 2);   // 20
console.log("10" / 2);   // 5

// 布尔转换
console.log(!!0);        // false
console.log(!!"");       // false
console.log(!!null);     // false
console.log(!!undefined);// false
console.log(!!"hello");  // true
console.log(!!10);       // true

显式转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 转字符串
String(123);           // "123"
(123).toString();      // "123"
123 + "";              // "123"

// 转数字
Number("123");         // 123
Number("abc");         // NaN
parseInt("123");       // 123
parseInt("12.5");      // 12
parseFloat("12.5");    // 12.5

// 转布尔
Boolean(0);            // false
Boolean("hello");      // true

八、字符串常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let str = "Hello, World!";

// 长度
str.length;               // 13

// 大小写
str.toUpperCase();        // "HELLO, WORLD!"
str.toLowerCase();        // "hello, world!"

// 查找
str.indexOf("World");     // 7
str.lastIndexOf("o");     // 8
str.includes("World");    // true

// 截取
str.slice(0, 5);          // "Hello"
str.slice(-6);            // "World!"
str.slice(0, -1);         // "Hello, World"

str.substring(0, 5);      // "Hello"（与 slice 类似，不支持负数）

str.substr(0, 5);         // "Hello"（已废弃）

// 替换
str.replace("World", "JavaScript"); // "Hello, JavaScript!"
str.replace(/o/g, "a");             // "Hella, Warld!"

// 分割
str.split(",");           // ["Hello", " World!"]

// 去空格
str.trim();              // 去除首尾空格
str.trimStart();         // 去除首部空格
str.trimEnd();           // 去除尾部空格

// 字符
str[0];                  // "H"
str.charAt(0);           // "H"
str.charCodeAt(0);       // 72（ASCII 码）

九、数值常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let num = 3.14159;

// 舍入
Math.round(num);         // 3（四舍五入）
Math.floor(num);         // 3（向下取整）
Math.ceil(num);          // 4（向上取整）
Math.trunc(num);         // 3（直接取整数部分）

// 绝对值
Math.abs(-10);           // 10

// 最大值/最小值
Math.max(1, 2, 3);       // 3
Math.min(1, 2, 3);       // 1

// 随机数
Math.random();           // [0, 1) 随机数
Math.floor(Math.random() * 10); // 0-9 随机整数

// 幂运算
Math.pow(2, 3);          // 8（2 的 3 次方）
Math.sqrt(16);           // 4（平方根）

// 判断
Number.isInteger(10);    // true
Number.isNaN(NaN);       // true
Number.isFinite(10);     // true

// toFixed
num.toFixed(2);          // "3.14"

十、注释

1
2
3
4
5
6
7
8
9
10
// 单行注释

/**
 * 多行注释
 * 可以写多行
 */

// TODO: 待办事项
// FIXME: 需要修复
// NOTE: 注意事项

总结

JavaScript 基础语法包括变量、数据类型、运算符、条件语句、循环语句等。掌握这些基础知识是深入学习 JavaScript 的前提。