表单大师 做网站,手机端网站建设哪家好,外贸推广邮件,seo公司 杭州目录 BOM操作浏览器一、Window对象1.1 BOM#xff08;浏览器对象模型#xff09;1.2 定时器-延时函数1.3 js执行机制1.4 location对象1.5 navigator对象1.6 history对象 二、本地存储三、补充数组中的map方法数组中的join方法数组中的forEach方法(重点)数组中的filter方法(重… 目录 BOM操作浏览器一、Window对象1.1 BOM浏览器对象模型1.2 定时器-延时函数1.3 js执行机制1.4 location对象1.5 navigator对象1.6 history对象 二、本地存储三、补充数组中的map方法数组中的join方法数组中的forEach方法(重点)数组中的filter方法(重点) BOM操作浏览器
一、Window对象
1.1 BOM浏览器对象模型
window对象是一个全局对象是js中的顶级对象document、alert()、console.log()都是window的属性基本BOM的属性和方法都是我window的所有通过var定义再全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用时可以略window
1.2 定时器-延时函数
延时函数与间歇函数不同只执行一次 语法setTimeout(回调函数,等待的毫秒数) 清楚延时函数
let timer setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)【注意】延时器需要等待后面的代码先执行每一次调用延时器都会产生一个新的延时器
1.3 js执行机制
JavaScript是单线程的为了解决这个问题利用多核CPU的计算能力出现了同步和异步 同步和异步的本质区别这条流水线上各个流程的执行顺序不同
同步任务 同步任务都在主线程上执行形成一个执行栈异步任务 就是的异步任务通过回调函数实现异步任务相关添加到任务队列中任务队列也叫消息队列 异步任务一般有三个类型① 普通事件click、resize ② 资源加载load、error ③ 定时器setInterval、setTimeout 执行步骤① 先执行执行栈中的同步任务 ② 异步任务放到任务队列 ③ 当执行栈中的同步任务执行完毕时系统或依次读取任务队列中的异步任务事件循环event loop由于主线程不断地重复获取任务、执行任务再获取任务、在执行这种机制就叫事件循环
1.4 location对象
location的数据类型是对象它拆分并保存了url地址的各个部分 常用属性和方法
href属性 获取完整的url地址赋值时用于地址的跳转// 可以得到当前文件url地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href http://www.itcast.cnsearch属性 获取地址中携带的参数符号后面部分hash属性 获取地址中携带的参数符号#后面部分reload()方法 刷新页面可以传入参数传入true表示强制刷新
1.5 navigator对象
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 history对象
history的数据类型是对象管理历史记录 前进、后退、历史记录 常见属性和方法
back() 后退功能forward() 前进功能go(参数) 前进后退参数如果是1就前进一个页面如果是-1就后退一个页面
二、本地存储
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大sessionStorage和localStorage约5M左右常见使用场景页面刷新数据不丢失 localStorage 作用可以把数据永久的存储在本地用户的电脑除非手动删除否则关闭页面也会存在 特性① 可以多窗口共享 ② 以键值对形式存储使用 语法 存储有就是存储没有就是修改 localStorage.setItem(key,value)获取 localStorage.getItem(key)删除 localStorage.removeItem(key) 【注意】本地存储只能存储字符串类型 sessionStorage 关闭浏览器时数据消失 特性① 生命周期为关闭浏览器窗口 ② 在同一个窗口下数据可以共享 ③ 以键值对的形式存储使用 ④ 用法与localStorage基本相同 存储复杂数据类型 解决本地存储只能存储字符串类型数据的问题 把对象转换为JSON字符串JSON.stringify(obj) 把JSON字符串转换为对象JSON.parse(localStorage.getItem(obj)) JSON对象属性和值都有引号且引号都用双引号
三、补充
数组中的map方法
遍历数组处理数据并且返回新的数组 map也叫映射有返回值forEach没有 语法
数组名.map(function (数组元素元素索引) {})数组中的join方法
用于把数组中的所有元素转换成一个字符串 转换后的数组元素通过参数里指定的分隔符进行分割若为空字符串(‘’),则所有元素之间没有任何字符,参数为空则用逗号分隔 语法
// 数组名.join()
const arr [red颜色,blue颜色,green颜色]
console.log(arr.join())数组中的forEach方法(重点)
遍历数组中的每个元素无返回值适合遍历数组对象 语法
数组名.forEach(function (数组元素元素索引) {})数组中的filter方法(重点)
筛选数组符合条件的元素并返回筛选之后元素的新数组不改变原数组只能写比较运算符 语法 currentValue必须写index可选
数组名.filter(function (currentValue, index) {return 筛选条件
})eg
