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
let timerId = setTimeout(() => {console.log("我是一个延迟函数");
}, 5000);console.log("延迟函数需要等待,所以我先执行,等时间到了,它再执行");console.log("timerId:" + timerId);
console.log("================================");
let intervalTimerId = setInterval(() => {console.log("我是一个间歇函数");
}, 5000);console.log("间歇函数也需要等待,所以我限制性,等时间到了,它再执行");console.log("intervalTimerId:" + intervalTimerId);
三、location对象
location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象
属性/方法 | 说明 |
---|
href | 属性,获取完整的 URL 地址,赋值时用于地址的跳转 |
search | 属性,获取地址中携带的参数,符号 ?后面部分 |
hash | 属性,获取地址中的啥希值,符号 # 后面部分 |
reload() | 方法,用来刷新当前页面,传入参数 true 时表示强制刷新 |
<a href="#download">下载</a>
<input class="reload" type="button" value="点我">
<script>
console.log(location.href);
console.log(location.search);
console.log(location.hash);
const clickBut = document.querySelector(".reload");
clickBut.addEventListener('click', function () {location.reload();location.reload(true);
});
</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();});backBtn.addEventListener("click", () => {history.back();});</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.setItem("age", 18);localStorage.setItem("name", "lee");console.log(localStorage.getItem("age"));console.log("存储的类型是:" + (typeof localStorage.getItem("age")));console.log("存储的类型是:" + (typeof localStorage.getItem("name")));localStorage.removeItem("age");console.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>let name = localStorage.getItem("name");console.log("localStorage-name:" + name);sessionStorage.setItem("home", "handan");sessionStorage.setItem("birthday", "2021-12-04");console.log("home:" + sessionStorage.getItem("home"));console.log("home:" + typeof sessionStorage.getItem("home"));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>let user = {"age": 18,"name": "lee","home": "handan",sayHi: function () {console.log("hello lee");}}user.sayHi();let userStr = JSON.stringify(user);localStorage.setItem("user", userStr);sessionStorage.setItem("user", userStr);console.log(localStorage.getItem("user"));console.log(sessionStorage.getItem("user"));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 可以遍历数组处理数据,并且返回新的数组
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() 方法用于把数组中的所有元素转换一个字符串
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>const reg1 = /[abcdefghijklmnopqrstuvwxyz]/;console.log(reg1.test("hello")); console.log(reg1.test("你好")); console.log(reg1.test("你好abc你好")); console.log("-------------");const reg2 = /[a-z]/;console.log(reg2.test("hello"));console.log(reg2.test("你好")); console.log(reg2.test("你好abc你好")); const reg2_1 = /(abc|123)/;console.log(reg2_1.test("ab1"));console.log(reg2_1.test("abc"));console.log(reg2_1.test("123"));console.log("-------------");const reg3 = /^a/;console.log(reg3.test("abcd"));console.log(reg3.test("dcba"));const reg4 = /a$/;console.log(reg4.test("abcd"));console.log(reg4.test("dcba"));const reg5 = /^abc$/;console.log(reg5.test("abbbbbbc"));console.log(reg5.test("abc"));console.log("-------------");const reg6 = /^w*$/console.log(reg6.test('')) console.log(reg6.test('w')) console.log(reg6.test('ww')) console.log('-----------------------')const reg7 = /^w+$/console.log(reg7.test('')) console.log(reg7.test('w')) console.log(reg7.test('ww')) console.log('-----------------------')const reg8 = /^w?$/console.log(reg8.test('')) console.log(reg8.test('w')) console.log(reg8.test('ww')) console.log('-----------------------')const reg9 = /^w{3}$/console.log(reg9.test('')) console.log(reg9.test('w')) console.log(reg9.test('ww')) console.log(reg9.test('www')) console.log(reg9.test('wwww')) console.log('-----------------------')const reg10 = /^w{2,}$/console.log(reg10.test('')) console.log(reg10.test('w')) console.log(reg10.test('ww')) console.log(reg10.test('www')) console.log('-----------------------')const reg11 = /^w{2,4}$/console.log(reg11.test('w')) console.log(reg11.test('ww')) console.log(reg11.test('www')) console.log(reg11.test('wwww')) console.log(reg11.test('wwwww')) console.log("=====================");const reg12 = /\d{3}/; console.log(reg12.test("abc")); console.log(reg12.test("123")); console.log(reg12.test("a12a34a")); console.log(reg12.test("a1234a")); console.log("---------------------");const reg13 = /\D{3}/; console.log(reg13.test("ab123c")); console.log(reg13.test("abc123c")); console.log("--------------------");const reg14 = /\w{3}/; console.log(reg14.test("a71&"));console.log(reg14.test("a_@12"));console.log("===============================");const reg15 = /^\w{1,}@(167||qq||127).com$/;console.log(reg15.test("james_taylor@127.com"));
</script>