延时定时器-本地储存-数组的map初了解

标签：map 定时器 console log let location 延时 localStorage 页面

了解window

window对象是一个全局对象,也可以说时js中的顶级对象

win对象是一个全局对象,也可以说js中的顶级对象,所有通过var定义在全局作用域中的变量,函数,都会变成win对象的属性和方法

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

    var age = 18
    console.log(window.age)
    let aga = 18
    console.log(window.aga) //undefined  因为let没有挂载在win下面
    function fn() {
        console.log(`哈哈`)
    }
    window.fn()

延时定定时器

延时定时器,需要等待时间,所以后面的代码会先执行,每一次调用延时器都会产生一个新的延时器

setTimeout(回调函数,等待时间)

setTimeout( function () { } ,3000)

这个定时器,只会执行一次,但是他还是有关闭定时器的功能

clearTimeout ( 定时器ID )

<script>
    // setTimeout（回调函数，等待时间）
    setTimeout(function () {
        console.log(`执行一次`)
    },3000)
    console.log()
    // 这个定时器只会执行一次
    let a = setTimeout(function (){
        console.log(`执行第二次`)
    },3000)
    clearTimeout(a) //关闭定时器
</script>

js的执行机制

js的执行机制

首先是从上往下执行
js语言的一大特点就是单线程,也就是说,同一个时间只能做一件事情
这是因为js这门脚本语言诞生的使命所致--js是为处理页面中用户的交互,以及操作DOM而诞生的.比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加，之后再删除。
单线程就意味，所有任务都需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题就是：弱国js执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
同步和异步的概念
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许js脚本创建多个线程。于是js中出现了同步和异步
同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。比如做饭的同步做法：我们要烧水做饭，等水开，再去切菜，炒菜
异步：你在做一件事情时，因为这事情会花费很长时间，在做这件事情的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，切菜，炒菜
他们本质区别：这条流水线上各个流程的执行顺序不同
同步任务都在主线程上执行，形成一个执行栈
异步任务是通过回调函数实现的
一般而言，异步任务有一下三种类型
1，普通事件，如click，resize等 （点击事件）
2，资源加载，如load，error等 （资源加载）
3，定时器，包括setInterval，setTimeout等 （定时器）
异步任务相关添加到任务队列中（任务队列也称为消息队列）
执行顺序
先执行执行栈中的同步任务
异步任务放入任务队列中
一但执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

location对象

location:完成页面转跳,获取页面中的信息,刷新页面

页面转跳:location.href = ` URL `

获取url中问好后边的值: location.search

获取url中警号后边的值:location.hash

刷新页面:location.reload()

强制刷新页面:location.reload(true)

<form action="">
    <input type="text" name="username" />
    <input type="password" name="pwd" />
    <button>提交</button>
</form>

<a href="#/my">我的</a>
<a href="#/friend">关注</a>
<a href="#/download">下载</a>
<button class="reload">刷新</button>

<script>
    console.log(location.href) //完成页面的跳转
    //重点掌握
    // location.href = `https://www.baidu.com/`  //打开页面就进行跳转
    location.search  //获得问好的后边
    location.hash    //获取#号后边的
    //重点掌握
    // location.reload()  //刷新当前页面的，传入参数true强制刷新
    // location.reload()  //传入参数true强制刷新,会把页面清除缓存
    let btn = document.querySelector(`.reload`)
    console.log(btn)
    btn.addEventListener(`click`,function () {
        location.reload()
    })
    // let id = setTimeout(function () {
    //     location.reload()
    //     clearTimeout(id)
    // },3000)
</script>

navigator对象(了解)

<center>
    navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息 <br>
    常用属性和方法：通过userAgent检测浏览器的版本及平台 <br>
    //检测userAgent（浏览器信息） <br>
    !(function(){ <br>
    const userAgent = navigator.userAgent <br>
    // 验证是否为Android或iPhone <br>
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/) <br>
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/) <br>
    // 如果是Android或iPhone，则跳转至移动站点 <br>
    if (android || iphone) { <br>
    location.href = 'http://m.itcast.cn' <br>
    } else { <br>
    location.href = 'http://itcast.cn' <br>
    } <br>
    })() <br>
</center>

history对象

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

常用的属实方法

history对象方法,作用.back()后退功能,forward()前进功能,go(参数)前进后退功能,如果是1,前进1个页面,如果是-1,后退一个页面

<button class="first">前进</button>
<button class="last">后退</button>
<script>
    const first = document.querySelector(`.first`)
    const last = document.querySelector(`.last`)
    first.addEventListener(`click`,function () {
        // location.href = `http://www.baidu.com`
        history.go(2) //跳转到历史浏览的第几个页面
    })

(重点)本地数据储存

以前我们页面写的数据一刷新页面就没有了,为了在本地储存大量的数据,H5规范中提出了相关的解决方案.

数据储存在用户的浏览器中,读取方便,刷新页面,关闭页面,关闭电脑都不会丢失数据

容量比较大 5m左右

基本使用,作用:可以将数据永久储存在本地,除非手动删除,否则关闭页面也会存在

特性,可以多个窗口共享同一数据

键值对的形式储存使用的

// 储存数据，以键值对的方式储存，并且储存到浏览器本地数据
// localStorage.setItem(`key`,value) //key名字，value变量
// 获取数据
// localStorage.getItem(`key`) //获取名字
// 删除数据
// localStorage.removeItem(`key`) //删除数据的名字
// 更改数据信息
// localStorage.setItem(`name`,`帅气丶汪星人`) // ==>

<script>
    // 储存数据，以键值对的方式储存，并且储存到浏览器本地数据
    // localStorage.setItem(`key`,value)  //key名字，value变量
    // 获取数据
    // localStorage.getItem(`key`)  //获取名字
    // 删除数据
    // localStorage.removeItem(`key`) //删除数据的名字
    // 更改数据信息
    // localStorage.setItem(`name`,`帅气丶汪星人`) // ==>
    var a = localStorage.getItem(`name`)
    console.log(a)  //==>帅气丶汪星人
    let age = 24
    localStorage.setItem(`age`,age)  //储存一个变量数据
    let useage = localStorage.getItem(`age`)  //获取本地的数据
    console.log(useage)  //打印出来自己需要的useage
    localStorage.clear()  //删除所有的
</script>

(重点)储存复杂数据类型到本地

    let obj = {
        uname : `黄宁`,
        age : `24`,
        gender : `男`
    }
    // 储存复杂数据类型 只能存储字符串类型
    // JSON.stringify() //把js代码转换称为JSON字符串，会储存字符串的数据格式
    localStorage.setItem(`uname`,JSON.stringify(obj))
    // 获取数据
    // JSON.parse() //把json数据转换为js数据,同时解析字符串数据
    let a = JSON.parse(localStorage.getItem(`uname`))
    console.log(a)
    // 修改
    a.age = `18`
    console.log(a)

sessionStorage 本地储存分类,同一窗口下数据共享

    本地储存分类 - sessionStorage <br>
    特性 <br>
    生命周期为关闭浏览器窗口 <br>
    在同一窗口下数据可以共享 <br>
    以键值对的方式进行储存 <br>
    用法跟localStorage基本相同 <br>

(重点)数组map的方法

数组.map(function(数组每一项,索引号,挡墙数组) { } )

特点:用来处理数据,返回新的数组,之前的数组个数是几个,处理之后还是几个

<script>
    let arr = [`pink`,`老王`,`梦龙`,`松哥`]
    // arr[0] = arr[0] + `老师`
    // for (let i = 0; i < arr.length; i++) {
    //     arr[i] += `老师`
    // }
    // console.log(arr)
    let a = arr.map(function (item) {
        // console.log(item)
        return item + `老师`  //不return返回值是undefined
    })
    // console.log(a)
    // document.write(a)
    // 特点:用来处理数据,返回新的数组,之前的数组个数是几个,处理之后还是几个
    let arr1 = [1,3,5,7,10]
    // let b = arr1.map(function (item) {
    //     return item + 10
    // })
    // console.log(b)
    let obj = {
        name : ``
    }
    let b = arr.map(function (i) {
        // return {uname : i}  //返回对象名字 : i
    })
    console.log(b)
</script>

重点数组join方法

joio(`分隔符`)转换成字符串,数组的方法只能数组使用

<script>
    let arr = [`red`,`blue`,`green`,`yellow`]
    let A = arr.join(`|`)
    console.log(A)
</script>

数组对象的拓展用法

<script>
    const arr = {uname:`黄宁`,age:`男`}
    const rule = {
        name : `name`,
        xingbie : `gender`
    }
    let obj = {}

    for (let k in arr) {
        console.log(k) //输出 姓名和性别
        console.log(arr[k]) //输出 黄宁和男
        console.log(rule[k]) //输出 姓名和性别
        obj[rule[k]] = arr[k]
    }
    console.log(obj)
    console.log(rule)
    console.log(arr)
</script>

 

标签：map,定时器,console,log,let,location,延时,localStorage,页面
From： https://www.cnblogs.com/hgng/p/16911229.html