JavaScript学习笔记之总结与回顾（学习JavaScript基础知识看这一篇就够了，文章总字数2.8万）

本文链接：https://blog.csdn.net/m0_63165331/article/details/137157092

概述

时至如今，我已成功掌握了JavaScript的基础知识，回顾这一路的学习历程，心中涌现的不仅是满满的成就感，更是对自我坚持与努力的肯定。每日坚持更新一篇博客，既是对知识的梳理与记录，也是希望将我的学习心得与过程分享给更多的同路人。在求知的道路上，每当遇到困惑与不解，我都会反复查阅相关资料，深入挖掘每一个知识点的内涵，而非仅仅走马观花般浏览一遍教程便浅尝辄止。或许，有些知识点在时间的冲刷下已略显模糊，但每当我再次翻阅过往的笔记，那些记忆便如潮水般涌回，这也正是我坚持记录学习笔记的深远意义所在。

本篇博客再对所学的知识进行一遍梳理，既是加深印象，也是方便以后翻看查找。

1.安装vscode及配置开发环境

关于安装vscode及配置开发环境这里不再赘述，具体详见第一天的学习笔记。

（day 1）JavaScript学习笔记（配置开发环境）

2.JS基础知识

2.1变量

变量是程序用于存储数据的容器。在JavaScript中，可以使用var、let或const关键字来声明变量。变量可以存储各种类型的数据，包括数字、字符串、布尔值、对象、数组等。

var声明的变量具有函数作用域或全局作用域，而let声明的变量具有块级作用域（即其所在的代码块内）。在ES6（ECMAScript 2015）及以后的版本中，推荐使用let和const来声明变量，因为它们提供了更好的作用域控制，有助于避免一些常见的错误。

2.2常量

常量是程序中的值，一旦赋值后就不能再改变。在JavaScript中，你可以使用const关键字来声明常量。

2.3注释

注释是编程中用于解释代码的部分，它不会被执行。在JavaScript中，有三种类型的注释：

单行注释：以//开头，直到行尾的内容都被视为注释。
多行注释：以/*开头，以*/结尾，它们之间的所有内容都被视为注释。
文档注释：以/**开头，以*/结尾，文档注释是用来生成API文档的。

2.4数据类型

JavaScript 中的数据类型可以分为基本数据类型（原始类型）和复杂数据类型（引用类型）。

数据类型	描述	示例
基本数据类型（原始类型）
`Number`	用于表示数值，包括整数和浮点数。	`let num = 42;` `let floatNum = 3.14;`
`String`	用于表示文本或字符序列。	`let str = "Hello, World!";`
`Boolean`	逻辑值，只有 `true` 或 `false` 两个取值。	`let isTrue = true;` `let isFalse = false;`
`Null`	只有一个值 `null`，表示空值或“无”。	`let nullValue = null;`
`Undefined`	当变量被声明了，但没有赋值时，它的值就是 `undefined`。	`let undefinedVar;`
`Symbol`	表示唯一的、不可变的原始值，通常用作对象的属性键。	`let sym = Symbol("unique");`
复杂数据类型（引用类型）
`Object`	用于存储多个值作为属性。几乎所有的东西（除了原始值）都是对象。	`let obj = { key: "value" };`
`Array`	特殊的对象，用于表示有序的元素集合。	`let arr = [1, 2, 3, "string", true];`
`Function`	表示可执行的代码块，可以接受参数并返回结果。	`function greet(name) { return` Hello, ${name}!`; }`

2.5数据类型转换

在JavaScript关键字typeof可以判断一个变量的数据类型。

在JavaScript中可以用parseInt()和parseFloat()函数把复合数字类型的字符串类型转换为数字类型，parseInt()转换为整数，parseFloat()函数转换为小数，如果用parseInt()转换带小数点的字符串，会把小数点后面的数都省略。

toString()方法用于将对象转换为字符串。

以上基础知识的详细内容详见以下链接

（day 2）JavaScript学习笔记（基础之变量、常量和注释）

（day 3）JavaScript学习笔记（基础之数据类型及数据类型转换）

3.操作符

在JavaScript中，操作符是用于执行特定操作的符号或标记。这些操作符允许我们进行各种操作，如算术运算、比较、赋值、逻辑运算等。以下是一些主要的JavaScript操作符，以及它们的简要描述和示例：

操作符类别	操作符	描述	示例
算术操作符
加法	`+`	用于相加两个数值或连接字符串。	`let sum = 5 + 3; // 8` <br> `let str = "Hello" + " " + "World"; // "Hello World"`
减法	`-`	用于从一个数值中减去另一个数值。	`let diff = 10 - 3; // 7`
乘法	`*`	用于两个数值相乘。	`let product = 5 * 3; // 15`
除法	`/`	用于一个数值除以另一个数值。	`let quotient = 10 / 2; // 5`
取余	`%`	用于返回除法运算的余数。	`let remainder = 10 % 3; // 1`
递增	`++`	将变量的值增加1。	`let count = 0; ++count; // count is now 1`
递减	`--`	将变量的值减少1。	`let count = 1; --count; // count is now 0`
比较操作符
等于	`==`	检查两个值是否相等（会进行类型转换）。	`let a = 5; let b = "5"; a == b; // true`
严格等于	`===`	检查两个值及其类型是否都相等。	`let a = 5; let b = "5"; a === b; // false`
不等于	`!=`	检查两个值是否不相等（会进行类型转换）。	`let a = 5; let b = 3; a != b; // true`
严格不等于	`!==`	检查两个值或类型是否至少有一个不相等。	`let a = 5; let b = "5"; a !== b; // true`
大于	`>`	检查左侧值是否大于右侧值。	`let a = 10; let b = 5; a > b; // true`
大于等于	`>=`	检查左侧值是否大于或等于右侧值。	`let a = 10; let b = 10; a >= b; // true`
小于	`<`	检查左侧值是否小于右侧值。	`let a = 5; let b = 10; a < b; // true`
小于等于	`<=`	检查左侧值是否小于或等于右侧值。	`let a = 5; let b = 5; a <= b; // true`
赋值操作符
赋值	`=`	将右侧的值赋给左侧的变量。	`let a = 5;`
加等于	`+=`	将右侧的值加到左侧的变量上，然后重新赋值给左侧的变量。	`let a = 5; a += 3; // a is now 8`
减等于	`-=`	从左侧的变量中减去右侧的值，然后重新赋值给左侧的变量。	`let a = 5; a -= 3; // a is now 2`
乘等于	`*=`	将左侧的变量与右侧的值相乘，然后重新赋值给左侧的变量。	`let a = 5; a *= 3; // a is now 15`
除等于	`/=`	将左侧的变量除以右侧的值，然后重新赋值给左侧的变量。	`let a = 10; a /= 2; // a is now 5`
逻辑操作符
逻辑与	`&&`	如果两个操作数都为真，则返回真。	`let a = true; let b = true; a && b; // true`
逻辑或	`		`
逻辑非	`!`	反转操作数的逻辑状态。	`let a = true; !a; // false`

位操作符是JavaScript中用于直接操作二进制位的一类操作符。它们对数值的底层表示（即比特位）进行操作，这在处理低级内存操作、优化性能或执行特定算法时非常有用。以下是JavaScript中的位操作符，以及它们的描述和示例：

位运算符
位运算符		运算规则
按位与	&	当两个操作数相应的位都为1时，结果对应位上的值为1，否则为0。
按位或	\|	当两个操作数相应的位中至少有一个为1时，结果对应位上的值为1，否则为0。
按位异或	^	当两个操作数相应的位一个为0，一个为1时，结果对应位上的值为1，否则为0。
按位取反	~	这是一个一元运算符，它将操作数的每一位翻转，即0变为1，1变为0。
左移	<<	将左操作数的二进制位向左移动指定的位数，右边空出的位用0填补。左移操作实际上等同于将数字乘以2的某个幂次。
右移	>>	将左操作数的二进制位向右移动指定的位数，左边空出的位用符号位填补（正数填0，负数填1）。右移操作实际上等同于将数字除以2的某个幂次并向下取整。
无符号右移	>>>	与右移类似，但左边空出的位总是用0填补，无论原数的符号如何。

在JavaScript中还有三目运算符，也被称为条件运算符，是具有三个操作数的运算符，因此有时也被称为三元运算符。其一般形式为：“表达式1 ? 表达式2 : 表达式3”。

关于操作符的详细介绍详见以下链接文章：

（day 4）JavaScript学习笔记（操作符）

4.流程控制

4.1 if...else

var passecode = prompt("请输入暗号");//prompt浏览器内置的函数，可以弹出输入框，接收用户输入数据
if (passecode == "爱你孤身走暗巷") {
  alert("登录成功");
} else {
  alert("登录失败");
}

4.2 if...else if..else

var role = prompt("请输入用户权限");
if (role === "超级管理员") {
  alert("跳转到超级管理员页面");
} else if (role === "管理员") {
  alert("跳转到管理员页面");
} else {
  alert("跳转到其他用户页面");
}

4.3 switch...case

var role = prompt("请输入用户权限");
switch (role) {
  case "超级管理员":
    alert("跳转到管理员页面");
    break;//一定要有这个break，否则不会终止判断，会继续执行下面的代码
  case "管理员":
    alert("跳转到管理员页面");
    break;
  case "特殊用户":
    alert("跳转到特殊用户页面");
    break;
  case "一般用户":
    alert("跳转到一般用户页面");
    break;
  default:
    alert("未找到用户权限");
}

注意：break 语句用于终止 switch 语句的执行，并跳出整个结构。如果不使用 break，代码会继续执行到下一个 case，这可能导致逻辑错误。

以上条件判断相关详细说明及用法详见以下文章：

（day 5）JavaScript学习笔记（流程控制之条件判断if...else, if...else if..else,switch...case）

4.4 while循环

var a = 1;
while (a <= 10) {
  console.log(a);
  a++;
}

4.5 do while循环

do while循环与while循环不同的是，do while循环会先执行循环体中的代码，然后再判断循环条件是否为真。如果条件为真，循环会继续执行；如果为假，则循环终止。

var x = 1;
do {
  console.log(x);
  x++;
} while (x > 5);
//以上代码输出1，即便判断条件不满足，也会执行一次循环体

4.6 for循环

for循环与while循环的区别在于，它便于计数类的循环，for循环的结构如下：

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

以上循环相关详细用法及说明详见以下文章：

（day 6）JavaScript学习笔记（流程控制之循环：while,do while,for）

5.函数

5.1 声明函数与调用

在JavaScript中函数声明是用关键字 function来声明的，调用函数直接用函数名加小括号，小括号内放需要传入的参数，如果不需要传参就空着，但是小括号要有。

// 声明没有参数的函数
function sayHello() {
  console.log("Hello");
}
// 调用没有参数的函数
sayHello(); //输出：Hello
 
// 声明有两个参数的函数
function add(a, b) {
  //a和b是两个形参
  return a + b;
}
// 调用有两个参数的函数
c = add(5, 6); // 5和6是两个实参
console.log(c); //输出：11

5.2 函数表达式

函数表达式是JavaScript中定义函数的一种方式，与函数声明有所不同。函数表达式可以将一个匿名函数或具名函数赋值给一个变量，从而通过该变量来调用函数。

var multiply2 = function (a, b) {
  return a * b;
};
 
//调用函数
console.log(multiply2(5, 6)); //输出为：30

5.3 函数的提升（Hoisting）

我们可以在代码中先调用函数，把函数统一在代码的底部进行声明。

console.log(divide(10, 5)); //先调用函数，输出：2
 
function divide(a, b) {
  return a / b;
}

5.4 默认参数

在定义函数的时候，我们可以给函数的参数一个默认值，有默认值的参数是可以传递参数，也可以传递参数，传参参数会把默认值覆盖掉。

5.5 递归函数

递归函数就是函数自己调用自己，为了避免无限递归，所以要给出退出条件。

function sum(n) {
  if (n === 1) {
    return 1;
  }
  return n + sum(n - 1);
}
 
console.log(sum(100)); //输出：5050

5.6 arguments

一个函数可以接收不指定个数的参数，这时候定义函数的时候不指定参数，可以在函数体内用arguments[]来获取指定的参数，如下代码：

//定义函数时不设置参数
function arg() {
  console.log(arguments[0]); //arguments后面方括号内的0表示提取第0个参数
}
 
arg("aaaa"); //输出:aaaa
arg("123", "abc"); //因为函数体内只提取第0个函数，所以只输出:123

5.7 箭头函数

箭头函数提供了一种更简洁、更直观的方式来编写函数，如下代码：

//箭头函数简化，如果箭头函数有返回值，并且只有一行代码，可省略关键字return
const add4 = (a, b) => a + b;

注意上面这种简化写法，只有在函数有返回值，并且只有一行代码的情况下才可以省略关键字return和大括号，如果没有返回值，还是要带大括号，如下代码:

//箭头函数没有返回值不能省略大括号
var greeting = () => {
  console.log("hello world");
};
//调用函数
greeting();//后面加小括号表示调用。

5.8 闭包

闭包是函数里面再定义函数，这样就形成了闭包。

//如下定义一个函数，求两个数的平方和，在函数内定义了一个求平方的函数
function squarSum(a, b) {
  function squar(x) {
    return x * x;
  }
  return squar(a) + squar(b);
}
 
console.log(squarSum(2, 3));//调用函数

5.9 高阶函数

在闭包中内部函数可以作为返回值返回出去，这样就形成了高阶函数,也就是返回函数的函数。

function person() {
  let name1 = "小朋"; //在外部函数里定义变量name1
  //在外部函数里定义内部函数getName
  function getName() {
    return name1; //内部函数可以调用外部函数作用域的变量
  }
  return getName; //返回函数getName
}

5.10 柯里化函数

柯里化（Currying）是将一个接受多个参数的函数转换成一系列函数，每个函数都接受一个单一参数，并返回一个新的函数，直到所有参数都被处理并返回最终结果。

//柯里化函数
function addTreeNumsCurry(a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
}
 
console.log(addTreeNumsCurry(1)(2)(3));//柯里化函数调用方式

5.11 自执行函数

自执行函数，函数定义完之后直接调用它自己。

//匿名函数不能做开头，所以圆括号括起
(function () {
  var num1 = 20;
  console.log(num1);
})(); //增加小括号表示调用它自己 返回结果为 20

5.12 回调函数

回调函数（Callback Function）指的是一个通过函数指针调用的函数。具体来说，回调函数是将函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，就称之为回调函数。

//定义函数request2，cd形参是一个函数
function request2(cd) {
  console.log("请求数据");
  cd("成功"); //cd后面加上括号表示调用函数，括号的内容为实参，这里也就回调的位置
  console.log("请求结束");
}
 
//定义函数callback2
function callback2(result) {
  console.log("执行回调");
  console.log("执行结果是：" + result);
}
 
//调用函数request2，把callback2函数作为参数传入
request2(callback2);
 
/*
以上代码运行结果：
请求数据
执行回调
执行结果是：成功
请求结束
 */

关于函数的相关详细内容详见以下文章：

（day 7）JavaScript学习笔记（函数1）

（day 8）JavaScript学习笔记（函数2）

（day 9）JavaScript学习笔记（函数3）

6. 数组

6.1 创建数组

创建数组有多种方式

// 用数组的字面值创建
let arr1 = [1, 2, 3, 4];

// 使用构造函数
let arr2 = new Array(5, 6, 7, 8);
 
// 用Array创建
let arr3 = Array(7, 8, 9);

// 使用Array.of创建
arr4 = Array.of(10, 11, 12);

如果只有一个元素，只能用字面值和Array.of创建。

6.2 访问数组

访问数组用索引值访问，如下代码：

let arr = ["Python", "Java", "C++", "JavaScript"];
console.log(arr.length); //获取数组长度，输出：4
console.log(arr[0]); //输出：Python
console.log(arr[1]); //输出：Java
console.log(arr[2]); //输出：C++
console.log(arr[3]); //输出：JavaScript

6.3 添加元素

添加元素可以直接指定位置添加，如果这个位置有值的话，原来的值就会被新的值覆盖，如果新的位置大于数组的长度，数组会自动添加长度，并且用空的值来填充空位，如下代码演示：

let arra = [1, 2, 3];
arra[0] = 5;
console.log(arra); //输出：(3) [5, 2, 3]
 
arra[3] = 6;
console.log(arra); //输出:(4) [5, 2, 3, 6]
 
arra[8] = 10; //索引值远远大于数组长度
console.log(arra); //自动添加了空元素，输出:(9) [5, 2, 3, 6, empty × 4, 10]

6.4 删除元素

如果要删除数组中最后一个元素，可以直接改变数组长度的值，如果清空数组，可以直接将数组长度设置为0。

删除数组中固定位置的元素可以用数组的splice方法，它接收两个固定的参数，一个参数为要删除元素的索引值，第二个元素是要删除的数量，后面的参数是要增加的元素。

let arrDel2 = ["apple", "banana", "orange", "pear"];
arrDel2.splice(2, 1); //表示在索引值为2的位置开始删除元素，删除元素数量为1
console.log(arrDel2); // 输出：(3) ['apple', 'banana', 'pear']
 
arrDel2.splice(1, 2, "watermelon", "grape", "mango");
//上面代码表示在索引值为1的位置删除两个元素，再增加'watermelon','grape','mango'三个元素
console.log(arrDel2); // 输出：(4) ['apple', 'watermelon', 'grape', 'mango']

6.5 遍历数组

数组遍历有三种方式，第一种是用for循环，如下代码示例：

//第一种方式：for循环
let arrErg = [1, 3, 5, 7, 9];
for (let i = 0; i < arrErg.length; i++) {
  console.log(arrErg[i]);
}

第二中方式是用for...of 循环，如下代码演示：

//第二种方式：for……of循环
for (let ele of arrErg) {
  console.log(ele);
}

第三种方式用数组的forEach方法，这个方法接收一个回调，它会给回调函数三个参数，第一个是当前遍历到的元素，第二个是当前遍历到的索引，第三个是数组本身，如下代码演示：

//第三种方式：forEach方法
arrErg.forEach((ele, index, self) => {
  console.log(ele, index, self);
});

6.6数组栈模式

栈是一种先进后出的数据结构，最后一个放进去的是第一个拿出来的，JavaScript的数组原生支持栈的模式，往栈中压入一个元素，可以使用数组的push方法，出栈用pop方法，如下代码示意：

var stack = [1, 2, 3];
stack.push(4); //往数组中压入一个元素
 
console.log(stack); // 输出：(4) [1, 2, 3, 4]
 
stack.push(5, 6, 7); //也可以往数组中压入多个元素
console.log(stack); //输出：(7) [1, 2, 3, 4, 5, 6, 7]

var last = stack.pop(); //相当于把stack中最后一个元素拿出来赋值给变量last
console.log(last); //输出：7
console.log(stack); //输出：(6) [1, 2, 3, 4, 5, 6]

6.7 数组队列模式

队列是一种先进先出的模式，JavaScript的数组也原生支持队列的模式，入队用push方法，出队用shift方法，队列也支持插队，用unshift方法可以把元素添加到队列的头部，如果在队列的任意位置插队，就是用之前学过的数组的splice方法：

var queue = [1, 2, 3];
queue.push(4, 5, 6); //入队
console.log(queue); //输出：(6) [1, 2, 3, 4, 5, 6]
var first = queue.shift(); //相当于把queue中的第一个元素移除，拿出来赋值给变量first
console.log(first); //输出：1
console.log(queue); //输出：(5) [2, 3, 4, 5, 6]

queue.unshift(10, 20, 30);
console.log(queue); //输出: (8) [10, 20, 30, 2, 3, 4, 5, 6]

//在任意位置插队
queue.splice(2, 0, 900, 800, 700);
console.log(queue); //输出: (11) [10, 20, 900, 800, 700, 30, 2, 3, 4, 5, 6]

6.8 反转数组

反转数组可以用reverse方法，reverse是对数组本身进行操作，操作完后不会产生新的数组：

var arr = [1, 2, 3];
console.log(arr.reverse()); //输出：(3) [3, 2, 1]
console.log(arr); //输出：(3) [3, 2, 1]   说明reverse()是对数组本身操作，不会产生新的数组

6.9 数组排序

数组排序可以用sort方法，sort方法是升序排序，如果降序可以把升序排好的数组用reverse方法逆转：

var arr = [1, 5, 3, 4, 2];
arr.sort(); //sort方法是原地操作，改变了原数组，不会产生新的数组
console.log(arr); //输出：(5) [1, 2, 3, 4, 5]

var arr2 = [1, 5, 3, 4, 2];
arr2.sort().reverse();// 先升序排序，再逆转
console.log(arr2); //输出：(5) [5, 4, 3, 2, 1]

6.10 数组连接

数组的连接可以用concat方法，它可以将两个数组连接起来，也可以将多个数组连接起来，把数组传进来即可，如下代码演示：

var arr6 = [1, 2, 3];
var arr7 = [4, 5, 6];
var arr8 = [10, 11];
 
//连接两个数组
console.log(arr6.concat(arr7)); //输出：(6) [1, 2, 3, 4, 5, 6]
 
//连接多个数组
console.log(arr6.concat(arr7, arr8)); //输出：(8) [1, 2, 3, 4, 5, 6, 10, 11]

6.11 数组的裁切

数组的裁切就是返回数组的一部分，可以用slice方法：

var arr9 = [1, 2, 3, 4, 5, 6];
//只传一个参数
console.log(arr9.slice(1)); //输出：(5) [2, 3, 4, 5, 6]
//传两个参数
console.log(arr9.slice(1, 3)); //输出：(2) [2, 3]
//参数可以是负数
console.log(arr9.slice(1, -2)); //输出：(3) [2, 3, 4]
console.log(arr9.slice(-3, -1)); //输出：(2) [4, 5]

6.12 indexOf和includes

indexOf()：返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。

includes()：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

var arr10 = [1, 2, 3, 5, 8, 5, 3, 7];
var result = arr10.indexOf(5); //查找5这个元素的索引值
console.log(result); //输出：3
 
var result2 = arr10.indexOf(100); //查找100这个元素的索引值
console.log(result2); //由于数组中没有100，所以返回：-1

var arr11 = [1, 2, 3, 5, 8, 5, 3, 7];
console.log(arr11.includes(5)); //返回：true
console.log(arr11.includes(100)); //返回：false

6.13 map

数组的map与forEach类似，只是map会把数组中每个元素进行一定的操作，然后再返回一个新的数组，它也是接收三个参数，分别是元素、元素的索引值、数组本身。如下代码示例是将列表中每个元素都乘以2再返回到一个新的数组里。

var arr = [1, 2, 3, 4];
var newArr = arr.map((ele) => ele * 2); //接收第一个参数，对每个元素乘以2
console.log(newArr); //输出：(4) [2, 4, 6, 8]
console.log(arr); //原来的数组没有变化，输出：(4) [1, 2, 3, 4]

6.14 reduce

数组的reduce方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。基本语法结构如下：

arr.reduce(function(accumulator, currentValue, currentIndex, array) {
// 具体的代码
}, initialValue);

参数1（accumulator）：累积器回调返回的累积值；它是上一次调用回调时返回的累积值，或者是初始值（即参数5，如果给了的话）。

参数2（ currentValue）：当前值，数组中正在处理的元素。

参数3：索引值，数组中正在处理的元素的索引，如果提供了初始值（参数5），则索引为 0，否则为 1。一般不用这个参数。

参数4（currentIndex）：调用reduce方法的数组本身。一般不用这个参数。

参数5（initialValue）：作为第一次调用回调函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。如果一个空数组上调用reduce 时候未设置初始值，那么程序将会报错。

下面是代码是计算数组中的元素累加和：

var arr = [1, 2, 3, 4];
var sum = arr.reduce((a, b) => a + b);//a和b是形参，写什么都可以
console.log(sum); //输出：10

6.15 数组过滤

数组过滤一般使用filter方法。filter方法接收一个回调函数作为参数，该回调函数定义了过滤条件。对于数组中的每个元素，如果回调函数返回true，则该元素会被包含在新数组中；如果返回false ，则不会包含。

var arr = [1, 2, 3, 4, 5, 6];
var newArr = arr.filter((item) => item > 4); //筛查大于4的元素
console.log(newArr);//输出：(2) [5, 6]

6.16 数组测试

数组测试有两种，第一种是检测所有的元素是不是满足一定的条件，满足的话返回true，不满足返回false。第二种是如果有一个元素满足条件就返回true，全都不满足就返回false。

第一种是用every方法，第二种是用some方法。这两种方法的参数与forEach和map一样，接收三个参数，一个是元素，一个元素的索引值，一个是数组本身，不过一般只用第一个参数。

6.17 esturcturing解构操作符

desturcturing解构操作符是把数组的元素赋值给变量，数组解构使用方括号[]来进行解构。解构的目标如果是可遍历对象，那么都可以进行解构赋值。

var arr = [1, 2, 3];
var [a, b, c] = arr; //将数组中的元素分别赋值的变量
console.log(a, b, c); //输出：1 2 3

6.18 rest操作符

在解构时也可以使用剩余运算符...用于收集剩余的元素：

var arr = [1, 2, 3, 4, 5, 6];
var [g, ...h] = arr; //使用剩余运算符...用于收集剩余的元素
console.log(g); //输出：1
console.log(h); //输出：(5) [2, 3, 4, 5, 6]

rest操作符还可以作为函数的参数，用来接收不固定个数的参数：

function fun3(...args) {
  //args可以是任意符合变量要求的字符
  console.log(args);
}
fun3("小明", "小红"); //输出：(2) ['小明', '小红']

6.19 多维数组

多维数组是数组的数组，即数组的元素仍然是数组。它可以用来表示更复杂的数据结构，如矩阵、表格或列表的列表等。

关于数组的相关详细内容详见以下文章：

（day 10）JavaScript学习笔记（数组1）

（day 11）JavaScript学习笔记（数组2）

（day 12）JavaScript学习笔记（数组3）

7.对象

7.1创建对象

在JavaScript中对象的创建方式有多种，最直观的是用字面值来创建，也就是对象的初始化器：

var stu = {
  name: "小红",
  age: 18,
  id: 20240001,
  nativePlace: "天津市",
  attendClass: function () {
    console.log(name + "上课");
  }
};

在JavaScript中创建对象还可以new object来创建，如下代码：

//用new object
var stu2 = new Object(); //先创建一个空对象
stu2.name = "小蓝";
stu2.age = 17;
stu2.id = 20210002;
stu2.nativePlace = "河北";
stu2.attendClass = function () {
  console.log("小蓝红上课");
};

使用构造函数是另一个创建对象的方式，与上面介绍的两种创建对象的方式不同的是，使用构造函数可以预先定义好对象有哪些默认的属性，可以用new关键字来创建实例。如下代码演示：

//构造函数的名字一般首字母大写
function Student(name, id) {
  this.name = name;
  this.id = id;
}
 
//创建实例
var stu11 = new Student("小鹏", "202400007");
console.log(stu11); //输出：Student {name: '小鹏', id: '202400007'}
 
var stu12 = new Student("小白", "202400008");
console.log(stu12); //输出：Student {name: '小白', id: '202400008'}

7.2 对象属性

对象里的键值对都是对象的属性，它跟变量一样，可以是任何值，比如数字、数组、字符串、对象、函数等等，如果属性的值是函数，又叫做方法。

访问对象的属性值有两种方法，一种打点的方式，一种是方括号的形式。我们可以改变对象属性的值，但是不能访问没有的属性。

7.3 省略key

用字面值定义对象的时候，如果对象属性的值是个变量，并且变量名与key相同，那么可以省略key。如果对象的属性值是函数，也可以省略key，把key的名字改成函数的名字。

7.4 遍历对象属性

遍历对象属性有两种方法，第一种是用object.keys方法

var stu9 = {
  name: "小红",
  age: 18,
  id: 20240001,
  nativePlace: "天津市",
  attendClass() {
    console.log("小红上课");
  },
};
//用object.keys和object.values
console.log(Object.keys(stu9)); //输出：(5) ['name', 'age', 'id', 'nativePlace', 'attendClass']
console.log(Object.values(stu9));//输出：(5) ['小红', 18, 20240001, '天津市', ƒ]

第二种方法是用for in 循环获取所有的key和vlue

//用for in循环获取所有的key
for (key in stu9) {
  console.log(key);
}

7.5 删除对象属性

删除对象属性可以用delete关键字，语法结构为：delete 对象名.属性key

7.6 this

当函数作为对象的方法被调用时，this 通常指向该对象。

//当函数作为对象的方法被调用时，this 通常指向该对象。
var stu1 = {
  name: "小鹏",
  id: 20240001,
  attendClas() {
    console.log(this.name + "上课"); //此处的this指向的是stu1这个对象
  },
};
stu1.attendClas(); //输出：小鹏上课

如果我们给对象添加方法时，用普通函数，this指向的是该对象，但是如果用箭头函数，this的指向是包裹它的作用域的this对象。

7.7 getters和setters

getters 和 setters 是特殊的函数，它们允许你创建对象属性的访问器方法。getter 是一种特殊的方法，用于获取属性值；setter 则是一种特殊的方法，用于设置属性值。

//用字面值创建一个person
var person = {
  firstName: "鹏",
  lastName: "王",
  //定义getters，用get关键字
  get fullName() {
    return this.lastName + this.firstName;
  },
  //定义setters，用set关键字，只能接收一个参数
  set fullName(fullName) {
    let [lastName, firstName] = fullName.split(",");
    this.firstName = firstName;
    this.lastName = lastName;
  },
};
 
console.log(person.fullName); //输出：王鹏
person.fullName = "王,小鹏"; //设置名字
console.log(person.fullName); //输出：王小鹏
console.log(person.firstName, person.lastName); //输出：小鹏 王

上面是用字面值创建的对象，如果是用构造函数创建的对象，后面也可以增加 getters 和 setters，需要用到Object.defineProperty方法，它的语法结构是这样的：

Object.defineProperty（对象实例名，要增加的属性名，{

get：function（）{

getters的代码

}，

set：function（接收一个参数名）{

setters的代码

}

}）

7.8原型（prototype）

在JavaScript中，原型（prototype）是一个非常重要的概念，它允许我们创建可重用的对象类型及其方法。理解原型是理解JavaScript对象模型的关键部分，也是掌握JavaScript面向对象编程的基础。

在JavaScript中，构造函数通常用于创建特定类型的对象。每个构造函数都有一个prototype属性，这个属性是一个对象，用于包含所有实例共享的方法和属性。当我们使用new操作符创建一个构造函数的实例时，这个实例的内部会包含一个链接指向构造函数的prototype对象。

我们可以给构造函数原型增加属性，它的实例都会继承这些属性，可以给构造函数增加方法。查看对象的原型用：对象.__proto__ ,查看构造函数的原型用：构造函数名.prototype.

//先创建一个构造函数
function Student3(name, id) {
  this.name = name;
  this.id = id;
  this.eat = function () {
    console.log(this.name + "吃饭");
  };
}
//创建两个实例stu14和stu15
var stu14 = new Student3("小雪", 20240014);
var stu15 = new Student3("小雨", 20240015);

Student3.prototype.age = 18; //给构造函数Student3的原型增加age属性并赋值
console.log(stu14.age); //stu14继承了构造函数Student3原型的属性，所以能访问到，输出：18
console.log(stu15.age); //stu15继承了构造函数Student3原型的属性，所以能访问到，输出：18

//给构造函数原型增加方法
Student3.prototype.showInfor = function () {
  console.log(this.name + " 学号：" + this.id + ",年龄：" + this.age);
};
 
stu14.showInfor(); //输出：小雪 学号：20240014,年龄：18
stu15.showInfor(); //输出：小雨 学号：20240015,年龄：18

console.log(stu14.__proto__); // 查看对象的原型
console.log(Student3.prototype); //查看构造函数Student3的原型

7.9 Object.create()

Object.create()可以让一个对象继承自另一个对象，新的对象拥有它继承对象的所有属性。用Object.getOwnPropertyNames可以获取对象自己的属性。

7.10 原型链

每个对象的原型都会有一个上层的原型，直到遇到null，这种链式继承下来的原型就构成了原型链，JavaScript中最顶层的对象是Object，它的原型是Object.prototype，但是它的原型的原型就是null，这样就达到了原型链的顶端。

用Object.getPrototypeOf（）可以查看对象的原型。

7.11 修改原型指向

修改原型的指向，可以改变对象的继承关系，从而获取不同的属性和方法。这通常是通过改变构造函数的prototype属性来实现的。修改原型指向用Object.setPrototypeOf(参数1，参数2)，参数1为要修改原型指向的对象名，参数2为要指向的原型，一般为构造函数名.prototype

7.12 spread操作符

Spread操作符（...），也称为展开操作符，其作用是将可迭代的（Iterable）对象进行展开。这里的可迭代对象指的是那些可以使用for循环进行遍历的对象，比如数组、字符串、对象等。

spread操作符在数组中的可以用来连接两个数组、克隆数组、展开数组。如下代码示例。

//数组中的应用
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
 
//用法1，将两个数组拼接
var newArr = [...arr1, ...arr2];
console.log(newArr); //输出：(6) [1, 2, 3, 4, 5, 6]
 
//用法2，克隆数组
var arr1Clone = [...arr1];
console.log(arr1Clone); //(3) [1, 2, 3]
console.log(arr1Clone === arr1); //克隆出来的数组与原数组内存地址不一样，所以返回：false
 
//用法3，克隆数组的同时增加元素
var arr2Clone = [...arr2, 10, 20, 30];
console.log(arr2Clone); //(6) [4, 5, 6, 10, 20, 30]
 
//用法4，展开数组
console.log(...arr1); //输出：1 2 3

如下代码是spread操作符在对象中的用法：

//创建一个对象
var post = {
  id: "00001",
  title: "JavaScript学习笔记",
  content: "今天继续学习对象",
};
 
console.log(post);
//输出结果如下：
//{id: '00001', title: 'JavaScript学习笔记', content: '今天继续学习对象'}
 
//克隆对象
var postClone = { ...post };
 
console.log(postClone); //输出结果与post相同
 
//创建第二个对象，克隆post对象中的所有属性，并增加新的属性
var post2 = {
  ...post,
  author: "m0_63165331",
};
 
console.log(post2);
//输出结果如下：
//{id: '00001', title: 'JavaScript学习笔记', content: '今天继续学习对象', author: 'm0_63165331'}

7.13 destructuring解构赋值

我们在数组中学习了desttructring解构赋值，它也可以用在对象上面，如下代码演示

var post = {
  id: "00001",
  title: "JavaScript学习笔记",
  content: "今天继续学习对象",
};
 
var { id, title } = post; //解构赋值，把post中的id和title的属性值赋给id和title变量
 
console.log(id, title); //输出：00001 JavaScript学习笔记

注意解构赋值时变量的名字要与对象中的属性一致。如果要用别名，需要用冒号，如下代码所示把title改为headline：

var { id, title: headline } = post;
console.log(headline);//输出：JavaScript学习笔记

我们在解构赋值的时候也可以给变量设置默认值，防止对象中没有这个属性，或者它的值是undefined。

var { id, title, comments = "没有评论" } = post;
console.log(comments);//没有评论

7.15 rest

对象中的rest操作符与数组中一样，我们把想要的属性取出来后，剩余的属性作为子对象取出来，如下代码示例，把前面定义的对象post2中的comments拿出来，其他的属性存储到新的对象rest中：

//rest操作符
var { comments, ...rest } = post2;
console.log(comments);
console.log(rest);

7.16 call&apply&bind

call、apply、bind都可以改变函数中的this指向。

var stu = {
  id: 101,
  name: "小白",  
  community: {
    name: "围棋社",
    printInfor() {
      console.log("参加的社团是：" + this.name);
    },
  },
};
 
//定义一个函数
function printInfor1(com1, com2, com3) {
  console.log("学生姓名：" + this.name, com1, com2, com3);
}
 

//用call绑定
printInfor1.call(stu, "围棋社", "舞蹈社", "新闻社"); 
//输出：学生姓名：小白 围棋社 舞蹈社 新闻社

var coms = ["围棋社", "舞蹈社", "新闻社"];
//用apply绑定
printInfor1.apply(stu, coms); 
//输出：学生姓名：小白 围棋社 舞蹈社 新闻社

//用bind绑定会产生一个新的函数
var newPrintInfor = printInfor1.bind(stu, "围棋社", "舞蹈社", "新闻社");
newPrintInfor();//输出：学生姓名：小白 围棋社 舞蹈社 新闻社

有关对象的具体详细内容详见以下文章：

（day 13）JavaScript学习笔记（对象1）

（day 14）JavaScript学习笔记（对象2）

（day 15）JavaScript学习笔记（对象3）

（day 16）JavaScript学习笔记（对象4）

8.面向对象

8.1 定义class

在ES6（ECMAScript 2015）中，JavaScript引入了class关键字，它提供了一种更简洁、更易于理解的方式来定义和使用面向对象编程中的类。尽管JavaScript中的class在底层仍然基于原型链，但使用class语法可以让我们以更传统的方式组织代码。

class Students {
  //下面是定义构造方法，与前面学过的定义构造函数是一样的。
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}
//初始化对象一个实例，使用new关键字定义实例变量
var stu1 = new Students(1001, "夏雪");
console.log(stu1);

8.2 成员方法

在类里定义方法很简单，不需要写function关键字，直接写方法名，后面就跟正常的函数写法一样，它也可以用this引用自身的属性，如下代码示例：

class StudentsA {
  //下面是定义构造方法，与前面学过的定义构造函数是一样的。
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
 
  //定义成员方法
  Eat() {
    console.log(this.name + "吃饭");
  }
}
var stu2 = new StudentsA(1002, "夏雨");
stu2.Eat(); // 输出：夏雨吃饭
console.log(stu2.name);

类中的方法也有stters和getters。

8.3 实现继承

在面向对象中实现继承通过关键字extends来实现，子类可以继承父类所有的属性和方法。如下代码示意：

class Monitor extends StudentsB {}
//Monitor是StudentsB的子类，StudentsB是Monitor的父类，一个子类只能有一个父类。
var stu5 = new Monitor(1005, "夏天");
console.log(stu5);

我们可以在定义子类的时候在构造方法里或成员方法里用super关键字继承父类的属性及方法。

//用super关键字
class MonitorA extends StudentsB {
  constructor(id, name, position) {
    super(id, name); //用super关键字继承父类属性
    this.position = position;
  }
  Eat() {
    super.Eat(); //用super关键字继承父类方法
    console.log("这是额外的信息"); //增加新的内容
  }
}

8.4成员变量

成员变量是指在类里面定义的变量，如下代码示意，height便是成员变量。

class Student {
  height = ""; //height是成员变量，它不写在构造方法中
}
 
var stu7 = new Student();
console.log(stu7); //Student {height: ''}

8.5静态成员

静态成员是class级别的，它是用static修饰的，只能通过类名来访问，用实例无法访问，如下代码示意，

class Page {
  static count = 0;
}
 
console.log(Page.count); //可以访问到，输出：0
 
Page.count++;
console.log(Page.count); //可以访问到，输出：1
 
var page = new Page(); //实例化类
console.log(page.count); //无法访问，输出：undefined

静态成员方法与静态成员变量类似，如下代码示意：

class PageA {
  //静态成员变量
  static count = 0;
  //静态成员方法
  static fun() {
    PageA.count++;
  }
}
console.log(PageA.count); //输出：0
PageA.fun(); //调用方法，自增1；
console.log(PageA.count); //输出：1

有关面向对象的详细内容可以详见以下文章：

（day 17）JavaScript学习笔记（面向对象）

9.字符串的相关操作

9.1字符串定义

定义字符串可以使用字面值创建，这种定义方式也是常用的，使用起来也比较方便，还可以使用构造函数String来创建字符串对象。如果我们想直接拿到String对象中的内容可以用Valueof方法，不过我们通常不需要显式地“拿出”字符串，JavaScript会自动为我们处理转换。

9.2转义字符

常见转义字符如下表：

转义字符	描述	示例
`\\`	反斜杠字符	`let str = "This is a backslash: \\";`
`\'`	单引号	`let str = 'It\'s a beautiful day.';`
`\"`	双引号	`let str = "He said, \"Hello, world!\"";`
`\n`	换行符	`let str = "First line\nSecond line";`
`\r`	回车符	通常与 `\n` 一起使用，用于Windows风格的换行
`\t`	制表符（Tab）	`let str = "Value1\tValue2";`
`\b`	退格符	不常用，通常被现代浏览器忽略
`\f`	换页符	不常用，通常被现代浏览器忽略
`\v`	垂直制表符	不常用，通常被现代浏览器忽略
`\uXXXX` 或 `\uxxxx`	Unicode字符	`let str = "\u4F60\u597D";` // "你好"
`\xXX` 或 `\xXX...`	十六进制字符	不常用，用于表示特定的ASCII字符

9.3字符串遍历

①for...of循环：最常用最简单的就是用for...of循环,for...of循环可以直接遍历可迭代对象（如数组、字符串等）的元素。如下代码示例：

//for...of循环
var str = "Hello, World!";
for (let item of str) {
  console.log(item);
}

②使用for循环和charAt() 方法: charAt() 方法用于返回指定位置的字符。我们可以结合for 循环来遍历字符串中的每个字符

var str = "Hello, World!";
for (var i = 0; i < str.length; i++) {
  var char = str.charAt(i);
  console.log(char);
}

9.4字符串裁切

字符串裁切可以使用slice() 方法和substring()方法

//slice()方法
console.log(str.slice(0, 5)); //输出：这是一个长
console.log(str.slice(5)); //输出：的字符串，this is a long string
console.log(str.slice(-5, -1)); //输出：trin
console.log(str.slice(4, 1));//起始位置大于结束位置，返回空的

substring()方法与slice()方法类似，区别在于，它不能接受负数，如果有负数，默认会把负数转换成0，substring()方法中如果开始位置大于结束位置它会自动调换位置，把小的数字变成开始位置，大的数字变成结束位置，如下代码示意：

//substring()方法
console.log(str.substring(0, 5)); //输出：这是一个长
console.log(str.substring(5)); //输出：的字符串，this is a long string
console.log(str.substring(-5, -1)); //-5和-1都会转换成0，所以返回空的字符串
console.log(str.substring(-5, 5)); //-5会转换成0，所以输出：这是一个长
console.log(str.substring(4, 1)); //起始位置大于结束位置，二者会颠倒，输出：是一个

9.5 字符串拼接

字符串拼接可以用加号+拼接或者用concat方法，不过推荐使用加号。

9.6大小写转换

在JavaScript中toUpperCasr() 方法用于将字符串中的所有字符转换为大写。toLowerCasr() 方法用于将字符串中的所有字符转换为小写。在JavaScript中没有直接的方法可以将字符串字首字母或句首字母大写。

9.7去除空格

trim()方法可以去除一个字符串的首尾空格，但是不影响中间的空格。

9.8模板字符串

模板字符串是ECMAScript 6（ES6）中引入的一种新的字符串形式，它在字符串中可以包含表达式，从而更加方便地进行字符串拼接和动态生成。模板字符串使用反引号（``）来包围，并在其中使用${表达式}的语法来插入变量或表达式的值。

const name = "Alice";
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.

字符串的相关详细介绍详见以下文章：

(day 18)JavaScript学习笔记（字符串的相关操作）

10.正则表达式

正则表达式常用字符如下：

有关正则表达式的详细操作，详见以下文章

(day 19)JavaScript学习笔记（正则表达式1之创建正则表达式、字符匹配、特殊字符匹配、匹配次数）

(day 20)JavaScript学习笔记（正则表达式2之区间、逻辑和界定符、分组）

(day 21)JavaScript学习笔记（正则表达式3之常见正则表达式、字符串替换和字符串分割）

11.内置对象

11.1 内置对象Number

在JavaScript中，Number 是一个内置对象，用于表示和处理数字值。这个对象提供了多种方法和属性，可以用来进行数值的转换、比较、格式化等操作。

parseInt()方法和parseFloat()方法都可以把字符串类型转换成Number类型，如果字符串中的数值是小数，parseInt()方法会直接把小数点后的内容删掉，如果字符串不是数字，两种方法得到的都是NaN,但是它的数据类型还是Number。

toFixed()方法可以格式化数字为指定小数位数的字符串。

11.2 内置对象Math

下面是Math对象的属性和方法整理成的表格：

11.3 内置对象Date

JavaScript中的内置对象Date用于处理日期和时间。它提供了多种方法和属性，可以获取和设置日期和时间的各个部分，以及进行日期和时间的计算。如下表格是Date常用的属性和方法。

11.4 内置对象JSON

JavaScript中的JSON对象提供了两个主要的方法： JSON.parse()和JSON.stringify()，分别用于将JavaScript对象或值转换为JSON字符串，以及将JSON字符串解析为JavaScript对象或值。

var postJSON = `{
    "id":1001,
    "title":"标题",
    "comments":[
        {
            "userId":2001,
            "comment":"这是2001的评论"
        },
        {
            "userId":2002,
            "comment":"这是2002的评论"
        },
    ],
    "publishned":true,
    "author":null
}`;
console.log(postJSON);
console.log(typeof postJSON); //输出：string

ojbJSON = JSON.parse(postJSON);

console.log(typeof ojbJSON); //object

JSON.stringify(参数1，参数2，参数3)方法中的三个参数说明如下：

参数1：将要序列化成JSON字符串的值。
参数2：（可选）如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中。
参数3：（可选）用于指定缩进空格数；如果省略该参数，则将返回没有空格的字符串。如果这个参数是数字，它表示有多少空格；如果这个参数是字符串，那么该字符串就被当做空格用。

var role = {
  id: 1001,
  name: "唐三",
  skills: ["鬼影迷踪", "紫极魔瞳", "玄玉手", "蓝银霸王枪", "无定风波"],
};
 
console.log(role); //{id: 1001, name: '唐三', skills: Array(5)}
console.log(typeof role); //object
 
roleStr = JSON.stringify(role,null, 2); //将对象转换为字符串

console.log(typeof roleStr); //string

11.5 内置对象set

在JavaScript中Set表示值的集合，类似于数组，但是成员的值都是唯一的，没有重复的值。

set中常用的属性和方法如下：

属性/方法	描述	示例
属性
`size`	返回 `Set` 对象中的元素数量（一个整数）。	`let set = new Set([1, 2, 3]); console.log(set.size); // 输出 3`
方法
`add(value)`	向 `Set` 对象添加一个新的值。如果该值已存在，则不会添加，且 `Set` 的大小不会改变。	`let set = new Set();` `set.add(1);` `set.add(2);` `console.log(set); // Set { 1, 2 }`
`delete(value)`	从 `Set` 对象中移除指定的值。如果成功删除，则返回 `true`；否则返回 `false`。	`let set = new Set([1, 2, 3]); set.delete(2);` `console.log(set); // Set { 1, 3 }`
`has(value)`	返回一个布尔值，表示 `Set` 对象是否包含指定的值。	`let set = new Set([1, 2, 3]); console.log(set.has(2)); // 输出 true`
`clear()`	移除 `Set` 对象中的所有元素。	`let set = new Set([1, 2, 3]);` `set.clear();` `console.log(set); // Set {}`
`entries()`	返回一个新的迭代器对象，它包含 `Set` 对象中每个元素的 `[value, value]` 对。这与 `Set.prototype[Symbol.iterator]()` 相同。	`let set = new Set([1, 2, 3]);` `for (let [value] of set.entries()) { console.log(value);` `} // 输出 1, 2, 3`
`keys()`	返回一个新的迭代器对象，它包含 `Set` 对象中每个元素的键。对于 `Set` 来说，键和值是相同的。这与 `Set.prototype[Symbol.iterator]()` 相同。	`let set = new Set([1, 2, 3]);` `for (let key of set.keys()) { console.log(key);` `} // 输出 1, 2, 3`
`values()`	返回一个新的迭代器对象，它包含 `Set` 对象中每个元素的值。这与 `Set.prototype[Symbol.iterator]()` 相同。	`let set = new Set([1, 2, 3]);` `for (let value of set.values()) { console.log(value);` `} // 输出 1, 2, 3`
`[Symbol.iterator]()`	返回一个新的迭代器对象，它包含 `Set` 对象中每个元素的值。这允许你直接使用 `for...of` 循环遍历 `Set`。	`let set = new Set([1, 2, 3]);` `for (let value of set) { console.log(value);` `} // 输出 1, 2, 3`

11.6 内置对象Map

在JavaScript中，Map是一个内置对象，它提供了一种存储键值对的数据结构。与普通的对象（Object）不同，Map允许你使用任何类型的键（对象或原始值），并且它按照插入的顺序迭代元素。

以下是常用的一些属性和方法。

属性/方法	描述	示例
属性
`size`	返回 `Map` 对象中的键值对数量（一个整数）。	`let map = new Map();` `map.set('key1', 'value1');` `map.set('key2', 'value2');` `console.log(map.size); // 输出 2`
方法
`set(key, value)`	为 `Map` 对象设置一个新的键值对。如果键已存在，则更新其对应的值。	`let map = new Map();` `map.set('key1', 'value1'); console.log(map.get('key1')); // 输出 'value1'`
`get(key)`	返回 `Map` 对象中与指定键关联的值。如果键不存在，则返回 `undefined`。	`let map = new Map();` `map.set('key1', 'value1'); console.log(map.get('key1')); // 输出 'value1'`
`has(key)`	返回一个布尔值，表示 `Map` 对象是否包含指定的键。	`let map = new Map();` `map.set('key1', 'value1'); console.log(map.has('key1')); // 输出 true`
`delete(key)`	从 `Map` 对象中删除指定的键值对。如果删除成功，则返回 `true`；否则返回 `false`。	`let map = new Map();` `map.set('key1', 'value1');` `map.delete('key1');` `console.log(map.has('key1')); // 输出 false`
`clear()`	从 `Map` 对象中删除所有键值对。	`let map = new Map();` `map.set('key1', 'value1');` `map.clear();` `console.log(map.size); // 输出 0`
`keys()`	返回一个新的迭代器对象，它包含 `Map` 对象中每个元素的键。	`let map = new Map();` `map.set('key1', 'value1');` `for (let key of map.keys()) {` `console.log(key);` `} // 输出 'key1'`
`values()`	返回一个新的迭代器对象，它包含 `Map` 对象中每个元素的值。	`let map = new Map();` `map.set('key1', 'value1');` `for (let value of map.values()) { console.log(value);` `} // 输出 'value1'`
`entries()`	返回一个新的迭代器对象，它包含 `Map` 对象中每个元素的 `[key, value]` 对。	`let map = new Map();` `map.set('key1', 'value1');` `for (let [key, value] of map.entries()) { console.log(key, value);` `} // 输出 'key1' 'value1'`
`forEach(callbackFn, thisArg)`	对 `Map` 对象中的每个键值对执行指定的回调函数。	`let map = new Map();` `map.set('key1', 'value1'); map.forEach((value, key) => console.log(key, value)); // 输出 'key1' 'value1'`

关于内置对象的详细介绍，请详见以下文章：

（day 22）JavaScript学习笔记（内置对象1之Number、Math、Date）

（day 23）JavaScript学习笔记（内置对象2之JSON、Set、Map）

12.异常的处理

12.1 捕获异常

在JavaScript中，捕获异常是处理运行时错误的重要机制，它允许程序在遇到错误时采取适当的措施，而不是中断执行。异常捕获主要通过try-catch-finally语句实现。

try {
  var stu = undefined;
  console.log(stu.name);
} catch (err) {
  console.log(err);
  console.log("错误已捕获");
} finally {
  console.log("这行总会执行");
}

console.log("这行会执行");

12.2 throw

在JavaScript中，throw是一个关键字，用于主动抛出一个异常。

function divide(a, b) {
  if (b === 0) {
    throw "除数不能为0";
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  if (error === "除数不能为0") {
    console.error("除数不能为0");
  }
}

12.3 Error对象

Error对象包含了一些重要的属性，其中最常用的两个是name和message。name属性指明了异常的类型，例如“EvalError”、“RangeError”、“ReferenceError”、“SyntaxError”、“TypeError”或“URIError”等。而message属性则提供了关于异常的详细信息，即人类可读的错误描述。

function divide(a, b) {
  if (b === 0) {
    throw new Error("除数不能为0");
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error("捕获到异常:", error.message);
  console.error(error.name);
}

12.4 捕获多个异常

在JavaScript中，如果我们想捕获多个不同类型的异常，需要使用多个catch块来分别处理它们。每个catch块会捕获并处理一种或一类特定的异常。这允许我们针对不同类型的异常执行不同的处理逻辑。

function divide(a, b) {
  if (b === 0) {
    throw new TypeError("除数不能为0");
  }
  if (typeof a !== "number" || typeof b !== "number") {
    throw new TypeError("参数必须是数字");
  }
  return a / b;
}

try {
  const result = divide("hello", 0);
} catch (error) {
  if (error instanceof TypeError) {
    console.error("捕获到TypeError:", error.message);
    // 在这里处理TypeError类型的异常
  } else if (error instanceof RangeError) {
    console.error("捕获到RangeError:", error.message);
    // 在这里处理RangeError类型的异常
  } else {
    console.error("捕获到未知错误:", error);
    // 在这里处理其他类型的异常
  }
}

关于异常的详细介绍详见以下文章。

（day 24）JavaScript学习笔记（异常的处理）