Window对象
1.BOM（浏览器对象模型）
2.定时器---延时函数
setTimeout和setInterval区别在于执行次数上，有些特殊情况还是要删除的
5s删除广告
<body>
<div>
<img src="./小猫1.png" alt="">
</div>
<script>
const div = document.querySelector('div')
setTimeout(function(){
div.style.display = 'none'
},5000)
</script>
</body>
3.js执行机制和事件循环event loop
4. location对象
属性与方法
herf属性：可以用js实现跳转，获取完整的URL地址
search属性：获取地址中携带的参数，即？后面的内容
hash属性：获取地址中的哈希值，即#后面的部分（单页面常用，不刷新页面，显示不同的页面）
reload（）方法：用来刷新当前的页面，传入参数true时表示强制刷新
刷新按钮
<body>
<div>lalala</div>
<div>你干嘛</div>
<button>刷新</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
location.reload()
})
</script>
</body>
5s后自动返回首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com"></a>
<script>
// 获取元素
const a = document.querySelector('a')
// 开启定时器
// 设计倒计时
let time = 5
a.innerHTML = `支付成功,<span>${time}</span>秒钟之后跳转到首页`
let timerId = setInterval(function(){
// 因为是1s后执行定时器，所以说先time--是没有问题的
time--
a.innerHTML = `支付成功,<span>${time}</span>秒钟之后跳转到首页`
if(time === 0){
// 清除定时器
clearInterval(timerId)
// 跳转到首页
location.href = 'https://www.baidu.com'
}
},1000)
</script>
</body>
</html>
5.navigator对象（记录浏览器自身的相关信息）
属性和方法
userAgent属性：可以用来检测浏览器的版本及平台
可以用来识别用户是移动端还是pc端，然后实现页面的跳转
用户端跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>这是pc端</span>
<script>
// 检测userAgent（浏览器信息）,这是一个立即执行函数的稀奇古怪写法
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const 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'
}
})();
</script>
</body>
</html>
6.history对象
本地存储
1.是什么本地存储
2. localStorage
1.永久存储在本地（用户的电脑），除非手动删除，关闭页面也会存在
2.本地存储只能存字符后
基本使用（增删改查）
<body>
<script>
// 存储一个名字 uname xzx
// 本地存储只能存储字符串类型，会把18转化为字符串'18'
localStorage.setItem('uname','xzx')
localStorage.setItem('age',18)
// 获取uname
const uname = localStorage.getItem('uname')
console.log(uname)
// 删除本地存储·
localStorage.removeItem('uname')
// 修改年龄
localStorage.setItem('age',20)
</script>
</body>
3. sessionStorage
4.存储复杂数据类型
- 复杂数据类型不能直接存储进去，必须要转化成字符串
基本使用
<script>
const obj = {
name:'xzx',
age:18,
hobby: 'sleep'
}
// 存储复杂数据类型，不能直接存储，要先把复杂类型转成JSON 字符串再存
// 应该使用JSON.stringify()方法把复杂类型转成字符串再存储
localStorage.setItem('obj',JSON.stringify(obj))
console.log(localStorage.getItem('obj'));
// JSON对象属性和值都有引号，而且统一是双引号
// 把JSON转换为对象
// parse可以把JSON字符串转换为对象
const obj2 = JSON.parse(localStorage.getItem('obj'))
console.log(obj2);
console.log(obj2.name);
</script>
数组map()方法和join()方法
1.map
基本使用
<script>
const arr = ['懒羊羊','鑫鑫','噜噜']
// map方法可以遍历数组，对数组中的每个元素进行操作，返回一个新数组
const newArr = arr.map(function(ele,index){
console.log(ele)
console.log(index)
return ele + '大王'
})
document.write(newArr)
</script>
2.join方法
基本使用
<script>
const arr = ['懒羊羊','鑫鑫','噜噜']
// join方法可以把数组中的元素用指定的字符串连接起来，返回一个新字符串
// 如果不指定字符串，默认用逗号连接
// 可以用空格连接
const str = arr.join(' ')
document.write(str)
</script>
