当前位置：首页 > article >正文

WebApis学习笔记，第二节：高级语法

article 2024/11/25 12:31:49

WebApis学习笔记，第二节：高级语法

一、JS组成

我们再回顾一下JS的组成：

ECMAScript:
·规定了js基础语法核心知识。
·比如：变量、分支语句、循环语句、对象等等

Web APIs :
·DOM 文档对象模型， 定义了一套操作HTML文档的API  （document  object model）
·BOM 浏览器对象模型，定义了一套操作浏览器窗口的API （browser object model）

在这里插入图片描述

前面我们简答的学习了DOM的相关语法，接下来我们看下BOM的语法：


BOM (Browser Object Model ) 是浏览器对象模型
·window对象是一个全局对象，也可以说是JavaScript中的顶级对象
·像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
·所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
·window对象下的属性和方法调用的时候可以省略window


【navigator\location\document\history\scree】

二、定时器：延迟函数与间歇函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

1、语法：
setTimeout(回调函数, 延迟时间)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

2、注意:
延时函数需要等待,所以后面的代码先执行
返回值是一个正整数，表示定时器的编号

3、清除延时函数：
clearTimeout(timerId)

间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window

//1、延迟函数
let timerId = setTimeout(() => {
  console.log("我是一个延迟函数");
}, 5000);

console.log("延迟函数需要等待，所以我先执行，等时间到了，它再执行");

console.log("timerId:" + timerId);

//清除延迟函数
//clearTimeout(timerId);
console.log("================================");

//2、间歇函数
let intervalTimerId = setInterval(() => {
  console.log("我是一个间歇函数");
}, 5000);

console.log("间歇函数也需要等待，所以我限制性，等时间到了，它再执行");

console.log("intervalTimerId:" + intervalTimerId);

//清除间歇函数
//clearInterval(intervalTimerId);

三、location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象

属性/方法	说明
href	属性，获取完整的 URL 地址，赋值时用于地址的跳转
search	属性，获取地址中携带的参数，符号？后面部分
hash	属性，获取地址中的啥希值，符号 # 后面部分
reload()	方法，用来刷新当前页面，传入参数 true 时表示强制刷新

<a href="#download">下载</a>
<input class="reload" type="button" value="点我">
<script>
//测试访问路径：http://127.0.0.1:5500/location对象.html?keyword=abc#download

//1、href获取完整地址
console.log(location.href);

//2、search获取？号后面的地址
console.log(location.search);

//3、hash获取#号后面哈希值
console.log(location.hash);

//4、reload刷新页面
const clickBut = document.querySelector(".reload");
clickBut.addEventListener('click', function () {
  location.reload();//刷新页面
  location.reload(true);//强制刷新页面ctrl+f5
});
</script>

四、navigator对象

//navigator是获取浏览器相关信息的对象
console.log(navigator);
document.write(navigator.userAgent);
document.write("<br/>");
document.write(navigator.language);

五、history对象

history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等

方法	作用
back()	后退
forward()	前进
go(参数)	参数1是前进1步，-1是后退一步，以此类推

<body>
  <button class="forwardBtn">前进→</button>
  <button class="backBtn">←后退</button>
  <script>
    const forwardBtn = document.querySelector(".forwardBtn");
    const backBtn = document.querySelector(".backBtn");

    forwardBtn.addEventListener("click", () => {
      history.forward();
      // history.go(1);
    });

    backBtn.addEventListener("click", () => {
      history.back();
      // history.go(-1);
    });
  </script>
</body>

六、本地存储

本地存储，顾名思义就是将数据存储在本地浏览器中

好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右

1、localStorage

localStorage:数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

以键值对的形式存储，并且存储的是字符串， 省略了window

语法：
1、localStorage.setItem(key,value)  存储数据
2、localStorage.getItem(key)  读取数据
3、localStorage.removeItem(key) 删除数据

<script>
    //使用localStorage将年龄存储在浏览器中
    localStorage.setItem("age", 18);
    localStorage.setItem("name", "lee");
    //从localStorage中获取年龄
    console.log(localStorage.getItem("age"));
    console.log("存储的类型是：" + (typeof localStorage.getItem("age")));
    console.log("存储的类型是：" + (typeof localStorage.getItem("name")));
    //清除localStorage
    localStorage.removeItem("age");
    //再次获取age
    console.log(localStorage.getItem("age"));
</script>

##结果：
  18
  存储的类型是：string
  存储的类型是：string
  null

2、sessionStorage

sessionStorage:数据短期保留在本地浏览器中，刷新页面,数据也不会丢失

特性：
1、用法跟localStorage基本相同
2、区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

语法：
1、sessionStorage.setItem(key,value)  存储
2、sessionStorage.getItem(key) 获取
3、sessionStorage.removeItem(key) 删除

<script>
    //1、尝试获取下 上个练习存储的 localStorage 
    let name = localStorage.getItem("name");
    console.log("localStorage-name:" + name);

    //2、sessionStorage存储
    sessionStorage.setItem("home", "handan");
    sessionStorage.setItem("birthday", "2021-12-04");

    //3、sessionStorage查询
    console.log("home:" + sessionStorage.getItem("home"));
    console.log("home:" + typeof sessionStorage.getItem("home"));

    //4、sessionStorage删除
    sessionStorage.removeItem("home");
    console.log("home:" + sessionStorage.getItem("home"));
</script>

##结果：
localStorage-name:lee
home:handan
home:string
home:null

3、存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.

解决方案：
1、需要将复杂数据类型转换成 JSON字符串,在存储到本地

语法：
1、JSON.stringify(复杂数据类型) //将对象转为JSON字符串  
2、JSON.parse(JSON字符串)  //将JSON字符串解析为对象

<script>
    //1、定义一个复杂数据类型
    let user = {
      "age": 18,
      "name": "lee",
      "home": "handan",
      sayHi: function () {
        console.log("hello lee");
      }
    }

    user.sayHi();

    //2、转换成字符串
    let userStr = JSON.stringify(user);

    //3、存储
    localStorage.setItem("user", userStr);
    sessionStorage.setItem("user", userStr);

    //4、查询
    console.log(localStorage.getItem("user"));
    console.log(sessionStorage.getItem("user"));

    //5、转换
    let newUser = JSON.parse(localStorage.getItem("user"));
    console.log(newUser);
    console.log(newUser.age);
    console.log(newUser.name);
    console.log(newUser.home);
    console.log(newUser.sayHi());//证明本地存储 不存函数
</script>

六、数组

1、map方法

map 可以遍历数组处理数据，并且返回新的数组

//1、map创建新的数组
let myArr = ["1", "2", 3];
const newArr = myArr.map((el, index) => {
  console.log(el + "  " + index);
  return el + 1;
});
console.log(myArr);
console.log(newArr);
console.log("-------------------");

#结果：
1  0
2  1
3  2
['1', '2', 3]
['11', '21', 4]

2、join方法

join() 方法用于把数组中的所有元素转换一个字符串

//2、join将所有的内容拼接为一个字符串
let myStr1 = myArr.join();
console.log(myStr1);
let myStr2 = myArr.join("");
console.log(myStr2);
let myStr3 = myArr.join("β");
console.log(myStr3);

#结果：
1,2,3
123
1β2β3

七、正则表达式

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景: 验证表单、过滤敏感词汇等

语法：
1、const reg =  /表达式/          //定义规则

·其中/ /是正则表达式字面量
·正则表达式也是对象

2、test()     //使用正则

·test()方法 用来查看正则表达式与指定的字符串是否匹配
·如果正则表达式与指定的字符串匹配 ，返回true，否则false

3、replace(表达式，待替换的文本)  //字符串替换
· i 代表ignore，正则匹配时，字母不区分大小写
· g 代表global，匹配所有满足表达式的结果，如果没有g,默认只匹配第一个
· m 执行多行匹配

概念：

1、普通字符
·大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
·普通字符只能够匹配字符串中与它们相同的字符。

2、元字符
·是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
·比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
      普通字符写法只能是：/[abcdefghijklmnopqrstuvwxyz]/
·[abc] 查找方括号内的任何字符
·[0-9] 查找任何0~9的数字
·(z|y) 查找z或者y

3、边界符
·边界符（位置符）用来提示字符所处的位置
· ^ 表示匹配行首的文本
· $ 表示匹配行尾的文本
· 如果^和$在一起表示必须是精确匹配

4、量词
· *重复零次或更多次
· +重复一次或更多次
· ?重复零次或一次
· {n}重复n次
· {n,}重复n次或更多次
· {n,m}重复n~m次

5、范围
·[abc] 匹配包含的单个字符，也就是只有a||b||c 这三个单字符返回true
·[a-z] a到z 26个英文字母
·[^a-z] 取反，匹配除了小谢字母以外的字符

6、字符类
· \d 匹配0-9之间的任意数字  等同于[0-9]
· \D 匹配除0-9以外的字符，等同于[^0-9]
· \w 匹配任意字母、数字、下划线，等同于[a-z0-9A-Z_]
· \W 匹配除字母、数字、下划线以外的字符，等同于[^a-z0-9A-Z_]
· \s 匹配空格（包括换行符、制表符、空格符等），等同于[\t\r\n\v\f]
· \S 匹配非空格的字符，等同于[^\t\r\n\v\f]

<script>
    //1、普通字符--有a~z之间的字符
    const reg1 = /[abcdefghijklmnopqrstuvwxyz]/;
    console.log(reg1.test("hello")); //true
    console.log(reg1.test("你好")); //false
    console.log(reg1.test("你好abc你好")); //true

    console.log("-------------");
    //2、元字符--有a~z之间的字符
    const reg2 = /[a-z]/;
    console.log(reg2.test("hello"));//true
    console.log(reg2.test("你好")); //false
    console.log(reg2.test("你好abc你好")); //true

    const reg2_1 = /(abc|123)/;
    console.log(reg2_1.test("ab1"));//false
    console.log(reg2_1.test("abc"));//true
    console.log(reg2_1.test("123"));//true

    console.log("-------------");
    //3、边界符
    const reg3 = /^a/;
    console.log(reg3.test("abcd"));//true
    console.log(reg3.test("dcba"));//false

    const reg4 = /a$/;
    console.log(reg4.test("abcd"));//false
    console.log(reg4.test("dcba"));//true

    const reg5 = /^abc$/;
    console.log(reg5.test("abbbbbbc"));//false
    console.log(reg5.test("abc"));//true


    console.log("-------------");
    //5、数量
    // * 重复次数 >= 0 次
    const reg6 = /^w*$/
    console.log(reg6.test(''))  // true
    console.log(reg6.test('w'))  // true
    console.log(reg6.test('ww'))  // true
    console.log('-----------------------')

    //+ 重复次数 >= 1 次
    const reg7 = /^w+$/
    console.log(reg7.test(''))  // false
    console.log(reg7.test('w'))  // true
    console.log(reg7.test('ww'))  // true
    console.log('-----------------------')

    // ? 重复次数  0 || 1 
    const reg8 = /^w?$/
    console.log(reg8.test(''))  // true
    console.log(reg8.test('w'))  // true
    console.log(reg8.test('ww'))  // false
    console.log('-----------------------')


    // {n} 重复 n 次
    const reg9 = /^w{3}$/
    console.log(reg9.test(''))  // false
    console.log(reg9.test('w'))  // flase
    console.log(reg9.test('ww'))  // false
    console.log(reg9.test('www'))  // true
    console.log(reg9.test('wwww'))  // false
    console.log('-----------------------')

    // {n,} 重复次数 >= n 
    const reg10 = /^w{2,}$/
    console.log(reg10.test(''))  // false
    console.log(reg10.test('w'))  // false
    console.log(reg10.test('ww'))  // true
    console.log(reg10.test('www'))  // true
    console.log('-----------------------')

    // {n,m}   n =< 重复次数 <= m
    const reg11 = /^w{2,4}$/
    console.log(reg11.test('w'))  // false
    console.log(reg11.test('ww'))  // true
    console.log(reg11.test('www'))  // true
    console.log(reg11.test('wwww'))  // true
    console.log(reg11.test('wwwww'))  // false


    console.log("=====================");
    //6、字符类
    const reg12 = /\d{3}/; //包含匹配任意连续3个数字
    console.log(reg12.test("abc")); //false
    console.log(reg12.test("123")); //true
    console.log(reg12.test("a12a34a")); //false
    console.log(reg12.test("a1234a")); //true
    console.log("---------------------");

    const reg13 = /\D{3}/; //包含任意连续3个非数字字符
    console.log(reg13.test("ab123c")); //false
    console.log(reg13.test("abc123c")); //true

    console.log("--------------------");
    const reg14 = /\w{3}/; //包含任意连续三个字母、数字、下划线
    console.log(reg14.test("a71&"));//true
    console.log(reg14.test("a_@12"));//false

    console.log("===============================");
    //7、判断是否是一个邮箱
    const reg15 = /^\w{1,}@(167||qq||127).com$/;
    console.log(reg15.test("james_taylor@127.com"));//true
</script>