08_JavaScript常见内置类-原始类型包装类-Math-Array高阶函数-数组的进阶用法-Date介绍

导读:本篇文章讲解 08_JavaScript常见内置类-原始类型包装类-Math-Array高阶函数-数组的进阶用法-Date介绍,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

原始类型的包装类

  • JavaScript的原始类型并非对象类型,所以从理论上来说,它们是没有办法获取属性或者调用方法的

  • 但是,在开发中会看到,我们会经常这样操作 简单类型的值调用了属性或方法

    • var message = "hello world"
      var height = 1.8888888
      //打印字符串长度
      console.log(message.length)
      //打印保留两位小数后的结果
      console.log(height.toFiexd(2))
      
  • 那么,为什么会出现这样奇怪的现象呢?(悖论)

    • 原始类型是简单的值,默认并不能调用属性和方法

    • 这是因为JavaScript为了可以使其可以获取属性和调用方法对其封装了对应的包装类型

      • 当我们对原始类型进行获取属性或方法的操作时 浏览器会自动包装 示例代码如下

      • var message = "hello world"
        console.log(message.length)
        //当调用message.length方法时 浏览器相当于做了以下操作
        //message = new String(message)
        
      • 也就是浏览器会自动创建一个对象 而创建的对象中有属性和方法

      • 属性方法获取完成后 浏览器会自动删除(回收)创建的对象

    • 常见的包装类型有:String、Number、Boolean、Symbol、BigInt类型

  • 包装类型的使用过程

    • 根据原始值,创建一个原始类型对应的包装类型对象;
    • 调用对应的属性或者方法,返回一个新的值;
    • 创建的包装类对象被销毁;
    • 通常JavaScript引擎会进行很多的优化它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用
  • 我们也可以自己来创建一个包装类的对象 但是没有必要

    • name1是字面量的创建方式,name2是new创建对象的方式;

    • var name1 = "why"
      var name2 = new String("why")
      console.log(typeof name1) //String
      console.log(typeof name2) //Object
      
  • 注意事项:原始类型中null、undefined没有任何的方法,也没有对应的“对象包装类”

包装类型-Number

  • 前面我们已经学习了Number类型,它有一个对应的数字包装类型Number,我们来对它的方法做一些补充。

  • Number属性补充:(类属性)

    • Number.MAX_SAFE_INTEGER:JavaScript 中最大的安全整数 (2^53 – 1)
    • **Number.MIN_SAFE_INTEGER:**JavaScript 中最小的安全整数 -(2^53 – 1)
  • Number实例(对象)方法补充:

    • 方法一:toString(base),将数字转成字符串,并且按照传入的base进行进制转化

      • base 的范围可以从 2 到 36,默认情况下是 10

        • var num = 100
          console.log(num.toString()) //默认字符串类型的10进制 100
          console.log(num.toString(2)) //字符串类型的2进制 1100 0100
          console.log(num.toString(8)) //字符串类型的8进制 144
          console.log(num.toString(16)) //字符串类型的10进制 64
          
      • 注意:如果是直接对一个数字操作,需要使用…运算符

        • console.log(123..toString())
          console.log(985..toString(2))
          
    • 方法二:toFixed(digits),格式化一个数字,保留传入的digits位的小数;(会四舍五入)

      • digits的范围是0到20(包含)之间;

        • var pi = 3.1415926
          console.log(pi.toFixed(2)) //保留两位小数
          console.log(pi.toFixed(3)) //保留三位小数
          
  • Number类方法补充:

    • 方法一:Number.parseInt(string[, radix]),将字符串解析成整数,也有对应的全局方法parseInt;(不会四舍五入)

    • 方法二:Number. parseFloat(string),将字符串解析成浮点数,也有对应的全局方法parseFloat

    • var num = "123.4567"
      console.log(Number.parseInt(num)) //Numbe类型的123
      console.log(Number.parseFloat(num)) //Numbe类型的123.4567
      //因为这两个方法有对应的全局方法 因此可以直接使用
      console.log(parseInt(num)) //Numbe类型的123
      console.log(parseFloat(num)) //Numbe类型的123.4567
      
  • 更多Number的知识,可以查看MDN文档:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number

内置对象-Math

  • 在除了Number类可以对数字进行处理之外,JavaScript还提供了一个Math对象

    • Math是一个内置对象(不是一个构造函数),它拥有一些数学常数属性和数学函数方法
  • Math常见的属性:

    • Math.PI:圆周率,约等于 3.14159
  • Math常见的方法:

    • Math.floor向下舍入取整

    • Math.ceil向上舍入取整

    • Math.round四舍五入取整

    • Math.random:生成0~1的随机数(包含0,不包含1)

    • Math.pow(x, y):返回x的y次幂

    • var num = 9.15
      console.log(Math.floor(num)) //向下取整 9
      console.log(Math.ceil(num)) //向上取整 10
      console.log(Math.round(num)) //四舍五入取整 9
      
    • //random随机生成[0,1)的数
      //需求 随机生成[5,50)的数
      var randomNum = Math.floor(Math.random() * 45) + 5
      console.log(randomNum)
      
      //x的y次幂
      console.log(Math.pow(2, 3)) //8
      
  • Math中还有很多其他数学相关的方法,可以查看MDN文档:

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

包装类型-String

  • 在开发中,我们经常需要对字符串进行各种各样的操作String类提供给了我们对应的属性和方法

  • String常见的属性:

    • length:获取字符串的长度;

      • var message = "hello world"
        console.log(message.length)
        //访问字符串中某个位置的字符
        console.log(message.[4]) //访问不到返回undefined
        console.log(message.charAt(4)) //访问不到返回空字符串
        
    • 字符串的遍历

      • var message = "hello world"
        //普通for循环遍历
        for (let i = 0; i < message.length; i++) {
          console.log(message[i])
        }
        
      • var message = "hello world"
        //for...of遍历
        //String对象内部是将字符串变成了一个可迭代对象, 因此支持for...of遍历
        //目前可迭代对象就是字符串/数组
        for(char of message) {
          console.log(char)
        }
        
  • 修改字符串

    • 字符串的不可变性:

      • 字符串的所有方法都不会修改字符串本身(字符串的值不可变), 操作完成后会返回一个新的字符串

      • 字符串在定义后是不可以修改的,所以下面的操作是没有任何意义的;

      • var message = "hello world"
        message[0] = "a" //无意义操作
        console.log(message)
        
      • 所以,在我们改变很多字符串的操作中,都是生成了一个新的字符串;

        • 比如改变字符串大小的两个方法(重要)

        • toLowerCase():将所有的字符转成小写

        • toUpperCase() :将所有的字符转成大写;

          • var message = "Hello World";
            //并没有修改字符串 而是在原来的基础上生成一个新的字符串
            var message1 = message.toLowerCase()
            var message2 = message.toUpperCase()
            console.log(message1); //hello world
            console.log(message2); //HELLO WORLD
            
  • 查找字符串

    • 在开发中我们经常会在一个字符串中查找或者获取另外一个字符串,String提供了如下方法:

    • 方法一: 查找字符串的位置

      • indexOf(要查找的字符串, 开始的位置)

      • 从头开始(第一个字符的位置),查找到最后一个字符位置的索引;

      • 如果搜到了, 就返回对应索引的位置; 没有找到,那么返回-1

      • 有一个相似的方法,叫lastIndexOf,从最后开始查找(用的较少)

      • var message = "my name is coder"
        var name = "coder"
        var index = message.indexOf(name)
        console.log(index)
        
    • 方法二:是否包含字符串

      • includes(searchString[, position]) 这是ES6新增的方法 返回一个布尔类型的值

      • 从position位置开始查找searchString, 根据情况返回 true 或 false

      • //判断message字符串中是否包含coder字符串
        var message = "my name is coder"
        var name = "coder"
        if (message.includes(name)) {
          console.log("message包含coder")
        } else {
          console.log("message不包含coder")
        }
        
    • 方法三:以xxx开头

      • startsWith(searchString[, position]), 这是ES6新增的方法 返回一个布尔类型的值

      • 从position位置开始,判断字符串是否以searchString开头;

      • //判断message字符串中是否以字符串my开头
        var message = "my name is coder"
        console.log(message.startsWith("my")) //true
        
    • 方法四:以xxx结尾

      • endsWith(searchString[,length]), 这是ES6新增的方法 返回一个布尔类型的值

      • 在length长度内,判断字符串是否以searchString结尾

      • //判断message字符串中是否以字符串coder结尾
        var message = "my name is coder"
        console.log(message.endsWith("coder")) //true
        
    • 方法五:替换字符串

      • replace(“被替换的字符串”, “替换为的字符串”) 替换后返回一个新的字符串

      • 查找到对应的字符串,并且使用新的字符串进行替代, 如果查找到多个相同的被替换字符串, 他只会替换第一个字符串

      • 这里也可以传入一个正则表达式来查找,也可以传入一个函数来替换

      • //将message中的字符串coder替换为why
        var message = "my name is coder"
        var newMessage = message.replace("coder", "why")
        console.log(newMessage) //"my name is why"
        
  • 截取子字符串(获取字符串)

    • 方法 slice(start, end) 获取start到end(不含end)的子字符串 允许负值参数

    • 获取到子字符串后返回一个新的字符串

    • var message = "my name is coder"
      console.log(message.slice(1, 4)) //从第1个开始, 截取到第4个(不包含第四个)  "y n"
      console.log(message.slice(9, -2))//从第5个开始 截取到倒数第二个(不包含倒数第二个)  "s cod"
      console.log(message.slice(9)) //从第9个开始 截取到最后一个(包含最后一个) "s coder"
      
  • 拼接字符串

    • 语法 concat(str1, [str2, […strN]])

    • 用于链接两个或者多个字符串, 等效与”+”

    • var str1 = "hello"
      var str2 = "world"
      var str3 = "coder"
      var newStr1 = str1.concat(str2)
      console.log(newStr1) //"helloworld"
      //链式调用
      var newStr2 = str1.concat(str2).concat(str3)
      console.log(newStr2) //"helloworldcoder"
      //传多个参数
      var newStr3 = str1.concat(str2, str3, "why");
      console.log(newStr3) //"helloworldcoderwhy"
      
  • 删除首尾空格

    • 语法 trim()

    • var str = "         hello   world          "
      console.log(str.trim()) //"hello   world"
      
  • 字符串分割

    • 语法 split(sparator[, limit]) 返回一个字符串类型的数组

      • separator:以什么字符串进行分割,也可以是一个正则表达式 传入分割符需要加引号

      • limit:限制返回片段的数量

      • var str = "aaa-cc-dddd-ffggg-ee-b"
        var items = str.split("-")
        console.log(items)
        
  • 更多的字符串的补充内容,可以查看MDN的文档:

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

数组Array

认识什么是数组

  • 对象允许存储键值集合,但是在某些情况下使用键值对来访问并不方便

    • 比如说一系列的商品、用户、英雄,包括HTML元素,我们如何将它们存储在一起呢?
  • 这个时候我们需要一种有序的集合,里面的元素是按照某一个顺序来排列的

  • 这个有序的集合,我们可以通过索引来获取到它

  • 这个结构就是数组(Array)

  • 数组和对象都是一种保存多个数据的数据结构,在后续的数据结构中我们还会学习其他结构;

  • 我们可以通过[]来创建一个数组:

    • 数组是一种特殊的对象类型

数组的创建方式

  • 创建一个数组有两种语法

    • //方法一 var arr1 = []
      var arr1 = ["abc", "cba", "aaa"]
      //方法二 var arr2 = new Array()
      var arr2 = new Array(1, 64, 89)
      
  • 下面的方法是在创建一个数组时,设置数组的长度**(很少用)**

    • var arr = new Array(5)
      console.log(arr)
      
  • 数组元素从0开始编号(索引index)

    • JavaScript并不支持负索引这种写法

数组的基本操作

  • 访问数组中的元素;

    • 通过中括号访问

    • var names = ["abc", "cba", "nba"]
      console.log(names[0]) //abc
      console.log(names[1]) //cba
      
    • 通过arr.at(i)访问

      • 如果 i >= 0,则与 arr[i] 完全相同
      • 对于 i 为负数的情况,它则从数组的尾部向前数
    • //与中括号的区别就是允许负数
      var names = ["abc", "cba", "nba"]
      console.log(names.at(0)) // abc
      console.log(names.at(-1)) //nba
      
  • 修改数组中的元素;

    • var names = ["abc", "cba", "nba"]
      names[0] = "coder"
      console.log(names) //["coder", "cba", "nba"]
      
  • 增加数组中的元素;

    • 一般使用对应方法追加
  • 删除数组中的元素

    • 一般使用对应方法删除

数组的添加、删除方法

  • 在数组的尾部添加或删除元素:

  • push()末端添加一个或多个元素

    • var names = ["abc", "cba", "nba"]
      names.push("coder", "why")
      console.log(names)
      
  • pop()末端删除一个元素 没有参数只能一个一个的删除

    • var names = ["abc", "cba", "nba"]
      names.pop()
      console.log(names)
      
  • 在数组的头部添加或删除元素

  • unshift()头部添加一个或多个元素

    • var names = ["abc", "cba", "nba"]
      names.shift("coder", "why")
      console.log(names)
      
  • shift()头部删除一个元素 没有参数只能一个一个的删除

    • var names = ["abc", "cba", "nba"]
      names.shift()
      console.log(names)
      
  • push/pop 方法运行的比较快,而 shift/unshift 比较慢

  • 如果我们希望在中间某个位置添加或者删除元素应该如何操作呢?

  • arr.splice() 方法可以说是处理数组的利器,它可以做所有事情:添加,删除和替换元素

  • arr.splice()语法结构如下:

    • arr.splice(start[, deleteCount[, item1[, item2[, … …]]]])

    • start位置开始, 处理数组中的元素

    • deleteCount: 要删除元素的个数, 如果为0或者负数表示不删除

    • item1, item2, … : 在添加元素时, 需要添加的元素

    • var names = ["abc", "cba", "nba", "coder", "why"]
      //索引为1处开始 删除2个元素
      names.splice(1, 2)
      //索引为1处开始 添加2个元素
      names.splice(1, 0, "kobe", "kaisa")
      //索引为1处开始 删除1个元素 添加2个元素
      names.splice(1, 1, "vn", "deng")
      console.log(names)
      
    • 注意:这个方法会修改原数组

数组的length属性

  • length属性用于获取数组的长度:

    • 当我们修改数组的时候,length 属性会自动更新

    • var arr = ["abc", "aaa", "acb"]
      console.log(arr.length) //3
      
      
  • length 属性的一个有意思的点是它是可写的

    • 如果我们手动增加一个大于默认length的数值,那么会增加数组的长度

      • var arr = ["abc", "aaa", "acb"]
        console.log(arr.length) //3`
        
        arr.length = 6
        console.log(arr) //['abc', 'aaa', 'acb', 空属性 × 3]
        
    • 但是如果我们小于默认length的数值,数组就会被截断

      • var arr = ["abc", "aaa", "acb"]
        console.log(arr.length) //3`
        
        arr.length = 1
        console.log(arr) //['abc']
        
    • 因此 如果想要清空一个数组最简单方法就是: arr.length = 0

      • var arr = ["abc", "aaa", "acb"]
        console.log(arr.length) //3`
        
        arr.length = 0
        console.log(arr) //[ ]
        

数组的遍历

  • 普通for循环遍历

    • var arr = ["abc", "aaa", "acb"]
      for (let i= 0; i < arr.length; i++) {
        console.log(arr[i])
      }
      
  • for…in遍历数组, 获取到索引值

    • var arr = ["abc", "aaa", "acb"]
      for (let index in arr) {
        console.log(arr[index])
      }
      
  • for…of遍历数组, 获取到每一个元素

    • var arr = ["abc", "aaa", "acb"]
      for (let item of arr) {
        console.log(item)
      }
      

数组的方法

  • arr.slice 方法用于对数组进行截取(类似于字符串的slice方法)返回一个新数组, 不会修改原数组

    • 语法: arr.slice[begin[, end]]

    • 包含begin, 但不包含end

    • var names = ["abc", "aaa", "acb", "bbb"]
      var newNames1 = names.slice(1)
      console.log(newNames1) //从索引为1开始截取到最后  ["aaa", "acb", "bbb"]
      var newNames2 = names.slice(1, 3)
      console.log(newNames2) //从索引为1开始截取到索引为3的位置(不包含索引为3的) ["aaa", "acb"]
      
  • arr.concat方法:合并多个数组, 返回一个新数组

    • 语法: var newArr = oldArr.concat(value1[, value2[, …[, valueN]]])

    • var names1 = ["abc", "cba", "bca"]
      var names2 = ["aaa", "bbb"]
      var names3 = ["ccc", "ddd"]
      var newNames = names1.concat(names2, names3, "coder", 123)
      console.log(newNames) //["abc", "cba", "bca", "aaa", "bbb", "ccc", "ddd", "coder", 123]
      
  • arr.join方法: 将一个数组的所有元素连接成一个字符串并返回这个字符串。

    • 语法: arr.join([separator])

    • separator: 以什么分隔符连接

    • var names = ["abc", "cba", "bca"]
      var namesStr = names.join("-")
      console.log(namesStr) //"abc-cba-bca"
      
  • arr.indexOf方法: 从头开始查找某个元素的索引

    • 语法: arr.indexOf(searchElement[, fromIndex])

      • 从fromIndex开始查找, 默认从索引0处开始查找, 如果找到返回对应索引, 如果没找到就返回-1

      • searchElement: 要查找的元素

      • var names = ["abc", "cba", "bca"]
        console.log(names.indexOf("cba")) //1
        console.log(names.indexOf("aaa")) //-1
        
  • arr.includes方法:判断数组是否包含某个元素

    • 语法: add.includes(valueToFind[, fromIndex])

    • 从fromIndex开始查找, 默认从索引0处开始查找, 如果找到返回true, 如果 没找到就返回false

    • var names = ["abc", "cba", "bca"]
      console.log(names.includes("abc")) //true
      console.log(names.includes("aaa")) //false
      
  • find 和 findIndex 直接查找元素或者元素的索引(ES6之后新增的语法)

  • find()方法和findIndex()方法参数要求传入一个函数fn, find内部调用函数fn时会向fn传入三个参数,

  • 分别是: 数组的元素, 数组元素的索引, 数组本身

  • find()方法最终返回数组的元素, findIndex()方法最终返回数组元素的索引

  • //查找下面数组的对象中 id为101的学生
    //1.for循环查找
    var stu = null;
    var students = [
      { id: 100, name: "aaa", age: 18 },
      { id: 101, name: "bbb", age: 19 },
      { id: 102, name: "ccc", age: 20 },
      { id: 103, name: "ddd", age: 21 },
    ];
    for (item of student) {
      if (item.id === 101) {
        stu = item;
        break;
      }
    }
    console.log(stu);
    
  • //2.find()方法查找
    var students = [
      { id: 100, name: "aaa", age: 18 },
      { id: 101, name: "bbb", age: 19 },
      { id: 102, name: "ccc", age: 20 },
      { id: 103, name: "ddd", age: 21 },
    ]
    var stu = students.find(function(item, index, arr) {
      return item.id === 101
    })
    console.log(stu) //{ id: 101, name: "bbb", age: 19 }
    
  • //findIndex()方法查找id为101的索引
    var students = [
      { id: 100, name: "aaa", age: 18 },
      { id: 101, name: "bbb", age: 19 },
      { id: 102, name: "ccc", age: 20 },
      { id: 103, name: "ddd", age: 21 },
    ]
    var stuIndex = students.findIndex(function(item, index, arr) {
      return item.id === 101
    })
    console.log(stuIndex) //1
    
  • sort()方法也是一个高阶函数,用于对数组进行排序,并且生成一个排序后的新数组

  • 语法: arr.sort([compareFunction])

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 前面;

  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变;

  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 前面;

  • 也就是说,谁小谁排在前面;

  • //简单类型排序--升序
    var nums = [123, 234, 345, 456, 567, 789]
    nums.sort(function (item1, item2) {
      return item1 - item2
    })
    console.log(nums) //[123, 234, 345, 456, 567, 789]
    
  • //简单类型排序--降序
    var nums = [123, 234, 345, 456, 567, 789]
    nums.sort(function (item1, item2) {
      return item2 - item1
    })
    console.log(nums) //[789, 567, 456, 345, 234, 123]
    
  • //复杂类型排序--按照年龄升序
    var students = [
      { id: 100, name: "aaa", age: 18 },
      { id: 101, name: "bbb", age: 11 },
      { id: 102, name: "ccc", age: 21 },
      { id: 103, name: "ddd", age: 13 },
    ]
    students.sort(function (item1, item2) {
      return item1.age - item2.age
    })
    console.log(students)
    
  • //复杂类型排序--按照年龄降序
    var students = [
      { id: 100, name: "aaa", age: 18 },
      { id: 101, name: "bbb", age: 11 },
      { id: 102, name: "ccc", age: 21 },
      { id: 103, name: "ddd", age: 13 },
    ]
    students.sort(function (item1, item2) {
      return item2.age - item1.age
    })
    console.log(students)
    
  • reverse() 方法将数组中元素的位置颠倒,并返回该数组

    • var nums = [123, 234, 345, 456, 567, 789]
      nums.reverse()
      console.log(nums)
      

数组的其他高阶方法

  • arr.forEach()

    • 遍历数组,并且让数组中每一个元素都执行一次对应的方法

    • var nums = [123, 234, 345, 456, 567, 789]
      nums.forEach(function(item, index, arr) {
        console.log(item)
      })
      
  • arr.map() 映射

    • map() 方法创建一个新数组

    • 这个新数组由原数组中的每个元素都调用一次 提供的函数后的返回值组成

    • //需求: 将数组中所有数都平方返回到一个数组中
      var nums = [123,111,54,65,99,20,11]
      var newNums = nums.map(function(item, index, arr) {
        return item * item
      })
      console.log(newNums) //[15129, 12321, 2916, 4225, 9801, 400, 121]
      
  • arr.filter() 过滤

    • filter() 方法创建一个新数组

    • filter传入一个函数 函数中返回为true的元素 会添加到一个新数组中

    • //需求 返回数组中为偶数的元素
      var nums = [123,111,54,65,99,20,11]
      var newNums = nums.filter(function(item, index, arr) {
        return item % 2 === 0
      })
      console.log(newNums) //[54, 20]
      
  • arr.reduce() 求和

    • reduce()方法, 传入两个参数**, 第一个参数fn, 第二个参数初始化值**

    • fn回调中有四个参数分别是: 上一次计算的结果, 数组的元素, 数组元素的索引, 数本身

    • 用于计算数组中所有元素的总和

    • 对数组中的每个元素按序执行一个由您提供的 reducer 函数;

    • 每一次运行 reduce 会将先前元素的计算结果作为参数传入最后一次执行将其结果汇总为单个返回值

    • var nums = [123,111,54,65,99,20,11]
      //preValue为上一次执行的返回值
      var result = nums.reduce(function(preValue, item, index, arr) {
        return preValue + item
      }, 0)
      console.log(result) //483
      
    • 注意: 如果没有给初始化值preValue默认为数组的第一个元素, item从数组第二个元素开始

    • reduce练习

    • var products = [
        { name: "键盘", price: "40", count: "3" },
        { name: "鼠标", price: "8", count: "5" },
        { name: "耳机", price: "20", count: "3" },
      ]
      //计算出总价格
      var totalPrice = products.reduce(function(preValue, item) {
        return preValue + item.price * item.count
      }, 0)
      console.log(totalPrice)
      
  • 综合小练习

    • 需求 过滤一个数组的偶数, 映射偶数的平方, 计算他们的和

    •   var nums = [123,111,10,65,99,20,11]
        var total = nums.filter(function(item) {
          return item % 2 === 0
        })
        .map(function(item) {
          return item * item
        })
        .reduce(function(preValue, item) {
          return preValue + item
        }, 0)
        console.log(total)
      

时间对象-Date

  • 在JavaScript中我们使用Date来表示和处理时间, Date日期对象是一个构造函数, 必须使用new来调用日期对象

    • Date的构造函数有如下用法:

    • new Date() 获取当前静态时间

    • var date = new Date();
      console.log(date);
      
    • new Date(value) 传入的value是毫秒数, 获取1970-1-1 00:00:00经过了value毫秒的时间

    • var date2 = new Date(1000);
      console.log(date2);
      
    • new Date(dateString) 传入的dateString, 日期的字符串值

    • var date3 = new Date("2022-05-25");
      console.log(date3);
      
    • **new Date(year, monthIndex[, day[, hours[, minutes[, seconds[, milliseconds]]]]]) 创建指定日期的时间对象 **

    • var date4 = new Date(2020, 04, 25, 06, 15, 08, 08)
      console.log(date4)
      
  • dateString时间的表示方式

    • 日期的表示方式有两种:RFC 2822 标准 或者 ISO 8601 标准
    • 默认打印的时间格式是RFC 2822标准的: Mon May 25 2020 06:15:08 GMT+0800
    • 我们也可以将其转化成ISO 8601标准的: 2020-05-24T22:15:08.008Z
      • YYYY:年份,0000 ~ 9999
      • MM:月份,01 ~ 12
      • DD:日,01 ~ 31
      • T:分隔日期和时间,没有特殊含义,可以省略
      • HH:小时,00 ~ 24
      • mm:分钟,00 ~ 59
      • ss:秒,00 ~ 59
      • .sss:毫秒
      • Z:时区
  • Date获取信息的方法

    • getFullYear():获取年份(4 位数);

    • getMonth():获取月份,从 0 到 11;

    • getDate():获取当月的具体日期,从 1 到 31;

    • getHours():获取小时;

    • getMinutes():获取分钟;

    • getSeconds():获取秒钟;

    • getMilliseconds():获取毫秒

    • var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      console.log(year, month, day, hour, minute, second)
      console.log(`${year}/${month}/${day} ${hour}:${minute}:${second}`)
      
    • getDay(): 获取一周中的第几天(0: 星期天)

  • Date设置信息的方法(了解 很少用)

    • setFullYear(year, [month], [date])
    • setMonth(month, [date])
    • setDate(date)
    • setHours(hour, [min], [sec], [ms])
    • setMinutes(min, [sec], [ms])
    • setSeconds(sec, [ms])
    • setMilliseconds(ms)
    • setTime(milliseconds)
    • 注意: 我们可以设置超范围的数值,它会自动校准
  • Date获取Unix时间戳

    • Unix 时间戳:它是一个整数值,表示自1970年1月1日00:00:00 UTC至今的毫秒数

    • 在JavaScript中,我们有多种方法可以获取这个时间戳

      • 方式一:new Date().getTime() 将一个Date对象转成时间戳

        • var date1 = new Date().getTime() //1970年1月1日00:00:00 至今的毫秒数
          var date2 = new Date("2030-1.1").getTime() //1970年1月1日00:00:00到2030年1月1日00:00:00的毫秒数
          console.log(date1)
          console.log(date2)
          
      • 方式二:new Date().valueOf() 将一个Date对象转成时间戳

        • var date1 = new Date().valueOf() //1970年1月1日00:00:00 至今的毫秒数
          var date2 = new Date("2030-1.1").valueOf() //1970年1月1日00:00:00到2030年1月1日00:00:00的毫秒数
          console.log(date1)
          console.log(date2)
          
      • 方式三:+new Date()

        • var date1 = +new Date();
          console.log(date1);
          var date2 = new Date();
          console.log(+date2);
          
      • 方式四:Date.now() 类方法

        • var date = Date.now() //获取当前时间戳
          console.log(date)
          
    • 获取到Unix时间戳之后,我们可以利用它来测试代码的性能

      • var startTime = Date.now()
        for (var i = 0; i < 100000; i++) {
          console.log(i)
        }
        var endTime = Date.now()
        console.log("100000次for循环需要的时间是:", endTime - startTime);
        
  • Date.parse类方法

    • Date.parse(str) 类方法可以从一个字符串中读取日期,并且输出对应的Unix时间戳

    • var timeString = "2033-01.01"
      var timestamp = Date.parse(timeString)
      console.log(timestamp)
      
    • Date.parse(str) :

      • 作用等同于 new Date(dateString).getTime() 操作;
      • str: 需要符合 RFC2822 或 ISO 8601 日期格式的字符串
        • 比如YYYY-MM-DDTHH:mm:ss.sssZ
      • 其他格式也许也支持,但结果不能保证一定正常;
      • 如果输入的格式不能被解析,那么会返回NaN

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/120153.html

(0)
seven_的头像seven_bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!