js:window对象

Au&ust

已于 2025-01-12 01:38:12 修改

阅读量894

点赞数 8

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2025-01-09 21:00:35 首次发布

本文链接：https://blog.youkuaiyun.com/Au_ust/article/details/145036752

版权

js 专栏收录该内容

31 篇文章

订阅专栏

bom

dom部分学完了，来看看bom吧~

bom是整个浏览器，本质上bom与dom是包含的关系，window是里面最大的对象

调用的方法默认对象是window，一般都会省略前面的window

创建的全局变量也是属于window的，当然window也可以省略

定时器-延时函数

定时器除了之前学的默认一直运行的定时器-间歇函数，还有另一种定时器，它有自己的预设起效时间，比如我们痛恨的步道乐跑的广告：

这种右上角有倒计时的效果，就可以拿延时函数定时器来做，也就是【延时多少秒再执行】setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时也省略window

语法：

清除延时函数：

因为延时函数一般只执行一次，所以清除它的时候并不多见；但是延时函数的递归用法，可以起到和间歇定时器一样的功效，这个时候就需要清除啦~

它的返回值和普通的定时器一样，是第【几】个定时器，延时器需要等待,所以后面的代码先执行

每一次调用延时器都会产生一个新的延时器

一个五秒后自动关闭的广告：

    <style>
        img {
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <img src="./images/slider01.jpg" alt="">
    <script>
        const img = document.querySelector('img')
        setTimeout(function(){
img.style.display='none'
        },5000)
    </script>
</body>

js执行机制

答案：1111 3333 2222

欸？是2222先还是3333先呢？

答案还是1111 3333 2222

为什么定时器的时间为0，也会延后？

这就要聊到js的执行机制了

js的一大特点就是单线程，同一个时间只能做一件事（想到了自己之前学的多线程语言）为什么js有这样的特性？

这是Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：

如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

如何解决？利用多核cpu的计算能力，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。（世界是一个巨大的里牛渴死）

同步：

代码按顺序执行，一个操作完成后才会执行下一个操作。在同步代码中，程序会逐行执行，直到当前任务完成才能继续处理下一个任务。

比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步：

代码执行时，任务的执行不会阻塞后续任务的执行。也就是说，异步操作可以在后台进行，而不影响主线程的执行（像嵌入式的前后台编程模式）。JavaScript 中常见的异步操作包括事件处理、定时器、AJAX 请求等。

比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

有点像并行和并发的原理但是又不一样。弹幕还有说像嵌入式里的中断。。。一想到这些东西我都学过就想笑

这样来说，任务也分同步任务和异步任务

同步任务都是在主线程上执行的，形成一个执行栈

异步任务是通过回调函数实现的，分为三种类型：

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列。。怎么又是你操作系统！！）。

当然我们js里其实根本就没有堆和栈。。只是借用其他语言的思想来表示

具体执行过程：

1. 先执行执行栈中的同步任务。

2. 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

但是js是单线程的语言，处理不了异步API，谁来处理呢？浏览器！

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop ）

location对象

从前面的bom简介可以知道location本质上就是window下的一个对象

location对象拆分并保存了url地址的各个组成部分

常用属性和方法

属性

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
利用js的方法跳转界面

 location.href="http://baidu.com"

用在【点击跳转，如果不点击5秒以后自动跳回首页】的场景

<!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="http://www.itcast.cn">支付成功<span>5</span>秒后自动跳转到首页</a>
    <script>
        const a = document.querySelector('a')
        let num=5
        let n=setInterval(function () {
            num--
            a.children[0].innerHTML=`${num}`
            //如果num==0，停止定时器，跳转
            if(num===0){
                clearInterval(n)
                //跳转
                location.href='http://www.itcast.cn'
            }
        }, 1000)
    </script>
</body>

</html>

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

在表单我们输入信息之后，会出现在url的【？】后面，一般是要获取这些信息进行处理的

location.search就可以获取

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

有些页面在不刷新页面的时候也可以打开新的界面，页面的这部分保存在url的哈希值部分，也就是【#】后面

location.hash就可以获取

方法

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

点击按钮刷新：

navigation对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

  console.log(navigator);

常用属性及方法

属性

通过 userAgent 检测浏览器的版本及平台，可以根据不同平台跳转到不同站点

前面为什么有一个叹号？因为这是一个立即执行函数，也可以拿小括号括起来，但是在function前面加个运算符也可以表示为一个整体

history对象

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

它可以实现的功能作用于浏览器的【前进后退键】

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

本地存储

类似于本地的数据库，储存在用户浏览器里，比如浏览器的搜索记录

设置、读取方便、甚至页面刷新不丢失数据

容量较大，sessionStorage和localStorage约 5M 左右

localStorage

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

特性：

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

以键值对的形式存储使用

增删改查

储存数据

localStorage.setItem(key, value)

以键值对的形式存储

这条数据是储存在本地的，在相同域名下的本地数据不删除的话就一直存在

修改数据和储存数据一样，对已经有的数据用setItem就是修改

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

clear All可以删除所有

本地存储的重要特性：只能存储字符串！！

sessionStorage

它的生命周期是为关闭浏览器窗口，关闭窗口时数据就没了，而localStorage页面刷新也不丢失数据

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

以键值对的形式存储使用

用法跟localStorage 基本相同

存储复杂数据类型

键值对可以存储的类型太有限了（只有字符串），能不能直接存储对象呢？

如果直接以键值对的形式把对象存进去就会这样：

无法访问，因为对象被当作字符串存起来了

那怎么办？将复杂数据类型转换为jSON字符串再存储

使用JSON.stringify()方法来转换

 const obj={
            uanme:'zby',
            age:19,
            gender:'男'
        }
        localStorage.setItem('obj',JSON.stringify(obj))

本质上还是转换为字符串了，无论是属性值还是名，都有双引号（数字没有）

把字符串转回对象，取出的时候使用JSON.prase()：

 const obj={
            uanme:'zby',
            age:19,
            gender:'男'
        }
        localStorage.setItem('obj',JSON.stringify(obj))
        console.log(JSON.parse(localStorage.getItem('obj')));

实现字符串拼接的其他方法

map()和join()数组方法实现字符串拼接

map()方法：可以遍历数组处理数组，并且返回新的数组

ele是数组元素，index是数组下标

用起来和之前的for each()相似，但for each()没有返回值，而map()返回一个数组

join()方法可以把数组中的所有元素拼接为一个字符串

数组元素是通过参数里面指定的分隔符进行分割的，默认是【,】逗号，上图的参数是空字符串（‘’），则所有的元素之间都没有字符间隔

返回值也是一个拼好的字符串

demo

处理学号重复问题：

 stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,

新增的信息的学号是已经存在的信息中的最后一条的数据的stuId+1，并且需要判断：如果为0 ，则新增的信息学号为1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
     //新增的数据在这里
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        salary: '12000',
        gender: '女',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ]
    //localStorage.setItem('data', JSON.stringify(initData))
    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    // (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // (2). 如果没有数据，则用 空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      //用map遍历数组
      const trArr = arr.map(function (ele, index) {
        return `
          <tr>
            <td>${ele.stuId}</td>
            <td>${ele.uname}</td>
            <td>${ele.age}</td>
            <td>${ele.gender}</td>
            <td>${ele.salary}</td>
            <td>${ele.city}</td>
            <td>${ele.time}</td>
            <td>
              <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
      })
      //把数组转换为字符串
      tbody.innerHTML = trArr.join('')
      document.querySelector('.title span').innerHTML = arr.length
      //追加

    }
    render()

    // 2. 新增业务
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    // 2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      //追加数据
      arr.push({
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      render()
      this.reset()
      //把数据转换为字符串导入本地储存
      localStorage.setItem('data', JSON.stringify(arr))
    })
    // 3. 删除业务
    // 3.1 采用事件委托形式，给 tbody 注册点击事件
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        //确认是否删除
        if (confirm('您确定要删除这条数据吗')) {
          arr.splice(e.target.dataset.id)
          render()
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })

  </script>
</body>

</html>