JavaScript学习笔记 01
在写牛客时对前端三件套(html,css,js)的知识点进行复习。
在学vue或者做项目时对知识点进行补充。
(在旧笔记基础上写的,导致有的知识点非常古早…有的又是最近的……)
1. 对象
(1)Promise对象
Promise 对象是 JavaScript 中用于处理异步操作的一种机制,它代表了一个异步操作的最终完成(或失败)及其结果的值。
一个 Promise 对象可以处于以下三种状态之一:
- Pending(进行中):初始状态,表示操作尚未完成,仍处于进行中。
- Fulfilled(已完成):表示操作已经成功完成。
- 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()
返回的迭代器中的所有键提取出来,并转换为一个数组。这种写法非常方便,可以快速地将迭代器中的内容转换为数组,而不需要手动遍历迭代器。