目录
1.1BOM
-
BOM(Browser Object Model) 是浏览器对象模型
-
window对象是一个全局对象,也可以说是JS中的顶级对象
-
像document, alert(),console.log()这些都是window的属性,基本BOM的属性和方法都是的window的
-
所有通过VAR定义在全局作用域中的变量、函数都会变成windou对象的属性和方法
-
window对象下的属性和方法调用的时候可以省略window
1.2定时器-延时函数
- JS 内置的一个用代码块延迟执行的函数,叫setTimeout
- 语法
setTimeout(回调函数,等待的毫秒数)
- setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
- 清除延迟函数
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
注意点:
- 延迟函数需要等待,所以后面的代码先执行
- 每一次调用延迟器都会产生一个新的延迟器
两种定时器对比: 执行的次数
延迟函数(setTimeout):执行一次
间歇函数(setInterval):每隔一段时间就执行一次,除非手动清除
案例:5秒钟之后消失的广告
1.3 JS执行机制
-
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了 同步 和 异步。同步: 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。异步 : 你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。他们的本质区别: 这条流水线上各个流程的执行顺序不同。
同步任务:
同步任务都在主线程上执行,形成一个执行栈。
异步任务:
执行机制:
1.4 location对象
// 可以得到当前文件URL地址
console.log(location.href)
// 可以通过JS方式跳转到目标地址
location.href = 'http://www.baidu.com'
1.5 navigator 对象
通过 userAgent 检测浏览器的版本及平台// 检测 userAgent( 浏览 器信息)!(function () {const userAgent = navigator.userAgent// 验证 是否 为 Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone, 则 跳 转 至移 动 站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})()
1.6 histroy 对象
![](https://img-blog.csdnimg.cn/direct/e01b7beb77f441808c2d224c87c716a5.png)
2.1本地储存
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
储存复杂数据类型
本地只能储存字符串,无法储存复杂数据类型
JSON.stringify(复杂数据类型)
会出现[object Object]
需要将复杂数据类型转换成JOSN字符串,再储存到本地
语法:JSON.sringify(复杂数据类型)
此时 会出现问题:因为本地储存里面取出来的是字符串,不是对象,无法直接使用
JSON.parse(JSON字符串)
利用map()和join()数组方法实现字符串拼接
数组中的map方法 迭代数组
使用场景:map 可以遍历数组处理数字,并且返回新的数组
const arr = ['red','blue','green']
const newArr = arr.map(function(ele, index)) { //map里面引用一个回调函数(里面有两个参数)
console.log(ele) //数组元素
console.log(index) // 数组索引号
return ele + '颜色'
})
console.log(newArr) //['red颜色','blue颜色','green颜色']
map 也称为映射。映射是个术语,至两个元素的集之间元素相互“对应”的关系
如图理解,牛肉可以做成汉堡,土豆可以做成薯条,鸡肉可以炸成鸡腿,玉米可以做成爆米花。前面的数组经过处理数据之后,返回一个新的数组 ,两个集合的元素一一对应
map重点在于有返回值,forEach没有返回值
数组中的join方法
作用:join()方法用于把数组中所有的元素转换成一个字符串
语法:
const arr = ['red颜色','blue颜色','green颜色']
console.log(arr.join('') //red颜色blue颜色green颜色
参数:数组元素使通过参数里面指定的分隔符进行分割的,若是空字符串(''),则所有元素之间都没有任何字符,若是其他分隔符,就用该分隔符分割。
console.log(newArr.join()) //red颜色,blue颜色,pink颜色
// 小括号为空则默认用逗号分割
console.log(newArr.join('')) //red颜色blue颜色pink颜色
console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色
遗忘复习知识点:
js使用dataset方法自定义属性:
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset.id) //1
console.log(one.dataset.spm) //不知道
</script>
data-id
dataset.id
CSS属性选择器 (中括号)
<body>
<input type="checkbox" name="agree" /> //复选框的选择器 选择表单中name属性值为‘agree’的元素
</body>
<script>
const agree = document.querySelector('[name=agree]')
</script>