Window对象

1、BOM(浏览器对象模型)

2、定时器-延时函数

3、JS执行机制

4、location对象

5、navigator对象

6、histroy对象

本地存储

1、分类

1.1、sessionStorage

1.2、localStorage：

2、存储复杂数据类型

数组的map（）方法

1、作用：map 迭代数组。

2、语法：arr.map(function(item,index){ })

数组的join（）方法

1、作用： join() 方法用于把数组中的所有元素转换一个字符串。

2、语法：arr.join('')

3、参数：数组元素是通过参数里面指定的分隔符进行分隔的。

今日单词

综合案例

Window对象

1、BOM(浏览器对象模型)

window对象是一个全局对象，也可以说是JavaScript中的顶级对象；

像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的；

所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法；

window对象下的属性和方法调用的时候可以省略window。

2、定时器-延时函数

语法： setTimeout(回调函数，间隔时间)

// 定时器-延时函数//  语法： setTimeout(回调函数，间隔时间)setTimeout(function () {console.log('时间到了')}, 3000)

清除定时器： let timer = setTimeout(回调函数，间隔时间) clearInterval(timer)

 // 定时器-延时函数//  语法： setTimeout(回调函数，间隔时间)let timer = setTimeout(function () {console.log('时间到了')}, 3000)// 清除定时器： // let timer = setTimeout(回调函数，间隔时间)clearInterval(timer)

两种定时器对比：执行的次数：

延时函数: 执行一次；

间歇函数:每隔一段时间就执行一次,除非手动清除；

延时函数递归实现定时器。

3、JS执行机制

event loop：事件循环。

4、location对象

1.4.1、location.href 属性：获取完整的 URL 地址，对其赋值时用于地址的跳转；

1.4.2、search 属性：获取地址中携带的参数，符号？后面部分；

1.4.3、hash 属性：获取地址中的啥希值，符号 # 后面部分；

1.4.4、reload 方法：用来刷新当前页面，传入参数 true 时表示强制刷新。

 // 跳转location.href = "http://www.jd.com"

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'}})()

6、histroy对象

history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

常用属性方法：

本地存储

1、分类

1.1、sessionStorage

特性：

1.1.1、生命周期为关闭浏览器窗口；

1.1.2、在同一个窗口(页面)下数据可以共享；

1.1.3、以键值对的形式存储使用；

1.1.4、用法跟localStorage 基本相同。

1.2、localStorage：

1.2.1特性：

1.2.1.1、可以多窗口（页面）共享（同一浏览器可以共享）；

1.2.1.2、以键值对的形式存储使用。

1.2.2、作用：可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在。

语法：localStorage.setItem('键','值')

存储：localStorage.setItem(‘key’, ‘value’) ；

获取：localStorage.getItem(‘key’) ；

删除：localStorage.removeItem(‘key’)

1.2.3、注：

键值对需要加引号；

只能存储字符串。

2、存储复杂数据类型

语法：

存储：JSON.stringify(复杂数据类型)

调取：JSON.parse(复杂数据类型)

    // 存储复杂数据类型const obj = {uname: '王世强',age: 18,gender: '女',city: '武汉'}// 1.复杂数据类型存储必须转换为JSON字符串localStorage.setItem('obj', JSON.stringify(obj))// 取// console.log(localStorage.getItem('obj'))// 2.把JSON字符串转换为对象const str = localStorage.getItem('obj')console.log(JSON.parse(str))localStorage.removeItem('obj')

数组的map（）方法

1、作用：map 迭代数组。

2、语法：arr.map(function(item,index){ })

const arr = ['red', 'blue', 'green']//map 方法也是遍历 ，主要用来处理数据，并且返回新的数组.// 语法：arr.map(function(item,index){ })const newArr = arr.map(function (item, index) {// console.log(item)  item = arr[i] , 数组元素 'red', 'blue', 'green'// console.log(index)  index = i ,数组索引号 0， 1， 2return item + '老师'})console.log(newArr)  //['red老师', 'blue老师', 'green老师']

数组的join（）方法

1、作用： join() 方法用于把数组中的所有元素转换一个字符串。

2、语法：arr.join('')

3、参数：数组元素是通过参数里面指定的分隔符进行分隔的。

const arr = ['red', 'blue', 'green']// join()方法console.log(arr.join(''))  // redbluegreen// 参数：数组元素是通过参数里面指定的分隔符进行分隔的

今日单词

单词	说明	语法
setTimeout	定时器-延时函数	setTimeout(回调函数，间隔时间)
location	href 属性； search 属性； hash 属性； reload 方法；	location.href ; location.reload()
localStorage	本地储存增：setItem；删：removeItem；改：重新赋值；查：getItem；	曾，改：localStorage.setItem('键','值')；查：localStorage.getItem('键')；删：localStorage.removeItem('键')
JSON.stringify	存储复杂数据类型	JSON.stringify(复杂数据类型)
JSON.parse	调取复杂数据类型	JSON.parse(复杂数据类型)
event loop	事件循环	只是一个逻辑
join()	把数组中的所有元素转换一个字符串	arr.join('')参数里面指定的分隔符进行分隔的
map（）	迭代数组	arr.map(function(item,index){ })

综合案例

学生信息表：阿里云盘分享

Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法相关推荐

APIS（BOM）——Window对象、本地存储
Window对象 BOM Window对象定时器-延时函数 js执行机制同步任务异步任务执行机制 location对象 navigator 对象 histroy 对象本地存储本地存储分类 ...
window对象属性
window对象属性 window对象中存储的属性和方法比较多,我们只对常用的做说明,不常用的看看就好. 首先是window中的这几个属性,这几个属性存储的值都是对象{}.每个对象对应一种操作,可以理 ...
Unity插件学习（五） ------ 本地存储Easy Save3
文章目录一.前言及下载地址二.功能介绍三.使用方法 1.[Easy Save3存储支持的类型](https://docs.moodkie.com/easy-save-3/es3-supporte ...
vue开发 - 将方法绑定到window对象，给app端调用
通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用 ...
JS数组转字符串（3种方法） arrays.join(“-“)把数组使用-分割为字符串
JS数组转字符串(3种方法) JavaScript 允许数组与字符串之间相互转换.其中 Array 方法对象定义了 3 个方法,可以把数组转换为字符串,如表所示. Array 对象的数组与字符串相互转 ...
《Javascript权威指南》学习笔记之十二：数组、多维数组和符合数组（哈希映射）...
Array(数组)是JavaScript中较为复杂的数据类型,同Java.C#.VB等程序语言的数组相比.Javascript数组中的元素不必为同样的数据类型,能够在数组每一个元素上混合使用数字.日期 ...
数组方法 + ES6中数组方法 + 数组的空位
目录 1.静态方法 1.Array.isArray() Array.isArray方法返回一个布尔值,表示参数是否为数组.它可以弥补typeof运算符的不足. 2.Array.from() 用于将两类 ...
java 数组map_java中数组 list map之间的互转
三者之间转换关系,一张图清晰呈现. 上代码: 其中的maputils是apache的collection包. package util; import java.util.ArrayList; imp ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...

Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法

Window对象

1、BOM(浏览器对象模型)

2、定时器-延时函数

3、JS执行机制

4、location对象

5、navigator对象

6、histroy对象

本地存储

1、分类

1.1、sessionStorage

1.2、localStorage：

2、存储复杂数据类型

数组的map（）方法

1、作用：map 迭代数组。

2、语法：arr.map(function(item,index){ })

数组的join（）方法

1、作用： join() 方法用于把数组中的所有元素转换一个字符串。

2、语法：arr.join('')

3、参数：数组元素是通过参数里面指定的分隔符进行分隔的。

今日单词

综合案例

学生信息表：阿里云盘分享

Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法相关推荐

最新文章

热门文章

Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法

Window对象

1、BOM(浏览器对象模型)

2、定时器-延时函数

3、JS执行机制

4、location对象

5、navigator对象

6、histroy对象

本地存储

1、分类

1.1、sessionStorage

1.2、localStorage：

2、存储复杂数据类型

数组的map（）方法

1、作用：map 迭代数组。

2、语法：arr.map(function(item,index){ })

数组的join（）方法

1、作用： join() 方法用于把数组中的所有元素转换一个字符串。

2、语法：arr.join('')

3、参数： 数组元素是通过参数里面指定的分隔符进行分隔的。

今日单词

综合案例

学生信息表：阿里云盘分享

Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法相关推荐

最新文章

热门文章

3、参数：数组元素是通过参数里面指定的分隔符进行分隔的。