JS的学习笔记2

南玖
125 阅读10分钟

56、课堂案例(面试题)

* 一道面试题
 *  统计字符串中每个字符串出现的次数（以对象的形式存储)

    // 半成品
    var str = 'aaabbbccddeeeea'
    var obj = {}
   //  通过循环拿到字符串中每个位置的值
   for(var i = 0; i <= str.length; i++) {
     // console.log(str[i])
     var key = str[i]
     if(obj[key] === undefined) {
       /**
        * obj -> 全局声明的空对象
        * key -> 在循环内部创建的一个变量，内部的值 就是 str[i]
        * str[i] -> 字符串对应下标的值
        * 
        * 第一轮循环  i === 0   str[i] === a   key === a
        *    obj[key] -> obj['a'] -> 此时得到的值应该是undefined
        * */ 
       obj[key] = 1
     }
   }
   /**
    * 第1轮
    *    i === 0    str[i] === 'a'   key === 'a'   obj = {}
    * 
    *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  undefined
    *        if 条件成立，obj[key] = 1 -> obj['a'] = 1
    *        第1轮结束后的 obj === {a: 1}
    * 第2轮
    *    i === 1    str[i] === 'a'   key === 'a'   obj = {a: 1}
    * 
    *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  1
    *        if 条件不成立，开始下一轮循环
    *        第2轮结束后的 obj === {a: 1}
    * 第3轮
    *    i === 2    str[i] === 'a'   key === 'a'   obj = {a: 1}
    * 
    *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  1
    *        if 条件不成立，开始下一轮循环
    *        第3轮结束后的 obj === {a: 1}
    * 第4轮
    *    i === 3    str[i] === 'b'   key === 'b'   obj = {a: 1}
    * 
    *        obj[key] === undefined  obj[key]  ->  obj['b']  ->  undefined
    *        if 条件成立，obj[key] = 1 -> obj['b'] = 1
    *        第4轮结束后的 obj === {a: 1, b: 1}
    * */  
    console.log(obj)

    //  基础版
    var str = 'aaabbbccddeeeea'
    var obj = {}
    for(var i = 0; i <= str.length; i++) {
      // console.log(str[i])
      var key = str[i]
      if(obj[key] === undefined) {
        obj[key] = 1
      } else {
        obj[key]++
      }
    }
    console.log(obj)
    /**
     * 第1轮
     *     i === 0    str[i] === 'a'   key === 'a'   obj = {}
     *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  undefined
     *        if 条件成立，执行if分支，else分支不再执行 
     *        obj[key] = 1 -> obj['a'] = 1
     *        第1轮 循环结束后 obj === {a: 1}
     * 第2轮
     *     i === 1    str[i] === 'a'   key === 'a'   obj = {a: 1}
     *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  1
     *        if 条件不成立，不执行if分支，else分支执行 
     *        obj[key]++ -> obj['a']++
     *        第2轮 循环结束后 obj === {a: 2}
     * 第3轮
     *     i === 2    str[i] === 'a'   key === 'a'   obj = {a: 2}
     *        obj[key] === undefined  obj[key]  ->  obj['a']  ->  2
     *        if 条件不成立，不执行if分支，else分支执行 
     *        obj[key]++ -> obj['a']++
     *        第3轮 循环结束后 obj === {a: 3}
     * 第4轮
     *     i === 3    str[i] === 'b'   key === 'b'   obj = {a: 3}
     *        obj[key] === undefined  obj[key]  ->  obj['b']  ->  undefined
     *        if 条件成立，执行if分支，else分支不再执行 
     *        obj[key] = 1 -> obj['b'] = 1
     *        第4轮 循环结束后 obj === {a: 3, b: 1}
     * */ 

    // 优化版
    var str = 'aaabbbccddeeeea'
    var obj = {}
    for(var i = 0; i <= str.length; i++) { 
      // var key = str[i]
      // if(obj[str[i]] === undefined) {//obj[str[i]] =-= undefined 的时候做某些事
      if(!obj[str[i]]) {
        /**
         * 因为undefined 转换为布尔值是false,
         * 
         * 所以如果obj[str[i]]的值就是undefined的时候
         *    那么布尔值就是false，加一个!代表取反，所以实际得到的布尔值 是true
         * 
         * obj[str[i】]要么是undefined要么是从1开始的数字
         *    所以除了是undefined之外的其他情况他的布尔值都是true
         *    加一个!代表取反，所以实际的到的布尔值为false
         * */ 
        obj[str[i]] = 1
      } else {
        obj[str[i]]++
      }
    }
    console.log(obj)

    // 最终版本
    var str = 'aaabbbccddeeeea'
    var obj = {}
    for(var i = 0; i <= str.length; i++) { 
      if(!obj[str[i]]) {
        obj[str[i]] = 1
      } else {
        obj[str[i]]++
      }
    }
    console.log(obj)

57、课后练习

* ①. 反转字符串
 * var str = 'abcdef'
 * 代码处理后的 str === fedcba
 ```js
     // 方法1
     var str = 'abcdef'
     // var newStr = str.split('')
     // var newStr2 = newStr.reverse()
     // var newStr3 = newStr2.join('')
     var newStr = str.split('').reverse().join('')
     console.log(newStr3)
     
     // 方法2
     var newStr = '';
     for(var i = 0; i <= str.length; i++) {
         var s = str.charAt(str.length-i-1)
         newStr += s
     }
     console.log(newStr)
 ```
* ②.查询字符串
JS 中内把字符串分为几种类型(约定)
1. 普通字符串: '123asd阿松大'
2. 数字字符串: '123123123123123'
3. html格式字符串: '<p></p>'
4. 查询字符串: 'key=value&key2=value2&key3=value3'
    * 一条数据: key=value
    * 多条数据: & 符间隔
假设 str 存储的是后端反馈给我们的一个信息
var str = 'username=靓仔&age=18&qq=88888888'
需求1:
将'username=靓仔&age=18&qq=88888888'
更改为
{
    username: '靓仔',
    age: 18,
    qq: 88888888
}
需求2:
将
{
    username: '靓仔',
    age: 18,
    qq: 88888888
}
更改为
'username=靓仔&age=18&qq=88888888'
```js
    // 需求1 字符串转对象
    var str = 'username=靓仔&age=18&qq=88888888'
    var obj = {}
    /**
    * 分析：
    *    1.拿到字符串中所有的key
    *    2.拿到字符串中所有的key对应的value
    * 
    * 逻辑：
    *    1.将字符串分割为key=value （分割完应该会有3个)
    *    2.拿到每一个key 添加到对象中，并且给值赋值为对应的vaLue
    * */ 
    //  1.将字符串分割为key=value （分割完应该会有3个)
    var arr = str.split('&')
    //  console.log(arr)
    //  2.拿到每一个key添加到对象中，并且给值赋值为_对应的value
    // 2.1遍历数组拿到数组的每一项，也就是每一个 key=value
    arr.forEach(function(item) {
        var itemInfo = item.split('=')
        /**
        * console.log(itemInfo)
        * ['username', '靓仔']
        * ['age', '18']
        * ['qq', '88888888']
        * var key = itemInfo[0]
        * var value = itemInfo[1]
        * obj[key] = value
        * */ 
        obj[itemInfo[0]] = itemInfo[1] //向对象内存储
    })
    
    // 需求2 将对象转换为 字符串
    console.log(obj)
    var newStr = ''
    /**
    * obj === {
        username: '靓仔',
        age: 18,
        qq: 88888888
    }
    * 需要将他转换为一个字符串'username=视仔&age=18&qq=88888888'
    * 核心:拿到对象的所有key 与value，然后拼接到一个字符串中
    * */ 
    for (var k in obj) {
        newStr += k + '=' + obj[k] + '&'
    }
    console.log(newStr)// 此时结尾多一个 &
    newStr = newStr.slice(0, -1)
    console.log(newStr)
```

58、进制转换与保留小数

1.进制转换(了解)
1.1十进制转换为其他进制
  语法：十进制数字.toSting(几进制)

    var num = 100 //10进制的数字100
    var num1 = num.toString(2) //讲10进制的100转换为2进制的数字
    console.log(num1) //1100100
1.2其他进制转换为十进制
语法：parseInt(数字,将数字视为几进制的数字转换为10进制的数字)

    var num = parseInt(100, 2) 
    //将100视为2进制的数字，然后转换为10进制的数字,得到数字4
    console.log(num) //4
!2.保留小数(掌握)
语法：toFixed(保留几位小数), 保留小数的时候四舍五入,并且返回的是字符串

    var num = 100.123456789
    var num1 = num.toFixed(2) //通过四舍五入保留两位小数
    console.log(num1) //100.12
    var num2 = num.toFixed(4) //通过四舍五入保留四位小数
    console.log(num2) //100.1235

59、定时器

 * 两种定时器的介绍
①.setInterval 计时器，每间隔固定的时间执行一次
 * 语法：setInterval(函数, 数字/时间)
 *      函数:每间隔固定的时间要执行的代码
 *      数字:问隔的时问，注意单位是毫秒 ，最小值为4~20
 ```js
    setInterval(function() {
        console.log('我是一个定时器~~~')
    }, 1000)
```
②.setTimeout 倒计时器，在指定时间到达后，执行一次
 * 语法：setTimeout(函数, 数字)
 *      函数:在指定时间到达后要执行的代码
 *      数字:间隔时间，单位也是毫秒
 ```js
     setTimeout(function() {
         console.log('我是一个倒定时器~~~')
     }, 3000)
 ```
* 两个定时器的返回值与意义
 * + 返回值不区分定时器种类，用于表示你这个定时器是页面中第几个定时器
 * + 作用:用来关闭定时器
 ```js
     //  1.计时器 setInterval
     var timeId1 = setInterval(function() {
         console.log('我是一个定时器~~~')
     }, 1000)
     
     // 2.倒计时器 setTimeout
     var timeId2 = setTimeout(function() {
     console.log('我是一个倒定时器~~~')
     }, 3000)
     console.log('计时器ID', timeId1) //1
     console.log('倒计时器ID', timeId2) //2
 ```
* 关闭定时器
 * + 不区分定时器种类，只要给出正确的定时器返回值就可以关闭
 * + 语法：
 *    clearTimeout(定时器返回值) 
 *      注意：能够关闭计时器也能关闭倒计时器
 *           开发人员的约定：这个定时器只用来关闭倒计时器
 *           目的就是为了让其他开发人员看到这个行代码之后，知道你关闭了一个倒计时器
 *    clearInterval(定时器返回值)
 *      注意：能够关闭计时器也能关闭倒计时器，
 *           开发人员的约定：这个定时器只用来关闭计时器
 *           目的就是为了让其他开发人员看到这个行代码之后，知道你关闭了一个计时器
 * */ 
 ```js
      //  1.计时器 setInterval
      var timeId1 = setInterval(function() {
          console.log('我是一个定时器~~~')
      }, 1000)
      clearInterval(timeId1)
      
      // 2.倒计时器 setTimeout
      var timeId2 = setTimeout(function() {
          console.log('我是一个倒定时器~~~')
      }, 3000)
      clearTimeout(timeId2)
 ```

60、异步代码

 * 简单的代码异步执行机制（并不是详细的,详细的内容后期还会讲)
 * 
 *  这是一道面试题,请熟读并背诵全文
 * 
 * 什么是非异步代码
 *    按照从上往下的顺序，从左到右的顺序，依次执行每一行代码
 *    如果上一行代码没有执行完毕，不会执行下一行代码
 * 
 * 什么是异步代码
 *    当代码遇到异步任务的时候，会把这个代码放在'异步队列'内等待
 *    所有的同步代码全都执行完毕之后，在开始执行“异步队列”内的代码
 * 简单来说:代码在执行的时候如果遇到异步任务，会先放在‘异步队列’内等着，然后继续往下执行，直到把所有的同步代码执行完毕后，在开始执行异步任务
 * 
 * 什么是异步任务
 *    两种定时器都是异步任务
 * 可以理解:先执行定时器外面的代码然后执行定时器里边的代码
 ```js
     console.log('开始')
     setTimeout(function() {
         console.log('倒计时器执行了~~~')
     }, 3000)
     console.log('结束')

/**
 * 运行顺序
 *  1.开始
 *  2.结束
 *  3.倒计时器执行了~~~
 * */ 
 ```
 ```js
     console.log('1')
     setTimeout(function() {
         console.log('2')
     }, 3000)
     console.log('3')
     setTimeout(function() {
     console.log('4')
     }, 4000)
     console.log('5')
     setTimeout(function() {
     console.log('6')
     }, 2000)
     console.log('7')
     //  执行顺序 1 3 5 7 6 2 4
 ```

61、创建时间对象

在Js中 Date 给我们提供了操作时间的一些方法，是JS内置的一个对象    

    var timer = new Date() 
    //new Date()  会给我们返回一个时间对象
    console.log(timer)
    //Wed Jan 04 2023 14:12:56 GMT+0800 (中国标准时间)

62、时间对象的参数

* 创建时间对象的时候，可以选择传递参数，也可以不传递参数
 *    如果需要传递参数，分为两种方式
①.数字
 * 最少要传递两个值,年 和 月(JS中0-11代表了1-12月)
 ```js
     //                    年   月  日  时   分  秒
     var timer = new Date(2020, 00, 31, 23, 59, 59)
     console.log(timer)
 ```
②.字符串
 * 最少只需要传递一个参数年份即可(字符串的形式传递时月份从1开始)
 ```js
     //                    年   月 日  时 分 秒
     var timer = new Date('2019-02-13 13:14:15')
     console.log(timer)
 ```

63、获取时间对象

    var timer = new Date()
    // console.log(timer)
①.得到时间对象中的年份
    var year = timer.getFullYear()
    console.log(year) //2023
②.得到时间对象中的月份
    var month = timer.getMonth()
    console.log(month) //0 -> 1月
③.得到时间对象中的那一天/日
    var day = timer.getDate()
    console.log(day) //4
④.得到时间对象中的小时
    var hours = timer.getHours()
    console.log(hours) //14
⑤.得到时间对象中的分钟
    var minutes = timer.getMinutes()
    console.log(minutes) //43
⑥.得到时间对象中的秒
    var seconds  = timer.getSeconds()
    console.log(seconds) //44
⑦.得到时间对象中的一周的第几天(用0-6表示周一到周日,但是周日为0)
    var days = timer.getDay()
    console.log(days)
⑧.getTime 按照格林威治时间计算 从1970年1月1日0时0分0秒 到 现在(或指定日期)的毫秒数
    var getTime = timer.getTime()
    console.log(getTime)

64、设置时间对象

    var timer = new Date() 
    //Wed Jan 04 2023 15:04:17 GMT+0800 (中国标准时间)
①设置 年
    timer.setFullYear(2008)
    console.log(timer.getFullYear()) //2008
②设置 月
    timer.setMonth(11)
    console.log(timer.getMonth()) //11
③设置 当月的第几天
    timer.setDate(20)
    console.log(timer.getDate()) //20
⑤注意：没有设置 本周的第几天
⑥设置 时
    timer.setHours(16)
    console.log(timer.getHours()) //16
⑦设置分
    timer.setMinutes(30)
    console.log(timer.getMinutes()) //30
⑧设置秒
    timer.setSeconds(40)
    console.log(timer.getSeconds()) //40
⑨设置毫秒(0-999)
    timer.setMilliseconds(888)
    console.log(timer.getMilliseconds()) //888
⑩直接设置到1970 的总毫秒
    timer.setTime(123456789)
    console.log(timer.getTime()) //123456789

65、认识BOM

 * BOM
 *    浏览器对象模型，其实就是操作浏览器的一些能力
 * 
 * 我们可以操作那些内容？
 *    +获取浏览器的相关信息(窗口大小)
 *    + 操作浏览器进行页面的跳转
 *    + 获取浏览器地址栏的信息
 *    + 操作浏览器的滚动条
 *    + 获取浏览器的版本
 *    + 让浏览器出现一个弹出框
 *    + ...
 * 
 * BOM 的核心就是 window 对象
 *    window 是JS内置的一个对象，里面包含着操作浏览器的方法

66、体验BOM

* ①.获取浏览器窗口的尺寸
 * innerHeight / innerWidth
 *   + 作用：获取浏览器窗口的高度和宽度(包含滚动条)
 *   + 语法：window.innerHeight / window.innerWidth

    console.log('浏览器窗口的高度', window.innerHeight)
    console.log('浏览器窗口的宽度', window.innerWidth)
* ②.浏览器的弹出框 (学习的时候会用，实际工作中不会使用)
 * alert
 * prompt
 * confirm
 *   * 有一个询问信息和两个按钮
 *   * 点击确定按钮 返回 true
 *   * 点击取消按钮 返回 false    

    var boo = confirm('请问您确定进入页面吗？')
    console.log(boo)
avatar
文章
阅读
粉丝