[前端学习] JavaScript 笔记 (四)

最新推荐文章于 2024-08-22 17:38:39 发布

Paxlsean

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量1.6k

点赞数 42

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/weixin_49160784/article/details/137866913

版权

一、Window 对象

BOM（浏览器对象模型）
- window 对象是一个全局对象，也可以说是JavaScript中的顶级对象；
- 像 document、alert()、console.log() 这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的；
- 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法；
- window 对象下的属性和方法调用的时候可以省略 window，如window.alert()一般只写alert()。
定时器 —— 延时函数
JavaScript内置的一个用来让代码延迟执行的函数：setTimeout(回调函数, 等待的毫秒数)。
- 延迟函数只执行一次；间歇函数每隔一段时间就执行一次，除非手动清除。
- 清除延迟函数：clearTimeout(延时函数)，如：let timer = setTimeout(回调函数, 等待时间); clearTimeout(timer)。
- 每一次调用延时器都会产生一个新的延时器。
JS 执行机制
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。单线程意味着所有任务需要排队，前一个任务结束才会执行后一个任务。这样导致的问题是：如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
为了解决这个问题，利用多核CPU的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS中出现了同步和异步。
- 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
- 异步：在执行一个任务的同时，还可以执行其他任务。
- 同步任务：同步任务都在主线程上执行，形成一个执行栈。
- 异步任务：JS 的异步是通过回调函数实现的。异步任务添加到任务队列（也称消息队列）中。一般异步任务有三种类型：
  - 普通事件：如click、resize等；
  - 资源加载：如load、error等；
  - 定时器：setInterval、setTimeout等。
- 事件循环（Event Loop）：事件循环是一个持续运行的过程，它负责检查调用栈和任务队列的状态。当调用栈为空时，事件循环会将任务队列中的任务依次推入调用栈执行，直到调用栈再次为空。
事件循环的运行过程：
1. 执行全局同步代码，将同步任务推入调用栈执行。
2. 当遇到异步任务时，将其放入任务队列，并继续执行同步任务。
3. 当调用栈为空时，事件循环检查微任务队列，执行其中的任务。
4. 微任务执行完成后，事件循环检查任务队列，将任务队列中的任务推入调用栈执行。
5. 重复以上步骤，直至任务队列和微任务队列均为空。
微任务队列存放的是需要在当前任务执行结束后立即执行的任务，如Promise的回调函数。微任务队列的优先级高于任务队列，即使在任务队列中有待执行的任务，也会先执行完微任务队列中的任务。
location 对象
location 的数据类型是对象，它拆分保存了URL地址的各个部分。
常用属性和方法：
- href属性：获取完整的的 URL 地址（如：https://www.baidu.com/），对其赋值可用于地址的跳转。
- search属性：获取地址中的参数，符号?及后面的部分。
- hash属性：获取地址中符号#及后面的部分。
- reload()方法：刷新当前页面location.reload()，括号中传入参数true会强制刷新。

navigator 对象
navigator 的数据类型是对象，它记录了浏览器自身的相关信息。
常用userAgent属性检测浏览器的版本和平台。

  // 检测浏览器信息
  !(function() {
    const userAgent = navigator.userAgent;
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
    // 如果是手机端，则跳转到移动端页面
    if(android || iphone) {
      location.href = 'http://yidongduan.com';
    }
  })()

history 对象
history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
常用属性和方法：
- back()方法：后退，网页将会返回上一个页面（如果有的话）。
- forward()方法：前进，网页将会返回下一个页面（如果有的话）。
- go(参数)方法：参数为数字，若是history.go(-1)，则相当于history.back()；若是history.go(1)则相当于history.forward()。

二、本地存储

本地存储
- 本地存储的数据存储在浏览器中；
- 设置、读取方便，刷新页面数据也不丢失；
- 容量较大，sessionStorage 和 localStorage 约 5M 左右；
- 本地存储只能存储字符串类型数据。
localStorage
localStorage将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在。
特性：
- 可以多窗口（页面）共享（同一浏览器可以共享）；
- 以键值对的形式存储使用。
  语法：
- 存储数据：localStorage.setItem(key, value)，即使存储时传入的值时数字，在取出时得到的也会是字符串型数据；
- 读取数据：localStorage.getItem(key)；
- 删除数据：localStorage.removeItem(key)。
sessionStorage
特性：
- 生命周期为关闭浏览器窗口；
- 在同一个窗口（页面）下数据可以共享；
- 以键值对的形式存储使用；
- 用法和localStorage基本相同，sessionStorage.setItem(key, value), sessionStorage.getItem(key), sessionStorage.getItem(key)。

存储复杂数据类型
数据转换：

JSON.stringify(复杂数据类型)：将复杂数据类型转换为JSON字符串，转换之后可以使用本地储存。
JSON.parse(JSON字符串)：将JSON字符串转为对象。

  const obj = {
    name: '张三',
    age: '18',
    gender: '男'
  }
  // 将对象转换为JSON字符串存储到localStorage中
  const str = JSON.stringify(obj)
  localStorage.setItem('obj', JSON.stringify(obj))
  // JSON字符串的键值对都是用双引号包裹起来的
  console.log(typeof str, str); // 输出：string {"name":"张三","age":"18","gender":"男"}
  // 将取出的JSON字符串转换为对象
  const obj2 = JSON.parse(localStorage.getItem('obj')); 
  console.log(typeof obj2, obj2); // 输出：object {name: '张三', age: '18', gender: '男'}

三、处理数组

map方法迭代数组
map()方法可以遍历数组处理数据，并返回新的数组。map也称映射，指两个元素的集之间元素相互对应的关系。
语法：数组名.map(function(ele, index))，function关键字可以省略，不需要index参数时也可省略index。
join方法
join()方法用于把数组中所有的元素转换成一个字符串。
数组元素通过括号中的参数连接，括号中没有参数则默认连接符为逗号,，参数为空字符串（''）表示没有连接符。
语法：数组名.join('连接符')

  const arr = ['apple', 'banana', 'cherry'];
  const arr2 = ['red', 'yellow', 'pink'];
  const newArr = arr.map((item, index) => {
    console.log(index, item); // 依次输出：0 'apple'；1 'banana'；2 'cherry'
    return item + ' ' + arr2[index]; // 对应位置的元素拼接，遍历结束后返回新数组
  });
  console.log(newArr);  // 输出：['apple red', 'banana yellow', 'cherry pink']
  console.log(newArr.join()); // 输出：apple red,banana yellow,cherry pink
  console.log(newArr.join('|'));  // 输出：apple red|banana yellow|cherry pink

四、正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。常用于表单验证（匹配）、过滤敏感词（替换）、提前字符串的一部分（提取）。

正则表达式的使用

定义正则表达式语法：const 变量名 = /表达式/：其中/ /是正则表达式的字面量。
查找：正则表达式名.test(被查找的原字符串)或正则表达式名.exec(被查找的原字符串)。

  const str = 'Hello World!';
  const str1 = '你好，世界！';
  // 创建正则表达式，中间的不需要引号
  const reg = /o/; // 匹配字符'o'
  const reg1 = /好/; // 匹配字符'好'
  // 匹配：使用test()方法，返回true或false
  console.log(reg.test(str)); // 输出：true
  // 匹配：使用exec()方法，返回匹配的结果，是一个数组，如果没有匹配到返回null
  // 匹配到的结果是一个数组，第一个元素是匹配到的字符串，index是匹配到的字符串的索引，
  // input是原字符串，第四个元素是匹配到的分组
  console.log(reg1.exec(str1)); // 输出：['好', index: 3, input: '你好，世界！', groups: undefined]

元字符
元字符（特殊字符）是一些具有特殊含义的字符，极大提高了匹配时的灵活性。

边界符（位置符，以什么开头和以什么结尾）：^匹配开始的字符，$匹配结尾的字符。

  // ^ 表示匹配字符串的开始位置, /^a/ 表示匹配字符串的开始位置是a
  console.log(/^a/.test('apple')); // true
  console.log(/^a/.test('happy')); // false
  // $ 表示匹配字符串的结束位置, /a$/ 表示匹配字符串的结束位置是a
  console.log(/a$/.test('cba')); // true
  console.log(/a$/.test('abc')); // false
  // ^$ 一起使用, /^$/ 表示匹配空字符串，/^abc$/ 表示精准匹配abc
  console.log(/^$/.test('')); // true
  console.log(/^$/.test('abc')); // false
  console.log(/^abc$/.test('abc')); // true
  console.log(/^abc$/.test('abcc')); // false

量词（表示重复次数）：

量词	说明
`*`	前面的字符重复零次或多次（count >= 0）
`+`	前面的字符重复一次或多次（count >= 1）
`?`	前面的字符重复零次或一次（count = 0 或 count = 1）
`{n}`	前面的字符重复n次（count = n）
`{n,}`	前面的字符重复n次或更多次（count >= n）（逗号两侧不能有空格）
`{n,m}`	前面的字符重复n ~ m 次（n <= count <= m）（逗号两侧不能有空格）

  // * 表示出现0次或多次
  console.log(/^a*$/.test(''), /^a*$/.test('a'), /^a*$/.test('aa')); // true true true
  // + 表示出现1次或多次
  console.log(/^a+$/.test(''), /^a+$/.test('a'), /^a+$/.test('aa')); // false true true
  // ? 表示出现0次或1次
  console.log(/^a?$/.test(''), /^a?$/.test('a'), /^a?$/.test('aa')); // true true false
  // {n} 表示出现n次
  console.log(/^a{2}$/.test(''), /^a{2}$/.test('a'), /^a{2}$/.test('aa'), /^a{2}$/.test('aaa')); // false false true flase
  // {n,} 表示出现n次或n次以上
  console.log(/^a{2,}$/.test(''), /^a{2,}$/.test('a'), /^a{2,}$/.test('aa'), /^a{2,}$/.test('aaa')); // false false true true
  // {n,m} 表示出现n次到m次
  console.log(/^a{1,2}$/.test(''), /^a{1,2}$/.test('a'), /^a{1,2}$/.test('aa'), /^a{1,2}$/.test('aaa')); // false true true false

字符类：.表示匹配除换行符之外的任意一个字符；[]字符集合，匹配方括号中的任意一个字符，方括号中的字符的可写类型有：

写法	说明
`[abc]`	匹配a、b、c中的任意一个字符
`[a-z]`	范围：匹配 a ~ z 共26个小写英文字母中的任意一个
`[a-zA-Z0-9]`	范围：匹配大小写英文字母和数字0~9中的任意一个
`[^abc]`	取反：匹配方括号中除了^后面的字符之外的任意一个字符

  // . 匹配除换行符之外的任意一个字符
  console.log(/^.$/.test('a'));  // true
  console.log(/^.$/.test('\n'));  // false
  console.log(/^a.c$/.test('abc'));  // true
  // [] 匹配方括号中的任意一个字符，如[abc]匹配a、b、c中的任意一个字符
  console.log(/^[abc]$/.test('a')); // true
  console.log(/^[abc]$/.test('abc')); // false
  // 范围：- 匹配方括号中的范围，如[a-z]匹配a到z中的任意一个字符
  console.log(/^[a-z]$/.test('a')); // true
  console.log(/^[abc0-5]$/.test('4')); // true
  // 取反：^ 匹配方括号中除了^后面的字符之外的任意一个字符
  console.log(/^[^abc]$/.test('d'));  // true
  console.log(/^[^a-cA-C0]$/.test('0'));  // false

预定义类：某些常见模式的简写方式：

写法	说明
`\d`	匹配0到9中的任意数字，相当与`[0-9]`
`\D`	匹配除0到9以外的任意数字，相当与`[^0-9]`
`\w`	匹配字母、数字、下划线，相当与`[A-Za-z0-9_]`
`\W`	匹配非字母、数字、下划线，相当与`[^A-Za-z0-9_]`
`\s`	匹配任意的空白符，包括空格、制表符、换页符等，相当于`[\t\r\n\v\f]`
`\S`	匹配任意的非空白符，相当于`[^\t\r\n\v\f]`

其中，\n 匹配换行符，\r 匹配回车符，\t 匹配制表符，\v 匹配垂直制表符，\f 匹配换页符。

修饰符
修饰符约束正则执行的某些细节行为，如是否取反大小写、是否支持多行匹配等。写在正则表达式的最后。

i表示匹配时字母不区分大小写；
g表示匹配所有满足正则表达式的结果（查找所有匹配而非在找到第一个匹配后停止）;
m表示执行多行匹配

  console.log(/a/.test('A')); // false
  console.log(/a/i.test('A')); // true
  console.log('aBCaBC'.replace(/a/g, 'A')); // ABCABC
  console.log(/d/m.test('abc\nabcd')); // true
  // i g 可以同时使用，但是 m 不能和 i 同时使用，否则会报错
  console.log('aBCABC'.replace(/a/ig, 'D')); // DBCDBC

Paxlsean

关注

42
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
[前端学习] JavaScript 笔记 (四)

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。常用于表单验证（匹配）、过滤敏感词（替换）、提前字符串的一部分（提取）。微任务队列存放的是需要在当前任务执行结束后立即执行的任务，如Promise的回调函数。微任务队列的优先级高于任务队列，即使在任务队列中有待执行的任务，也会先执行完微任务队列中的任务。表示匹配除换行符之外的任意一个字符；字符集合，匹配方括号中的任意。
复制链接

扫一扫