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

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

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， 2
      return 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){ })