JavaScript 学习文档（二）

1.JavaScript 基础语法

目录

1.JavaScript 基础语法

变量声明：给数据贴上“标签”

三种声明方式：let、const、var

数据类型：容器里能装什么？

1. 基本类型（值类型）：存储的是实际的值

2. 引用类型：存储的是对内存中对象的引用（地址）

3. 基本类型包装对象

4. 类型检测：如何知道一个值是什么类型？

5. 类型转换：数据之间的“变身”术

隐式转换（自动转换）

显式转换（手动转换）

6. ToPrimitive 抽象操作（对象转原始类型）

运算符：对数据进行操作的符号

1. 算术运算符

2. 比较运算符

3. 逻辑运算符

4. 位运算符（直接操作整数在内存中的二进制位）

5. 赋值运算符与复合赋值

控制流：决定代码的执行顺序

1. 条件语句：根据条件选择执行不同的代码

iif…else if…else 语句

三元运算符（条件运算符）：简化版的if…else

2. 循环与迭代：重复执行某段代码

基本循环

for循环：适合已知循环次数的情况

while循环：适合不确定循环次数，只关注循环条件的情况

do…while循环：至少会执行一次代码块

循环控制：break 和 continue

break、continue 和 return 的区别

高级迭代循环

for…in循环：遍历对象的可枚举属性（包括原型链上的）

for…of循环：遍历可迭代对象（数组、字符串、Map、Set等）的值

for…in vs for…of

函数基础：可重复使用的代码块

1. 函数声明与函数表达式

函数声明：会提升（可以在声明前调用）

函数表达式：不会提升，必须先定义后调用

箭头函数（ES6新增）：更简洁的函数表达式语法

函数声明提升 vs 函数表达式不提升

2. 箭头函数

无参数：必须使用圆括号

单个参数：可以省略圆括号

多个参数：必须使用圆括号

函数体有多条语句：必须使用大括号

返回对象字面量：需要用小括号包裹对象

箭头函数的this指向问题

3. 参数：传递给函数的输入

默认参数（ES6）

剩余参数（ES6）：收集不定数量的参数到一个数组中

命名参数（通过对象解构实现）

4. 返回值与递归

递归的基本要素

基准条件（Base Case）

递归条件（Recursive Case）

递归的注意事项

基本代码规范与注释风格

1. 代码风格建议

2. 注释风格

单行注释示例

多行注释示例

JSDoc风格注释示例（推荐用于函数）

注意事项

变量声明：给数据贴上“标签”

变量就像一个容器或一个标签，用来存储各种信息（数字、文字、复杂对象等），方便在程序中反复使用和修改。

声明一个变量，就像创建一个带名字的盒子，你可以在里面放东西，也可以随时更换。

三种声明方式：let、const、var

默认使用 const，当需要重新赋值时再使用 let，尽量避免使用 var。

这样能避免许多潜在的作用域问题，让代码更安全、更易读。

数据类型：容器里能装什么？

JavaScript 的数据类型分为两大类：基本类型和引用类型。

这决定了数据在内存中如何存储和操作。

1. 基本类型（值类型）：存储的是实际的值

2. 引用类型：存储的是对内存中对象的引用（地址）

3. 基本类型包装对象

当你尝试对基本类型值（如字符串、数字、布尔值）调用方法或访问属性时，JavaScript 会临时创建一个包装对象，操作完成后立即销毁。

这是为了方便地操作基本类型。

let str = "hello";

console.log(str.length); // 5

// 临时创建了 String 包装对象，访问了 length 属性，然后销毁

let num = 123.456;

console.log(num.toFixed(2)); // "123.46"

// 临时创建了 Number 包装对象，调用了 toFixed() 方法，然后销毁

let bool = true;

console.log(bool.toString()); // "true"

// 临时创建了 Boolean 包装对象，调用了 toString() 方法，然后销毁

⚠️ 注意：不要手动创建包装对象（如 new String("text")），这会导致类型判断混乱（typeof new String("text") 返回 "object"，而 typeof "text" 返回 "string"）。直接使用基本类型值即可，JavaScript 会自动处理包装。

4. 类型检测：如何知道一个值是什么类型？

类型检测示例

let num = 42;

let str = "Hello";

let bool = true;

let und = undefined;

let nul = null;

let obj = {};

let arr = [];

let func = function(){};

let date = new Date();

typeof

console.log(typeof num); // "number"

console.log(typeof str); // "string"

console.log(typeof bool); // "boolean"

console.log(typeof und); // "undefined"

console.log(typeof nul); // "object" (注意这个历史遗留问题)

console.log(typeof obj); // "object"

console.log(typeof arr); // "object"

console.log(typeof func); // "function"

instanceof

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

console.log(obj instanceof Object); // true

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

Object.prototype.toString.call() 

console.log(Object.prototype.toString.call(num)); // "[object Number]"

console.log(Object.prototype.toString.call(str)); // "[object String]"

console.log(Object.prototype.toString.call(bool)); // "[object Boolean]"

console.log(Object.prototype.toString.call(und)); // "[object Undefined]"

console.log(Object.prototype.toString.call(nul)); // "[object Null]"

console.log(Object.prototype.toString.call(arr)); // "[object Array]"

console.log(Object.prototype.toString.call(obj)); // "[object Object]"

console.log(Object.prototype.toString.call(func)); // "[object Function]"

console.log(Object.prototype.toString.call(date)); // "[object Date]"

5. 类型转换：数据之间的“变身”术

隐式转换（自动转换）

这就像一个“自动翻译器”，在不同类型的值进行运算或比较时，它会自动将它们转换为同一类型。

但有时会“翻译错”，导致意想不到的结果。

显式转换（手动转换）

这就像“手动指定翻译目标”，更可控、更安全。

隐式转换示例

console.log(5 + '5'); // "55" (字符串拼接)

console.log(5 – '5'); // 0 (数值相减)

console.log('10' > '2'); // false (字符串比较，按字典序)

console.log(10 > '2'); // true (数字比较，字符串转数字)

console.log(null == undefined); // true

console.log(0 == false); // true

console.log('' == false); // true

显式转换示例

console.log(String(123)); // "123"

console.log(Number('123')); // 123

console.log(Boolean('hello')); // true

console.log(parseInt('123abc')); // 123

console.log(parseFloat('123.45abc')); // 123.45

console.log((123).toString()); // "123"

6. ToPrimitive 抽象操作（对象转原始类型）

当对象需要转换为原始类型（数字、字符串、布尔）时，JavaScript 会调用内部的 ToPrimitive 抽象操作。

其规则如下：

如果对象有 Symbol.toPrimitive 方法，优先调用该方法。

否则，根据预期类型（hint）：

• Hint "number"（如数学运算）

• Hint "string"（如字符串拼接）

const obj = {

  valueOf() { return 10; },

  toString() { return '20'; }

};

console.log(obj + 5); // 15 (hint为"number"，使用valueOf返回的10)

console.log(String(obj)); // "20" (hint为"string"，使用toString返回的"20")

运算符：对数据进行操作的符号

运算符就像“操作员”，对变量和值进行操作并产生结果。

1. 算术运算符

2. 比较运算符

始终使用 === 和 !==，除非你非常明确自己需要隐式类型转换的行为。这能避免许多潜在的bug。

3. 逻辑运算符

逻辑运算符的“短路”行为

逻辑运算符的“短路”行为非常重要，它意味着：

• &&：如果第一个操作数是假值，第二个操作数根本不会被求值（因为结果已经确定为假）。
• ||：如果第一个操作数是真值，第二个操作数根本不会被求值（因为结果已经确定为真）。

使用 || 设置默认值（但要注意0和空字符串会被认为是假值）

function greet(name) {

  name = name || 'Guest'; // 如果name是假值（如'', 0, null, undefined），则使用'Guest'

  console.log('Hello, ' + name);

}

greet(); // Hello, Guest

greet('Alice'); // Hello, Alice

使用 ?? 更精确地设置默认值（只处理null和undefined）

function greet(name) {

  name = name ?? 'Guest'; // 只有当name是null或undefined时，才使用'Guest'

  console.log('Hello, ' + name);

}

greet(); // Hello, Guest

greet(''); // Hello,  (空字符串被保留)

greet(0); // Hello, 0 (数字0被保留)

4. 位运算符（直接操作整数在内存中的二进制位）

注意：位运算符会将操作数转换为32位整数，然后进行操作，结果也是一个32位整数。对于非常大的数字，这可能会导致精度丢失。位运算符主要用于底层操作、性能优化等场景。

5. 赋值运算符与复合赋值

let x = 10;

x += 5; // x = 10 + 5 = 15

x = 2; // x = 15  2 = 30

console.log(x); // 30

控制流：决定代码的执行顺序

控制流语句就像“交通指挥灯”或“岔路口的指示牌”，决定代码执行哪条路径。

1. 条件语句：根据条件选择执行不同的代码

if…else if…else 语句

let score = 85;

if (score >= 90) {

  console.log('优秀！');

} else if (score >= 80) {

  console.log('良好！'); // 输出这个

} else if (score >= 60) {

  console.log('及格！');

} else {

  console.log('不及格！');

}

三元运算符（条件运算符）：简化版的if…else

// 条件 ? 表达式1 (条件为真时执行) : 表达式2 (条件为假时执行)

let grade = score >= 60 ? '及格' : '不及格';

console.log(grade); // "及格"

// switch 语句：用于基于不同条件执行不同代码（特别适合枚举值）

let day = 'Monday';

switch (day) {

  case 'Monday':

    console.log('星期一');

    break; // 遇到break则跳出switch，继续执行后面的代码

  case 'Tuesday':

    console.log('星期二');

    break;

  case 'Wednesday':

    console.log('星期三');

    break;

  default: // 相当于else

    console.log('其他');

}

2. 循环与迭代：重复执行某段代码

循环就像“唱片机或跑步机，反复做同一件事。

基本循环

for循环：适合已知循环次数的情况

for (let i = 0; i < 5; i++) {

  console.log('for循环：当前数字是：' + i);

}

// 输出：

// for循环：当前数字是：0

// for循环：当前数字是：1

// for循环：当前数字是：2

// for循环：当前数字是：3

// for循环：当前数字是：4

while循环：适合不确定循环次数，只关注循环条件的情况

let j = 0;

while (j < 3) {

  console.log('while循环：' + j);

  j++;

}

// 输出：

// while循环：0

// while循环：1

// while循环：2

do…while循环：至少会执行一次代码块

let k = 0;

do {

  console.log('do-while循环：' + k);

  k++;

} while (k < 3);

// 输出：

// do-while循环：0

// do-while循环：1

// do-while循环：2

循环控制：break 和 continue

break、continue 和 return 的区别

break和continue只影响当前所在的循环。

如果存在嵌套循环，它们只影响包含它们的那一层循环。

// 嵌套循环中的break和continue

for (let i = 0; i < 2; i++) {

  console.log('外层循环 i:', i);

  for (let j = 0; j < 3; j++) {

    if (j === 1) {

      break; // 只终止内层循环

    }

    console.log('  内层循环 j:', j);

  }

}

// 输出:

// 外层循环 i: 0

//   内层循环 j: 0

// 外层循环 i: 1

//   内层循环 j: 0

高级迭代循环

for…in循环：遍历对象的可枚举属性（包括原型链上的）

// 注意：不推荐用于遍历数组，顺序可能不保证

const person = {

  name: 'Alice',

  age: 30,

  job: 'Developer'

};

for (const key in person) {

  console.log(key + ': ' + person[key]);

}

// 输出:

// name: Alice

// age: 30

// job: Developer

for…of循环：遍历可迭代对象（数组、字符串、Map、Set等）的值

// 注意：不能遍历普通对象

const colors = ['red', 'green', 'blue'];

for (const color of colors) {

  console.log(color);

}

// 输出:

// red

// green

// blue

// 遍历字符串

const str = "hello";

for (const char of str) {

  console.log(char);

}

// 输出:

// h

// e

// l

// l

// o

for…in vs for…of

• 遍历数组：for…of 或 forEach、map、filter 等数组方法；
• 遍历对象：for…in 或 Object.keys()/Object.values()/Object.entries()。

函数基础：可重复使用的代码块

函数就像“机器”或“工具”，你给它一些输入（参数），它就经过内部处理，然后给你一个输出（返回值）。

定义一次，可以多次调用，大大提高了代码的复用性和可维护性。

1. 函数声明与函数表达式

函数声明：会提升（可以在声明前调用）

function sayHello(name) {

  console.log('Hello, ' + name + '!');

}

sayHello('Alice'); // Hello, Alice!

函数表达式：不会提升，必须先定义后调用

const sayGoodbye = function(name) {

  console.log('Goodbye, ' + name + '!');

};

sayGoodbye('Bob'); // Goodbye, Bob!

箭头函数（ES6新增）：更简洁的函数表达式语法

const sayHi = (name) => {

  console.log('Hi, ' + name + '!');

};

sayHi('Charlie'); // Hi, Charlie!

函数声明提升 vs 函数表达式不提升

函数声明会被“提升”到当前作用域的顶部，可以在函数声明之前调用它。

sayHello(); // Hello! (可以调用)

function sayHello() {

  console.log('Hello!');

}

函数表达式（包括箭头函数）不会被提升，必须先定义，然后才能调用。

// sayGoodbye(); // ❌ 报错: sayGoodbye is not a function

const sayGoodbye = function() {

  console.log('Goodbye!');

};

sayGoodbye(); // Goodbye!

2. 箭头函数

箭头函数是ES6引入的更简洁的函数书写方式，但它与普通函数也有一些重要区别。

无参数：必须使用圆括号

const greet = () => console.log('Hello!');

单个参数：可以省略圆括号

const double = num => num*2;

多个参数：必须使用圆括号

const add = (a, b) => a + b;

函数体有多条语句：必须使用大括号

const describe = (name, age) => {

  console.log('Name:', name);

  console.log('Age:', age);

};

返回对象字面量：需要用小括号包裹对象

const createPerson = (name, age) => ({ name, age });

 // 等同于: return { name, age };

箭头函数的this指向问题

const person = {

  name: 'Alice',

  regularFunc: function() {

    console.log(this.name); // "Alice" (this指向person对象)

  },

  arrowFunc: () => {

    console.log(this.name); // undefined (this指向定义时的上下文，这里是全局或window，没有name属性)

  }

};

person.regularFunc(); // Alice

person.arrowFunc(); // undefined

3. 参数：传递给函数的输入

默认参数（ES6）

// 为参数设置默认值

function greet(name = 'Guest', greeting = 'Hello') {

  console.log(greeting + ', ' + name + '!');

}

greet(); // Hello, Guest!

greet('Alice'); // Hello, Alice!

greet('Bob', 'Hi'); // Hi, Bob!

剩余参数（ES6）：收集不定数量的参数到一个数组中

// 使用…args收集所有剩余参数

function sum(…args) {

  return args.reduce((total, current) => total + current, 0);

}

console.log(sum(1, 2, 3)); // 6

console.log(sum(1, 2, 3, 4, 5)); // 15

// 剩余参数必须放在最后

function describePerson(name, …hobbies) {

  console.log('Name:', name);

  console.log('Hobbies:', hobbies);

}

describePerson('Alice', 'reading', 'coding', 'traveling');

// Name: Alice

// Hobbies: [ 'reading', 'coding', 'traveling' ]

命名参数（通过对象解构实现）

// 通过对象解构实现命名参数，使代码更清晰

function createUser({ name, age = 30, isAdmin = false }) {

  return {

    name,

    age,

    isAdmin

  };

}

const user = createUser({ name: 'Alice', age: 25 });

console.log(user); // { name: 'Alice', age: 25, isAdmin: false }

4. 返回值与递归

// 函数返回值：如果没有显式返回，则返回undefined

function add(a, b) {

  return a + b; // 返回计算结果

}

const sum = add(5, 3);

console.log(sum); // 8

// 没有return语句的函数

function sayHello() {

  console.log('Hello!'); // 这条语句会执行

  // 没有return，隐式返回undefined

}

const result = sayHello();

console.log(result); // undefined

// 递归函数：函数调用自身

function factorial(n) {

  if (n === 0 || n === 1) {

    return 1; // 基准条件：结束递归

  } else {

    return n  factorial(n – 1); // 递归条件：调用自身

  }

}

console.log(factorial(5)); // 120 (5  4  3  2  1)

递归的基本要素

基准条件（Base Case）

一个或多个可以直接求解而无需递归的情况，用于终止递归。例如上面factorial函数中的n === 0 || n === 1。

递归条件（Recursive Case）

将问题分解为更小的、与原问题形式相同的问题，并调用自身来求解这些子问题。例如上面factorial函数中的n  factorial(n – 1)。

递归的注意事项

确保基准条件能够被触发，否则会导致无限递归，引发“栈溢出”（Stack Overflow）错误。

递归调用的参数必须向基准条件逼近。

// 无限递归的例子（会导致栈溢出）

function infiniteRecursion() {

  return infiniteRecursion(); // 没有基准条件

}

// infiniteRecursion(); // ❌ RangeError: Maximum call stack size exceeded

基本代码规范与注释风格

代码规范就像“语法和拼写规则”，而注释就像“课文中的解释说明”。它们都为了让你的代码更容易被别人（以及未来的自己）理解和维护。

1. 代码风格建议

2. 注释风格

单行注释示例

let userName = 'Alice'; // 用户名

多行注释示例

/**

  *这是一个多行注释

  *可以写很多行

  *通常用于解释一段复杂的逻辑

*/

JSDoc风格注释示例（推荐用于函数）

/**

  * 根据用户ID获取用户信息

  * @param {number} userId – 用户ID

  * @returns {Object|null} 用户对象或null（如果未找到）

  * @example

  * const user = getUserById(1);

  * console.log(user.name); // 输出用户名

 */

function getUserById(userId) {

  // …实现代码

}

注意事项