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 内置的一个用来让代码延迟执行的函数，叫 setTimeout1、语法：
setTimeout(回调函数, 延迟时间)setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window2、注意:
延时函数需要等待,所以后面的代码先执行
返回值是一个正整数，表示定时器的编号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")));//清除localStoragelocalStorage.removeItem("age");//再次获取ageconsole.log(localStorage.getItem("age"));
</script>

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

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

概念：1、普通字符
·大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
·普通字符只能够匹配字符串中与它们相同的字符。2、元字符
·是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
·比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/普通字符写法只能是：/[abcdefghijklmnopqrstuvwxyz]/
·[abc] 查找方括号内的任何字符
·[0-9] 查找任何0~9的数字
·(z|y) 查找z或者y3、边界符
·边界符（位置符）用来提示字符所处的位置
· ^ 表示匹配行首的文本
· $ 表示匹配行尾的文本
· 如果^和$在一起表示必须是精确匹配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")); //trueconsole.log(reg1.test("你好")); //falseconsole.log(reg1.test("你好abc你好")); //trueconsole.log("-------------");//2、元字符--有a~z之间的字符const reg2 = /[a-z]/;console.log(reg2.test("hello"));//trueconsole.log(reg2.test("你好")); //falseconsole.log(reg2.test("你好abc你好")); //trueconst reg2_1 = /(abc|123)/;console.log(reg2_1.test("ab1"));//falseconsole.log(reg2_1.test("abc"));//trueconsole.log(reg2_1.test("123"));//trueconsole.log("-------------");//3、边界符const reg3 = /^a/;console.log(reg3.test("abcd"));//trueconsole.log(reg3.test("dcba"));//falseconst reg4 = /a$/;console.log(reg4.test("abcd"));//falseconsole.log(reg4.test("dcba"));//trueconst reg5 = /^abc$/;console.log(reg5.test("abbbbbbc"));//falseconsole.log(reg5.test("abc"));//trueconsole.log("-------------");//5、数量// * 重复次数 >= 0 次const reg6 = /^w*$/console.log(reg6.test(''))  // trueconsole.log(reg6.test('w'))  // trueconsole.log(reg6.test('ww'))  // trueconsole.log('-----------------------')//+ 重复次数 >= 1 次const reg7 = /^w+$/console.log(reg7.test(''))  // falseconsole.log(reg7.test('w'))  // trueconsole.log(reg7.test('ww'))  // trueconsole.log('-----------------------')// ? 重复次数  0 || 1 const reg8 = /^w?$/console.log(reg8.test(''))  // trueconsole.log(reg8.test('w'))  // trueconsole.log(reg8.test('ww'))  // falseconsole.log('-----------------------')// {n} 重复 n 次const reg9 = /^w{3}$/console.log(reg9.test(''))  // falseconsole.log(reg9.test('w'))  // flaseconsole.log(reg9.test('ww'))  // falseconsole.log(reg9.test('www'))  // trueconsole.log(reg9.test('wwww'))  // falseconsole.log('-----------------------')// {n,} 重复次数 >= n const reg10 = /^w{2,}$/console.log(reg10.test(''))  // falseconsole.log(reg10.test('w'))  // falseconsole.log(reg10.test('ww'))  // trueconsole.log(reg10.test('www'))  // trueconsole.log('-----------------------')// {n,m}   n =< 重复次数 <= mconst reg11 = /^w{2,4}$/console.log(reg11.test('w'))  // falseconsole.log(reg11.test('ww'))  // trueconsole.log(reg11.test('www'))  // trueconsole.log(reg11.test('wwww'))  // trueconsole.log(reg11.test('wwwww'))  // falseconsole.log("=====================");//6、字符类const reg12 = /\d{3}/; //包含匹配任意连续3个数字console.log(reg12.test("abc")); //falseconsole.log(reg12.test("123")); //trueconsole.log(reg12.test("a12a34a")); //falseconsole.log(reg12.test("a1234a")); //trueconsole.log("---------------------");const reg13 = /\D{3}/; //包含任意连续3个非数字字符console.log(reg13.test("ab123c")); //falseconsole.log(reg13.test("abc123c")); //trueconsole.log("--------------------");const reg14 = /\w{3}/; //包含任意连续三个字母、数字、下划线console.log(reg14.test("a71&"));//trueconsole.log(reg14.test("a_@12"));//falseconsole.log("===============================");//7、判断是否是一个邮箱const reg15 = /^\w{1,}@(167||qq||127).com$/;console.log(reg15.test("james_taylor@127.com"));//true
</script>