1.1 JavaScript 基础语法

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

一、JavaScript 简介

特点

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

引入方式

html

<!-- 内联 -->
<script>
    console.log("Hello, World!");
</script>

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

二、变量与常量

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

javascript

var name = "张三";
var age = 25;

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

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

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

javascript

let name = "张三";
let age = 25;

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

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

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

javascript

const PI = 3.14159;

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

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

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

三、数据类型

基本类型（7种）

javascript

// 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;

引用类型

javascript

// 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+/;

类型判断

javascript

// 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. 算术运算符

javascript

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. 赋值运算符

javascript

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. 比较运算符

javascript

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. 逻辑运算符

javascript

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. 三元运算符

javascript

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

五、条件语句

1. if-else

javascript

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

javascript

let day = "Monday";

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

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

javascript

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

六、循环语句

1. for 循环

javascript

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

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

2. while 循环

javascript

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

3. do-while 循环

javascript

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

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

javascript

let obj = { name: "张三", age: 25 };

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

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

javascript

let arr = [1, 2, 3];

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

七、类型转换

隐式转换

javascript

// 字符串拼接
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

显式转换

javascript

// 转字符串
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

八、字符串常用方法

javascript

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 码）

九、数值常用方法

javascript

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"

十、注释

javascript

// 单行注释

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

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

总结

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

1.1 JavaScript 基础语法 ​

一、JavaScript 简介 ​

特点 ​

引入方式 ​

二、变量与常量 ​

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

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

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

三、数据类型 ​

基本类型（7种） ​

引用类型 ​

类型判断 ​

四、运算符 ​

1. 算术运算符 ​

2. 赋值运算符 ​

3. 比较运算符 ​

4. 逻辑运算符 ​

5. 三元运算符 ​

五、条件语句 ​

1. if-else ​

2. switch ​

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

六、循环语句 ​

1. for 循环 ​

2. while 循环 ​

3. do-while 循环 ​

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

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

七、类型转换 ​

隐式转换 ​

显式转换 ​

八、字符串常用方法 ​

九、数值常用方法 ​

十、注释 ​

总结 ​

1.1 JavaScript 基础语法

一、JavaScript 简介

特点

引入方式

二、变量与常量

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

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

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

三、数据类型

基本类型（7种）

引用类型

类型判断

四、运算符

1. 算术运算符

2. 赋值运算符

3. 比较运算符

4. 逻辑运算符

5. 三元运算符

五、条件语句

1. if-else

2. switch

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

六、循环语句

1. for 循环

2. while 循环

3. do-while 循环

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

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

七、类型转换

隐式转换

显式转换

八、字符串常用方法

九、数值常用方法

十、注释

总结