JavaScript学习笔记 01

JavaScript学习笔记 01

在写牛客时对前端三件套（html，css，js）的知识点进行复习。

在学vue或者做项目时对知识点进行补充。

(在旧笔记基础上写的，导致有的知识点非常古早…有的又是最近的……)

1. 对象

（1）Promise对象

Promise 对象是 JavaScript 中用于处理异步操作的一种机制，它代表了一个异步操作的最终完成（或失败）及其结果的值。

一个 Promise 对象可以处于以下三种状态之一：

1. Pending（进行中）：初始状态，表示操作尚未完成，仍处于进行中。
2. Fulfilled（已完成）：表示操作已经成功完成。
3. Rejected（已失败）：表示操作已经失败。

Promise 对象具有以下特点：

• 状态不可逆转：一个 Promise 对象一旦处于 Fulfilled 或 Rejected 状态，就不会再改变状态。
• 链式调用：可以通过 then() 方法链式调用多个回调函数，分别处理成功和失败的情况。
• 错误处理：可以通过 catch() 方法或者 then() 方法的第二个参数来处理 Promise 对象的失败状态。
• 异步操作：Promise 对象主要用于处理异步操作，比如网络请求、文件读取等。

（2）正则表达式

在 JavaScript 中，正则表达式是一种特殊的对象，用于描述字符串的模式或规则。JavaScript 提供了内置的 RegExp 对象来支持正则表达式的创建和操作。

创建正则表达式：

JavaScript 中有两种方式来创建正则表达式：

• 字面量表示法：使用斜杠（/）将模式包裹起来，例如：/pattern/flags。

  var pattern = /hello/i; // 匹配字符串中的 "hello"，忽略大小写
  

• 构造函数表示法：使用 RegExp 构造函数来创建正则表达式对象。

  var pattern = new RegExp('hello', 'i'); 
  // 匹配字符串中的 "hello"，忽略大小写
  

匹配操作：

JavaScript 提供了一些方法来执行正则表达式的匹配操作，常用的方法包括：

• test()：测试字符串是否匹配模式，返回布尔值。

  var result = pattern.test('Hello world');
  console.log(result); // 输出 true
  

• exec()：返回匹配到的结果数组或者 null。

  var result = pattern.exec('Hello world');
  console.log(result);// 输出 ["Hello", index: 0, input: "Hello world", groups: undefined]
  

正则表达式的修饰符：

在正则表达式字面量或者构造函数中，可以使用修饰符来修改匹配的行为，常见的修饰符包括：

• i：忽略大小写。
• g：全局匹配，匹配到所有符合条件的结果。
• m：多行匹配，用于匹配多行文本。

正则表达式的模式：

正则表达式模式是由普通字符和元字符组成的，用来描述匹配的模式。一些常见的元字符包括：

• .：匹配任意单个字符。
• \d：匹配任意一个数字字符。
• \w：匹配任意一个字母、数字或下划线字符。
• []：字符类，匹配方括号内的任意一个字符。
• ^：匹配字符串的开头位置。
• $：匹配字符串的结尾位置。
• |：逻辑或，匹配两个模式中的任意一个。
• ()：分组，将模式组合成一个整体。

JavaScript 的正则表达式也支持量词、贪婪匹配、惰性匹配等特性，可以实现更复杂的匹配需求。正则表达式在 JavaScript 中广泛应用于字符串的搜索、替换、验证等操作。

（3）迭代器

在JavaScript中迭代器（iterator）是一种对象，它提供了一种方法来遍历任何可迭代对象（iterable object）的元素。可迭代对象包括数组、Map、Set、字符串等。

迭代器对象具有一个 next() 方法，每次调用该方法都会返回包含两个属性的对象：value 和 done。其中，value 表示当前迭代到的值，done 表示是否已经迭代完毕。

  // 如果元素数量小于等于 k
    if(map.size <= k) {
        return [...map.keys()]
    }

在这段代码中，map.keys() 返回的就是一个迭代器对象，它可以被用来逐个获取 map 中的键（即元素）。调用 next() 方法可以依次获取键，并且判断是否已经迭代完所有的键。

使用扩展运算符 [...map.keys()] 将迭代器中的所有键提取出来，转换为一个数组。这样就可以直接得到一个包含了所有 map 中键的数组，而不需要手动使用迭代器的 next() 方法逐个获取键。

2. 语句和声明

（1）for…in语句

（1）以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

var obj = { a: 1, b: 2, c: 3 };

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

3.函数

（1）回调函数

回调函数是一种常见的编程模式，它是指将一个函数作为参数传递给另一个函数，并且在特定的条件下（通常是异步操作完成时）被调用执行的函数。

在 JavaScript 中，回调函数通常用于处理异步操作，例如网络请求、文件读取、定时器等。当异步操作完成时，会调用回调函数来处理操作的结果或者执行特定的逻辑。

回调函数的优势在于可以将代码模块化，并且使得程序能够在异步操作完成后执行特定的逻辑。这种方式能够避免阻塞代码执行，提高程序的性能和响应速度。

例如，在一个 AJAX 请求中，我们可以将回调函数传递给 $.ajax() 方法，在请求完成后，jQuery 将调用这个回调函数来处理返回的数据。示例代码如下：

$.ajax({
    url: 'example.com/data',
    success: function(data) {
        // 在请求成功后执行的逻辑
        console.log('Data received:', data);
    },
    error: function(xhr, status, error) {
        // 在请求失败后执行的逻辑
        console.error('Error occurred:', error);
    }
});

在这个例子中，success 和 error 参数就是回调函数，它们会在 AJAX 请求成功或失败时被调用执行。

4.类

5.杂七杂八

（1）JS中的$$()

（1）$$()这个方法是在DOM中使用过于频繁的document.getElementById()方法的一个便利的简写。

（2）就像这个DOM方法一样,这个方法返回参数传入的id的那个参数。但也可以传入多个id作为参数然后$()返回一个带有所有要求的元素的一个Array对象.

（2）语法糖：async/await

async/await 是 JavaScript 中用于处理异步操作的一种语法糖，它是在 ES2017（也称为 ES8）中引入的新特性。async/await 通过使异步代码看起来像同步代码一样，使得异步操作更加清晰和易于理解。

具体来说：

• async 关键字用于声明一个函数是异步的，即使函数中没有异步操作也可以使用 async 来声明异步函数。异步函数会返回一个 Promise 对象，无论它是否显式返回 Promise。
• await 关键字用于等待一个 Promise 对象的解决或拒绝，并且只能在 async 函数内部使用。await 关键字后面跟着一个 Promise 对象，它会暂停当前函数的执行，直到该 Promise 对象状态变为解决（resolved）或拒绝（rejected）。

使用 async/await 可以改善异步代码的可读性和可维护性，同时减少了回调地狱的情况。它使得异步操作的代码结构更加清晰，更接近同步代码的书写方式，有助于提高代码的质量和可维护性。

以下是一个使用 async/await 处理异步操作的示例：

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error occurred:', error);
    }
}

fetchData();

在这个示例中，fetchData 函数声明为 async 函数，内部使用 await 关键字等待异步操作完成。在 try...catch 块中捕获可能的错误，使得错误处理更加方便。

（3）JS中的省略号

在 JavaScript 中，省略号（...）有两种主要的用法：扩展运算符（spread operator）和剩余参数（rest parameters）。

① 扩展运算符：在函数调用或数组/对象字面量中，... 可以将数组或可迭代对象展开成独立的元素。这在需要将数组转换为参数列表或合并多个数组时非常有用。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 用于函数调用
function myFunction(x, y, z) { }
const args = [0, 1, 2];
myFunction(...args); // 等同于 myFunction(0, 1, 2)

② 剩余参数：在函数声明或函数表达式的参数中，... 可以将剩余的参数收集成一个数组。这使得函数能够接受任意数量的参数，而不需要事先指定参数的个数。例如：

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}

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

在代码中，[...map.keys()] 使用了扩展运算符，将 map.keys() 返回的迭代器中的所有键提取出来，并转换为一个数组。这种写法非常方便，可以快速地将迭代器中的内容转换为数组，而不需要手动遍历迭代器。