JavaScript常见内置类

Rsquo
124 阅读8分钟

1. 奇怪现象(悖论)

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

    • 但是在开发中，经常这样操作：

      var name = "Hello World"
var height = 1.8888888

// 在调用原始类型的属性或者方法时, 内部的操作 name = new String(name)
console.log(name.length)
console.log(name.split(" "))
console.log(height.toFixed(2))

  • 为什么会出现这样奇怪的现象呢？（悖论）

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

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

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

  • 默认情况下，调用一个原始类型的属性或者方法时，会进行如下操作：

    • 根据原始值，创建一个原始类型对应的包装类型对象
    • 调用对应的属性或者方法，返回一个新的值
    • 创建的包装类对象被销毁
    • 通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用

  • 注意事项：null、undefined没有任何的方法，也没有对应的“对象包装类”

2. Number包装类型

  • 类属性:
    • Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)
    • Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 -(2^53 - 1)
  • 实例方法:

    • toString(base)，将数字转成字符串，并且按照base进制进行转化

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

      • 注意：如果是直接对一个数字操作，需要使用 .. 运算符

    • toFixed(digits)，格式化一个数字，保留digits位的小数，string类型（能够四舍五入）

      • digits的范围是0到20（包含）之间
      // toString(base)
var num = 1000
console.log(num.toString(), typeof num.toString()) // 1000 string
console.log(num.toString(2)) // 1111101000
console.log(num.toString(8)) // 1750
console.log(num.toString(16)) // 3e8

// console.log(123..toString(2))

// toFixed的使用(重要)
var pi = 3.1415926
console.log(pi.toFixed(3)) // 3.142
  • 类方法
    • Number.parseInt -> parseInt
    • Number.parseFloat -> parseFloat 
      // 整数: 123
// 浮点数: 小数 123.321
var num1 = "123.521"
console.log(Number(num1).toFixed(0)) // 124
console.log(Number.parseInt(num1)) // 123
console.log(Number.parseFloat(num1)) // 123.521

// window对象上面
console.log(parseInt(num1)) // 123
console.log(parseFloat(num1)) //123.521

3. 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次幂
    • Math.abs(x)：返回一个数的绝对值
    // Math对象的属性
console.log(Math.PI) // 3.141592653589793

// Math对象的方法
var num = 3.55
console.log(Math.floor(num)) // 3
console.log(Math.ceil(num)) // 4
console.log(Math.round(num)) // 4

// 另外方法
// random: 随机生成 [0, 1)
console.log(Math.random())
// 需求: [5~50)的随机数
// Math.floor(Math.random() * x) + y
for (var i = 0; i < 1000; i++) {
  var randomNum = Math.floor(Math.random() * 45) + 5
  console.log(randomNum)
}

// Math.pow(x, y)
console.log(Math.pow(2, 4)) // 16

  • Math中还有很多其他数学相关的方法，可以查看MDN文档

4. String包装类型

4.1 基本使用

  • 常见属性

    • length属性：获取字符串的长度

  • 访问字符串的字符

    • 通过字符串的索引 str[0]，未找到返回undefined
    • 通过str.charAt(pos)方法，未找到返回空字符串

  • 遍历

    • 普通的for循环
    • for..of方式
      • 可迭代对象
      • 字符串/数组
      var message = "Hello World"
// 1.属性: length
console.log(message.length)

// 2.访问字符串中某个位置的字符
console.log(message[4]) // o
console.log(message.charAt(4)) // o
console.log(message[20]) // undefined
console.log(message.charAt(20)) // ''

// 3.字符串的遍历
// for普通遍历
for (var i = 0; i < message.length; i++) {
  console.log(message[i])
}

// for..of的遍历 -> 迭代器
// String对象内部是将字符串变成了一个可迭代对象
for (var char of message) {
  console.log(char)
}

4.2 字符串的修改

  • 字符串不可变性
    • 字符串在定义后是不可以修改的

  • 在很多字符串的操作中，都是生成了一个新的字符串

    var message = "Hello World"

// 1.严格的修改字符串, 之前的字符串内部修改掉
message[2] = "a"
console.log(message) // Hello World

// toUpperCase: 将所有的字符变成大写
// toLowerCase: 将所有的字符变成小写

var message1 = message.toUpperCase()
console.log(message) // Hello World
console.log("message1:", message1) // HELLO WORLD
message = message.toUpperCase() // HELLO WORLD

var message2 = message.toLowerCase()
console.log(message2) // hello world

4.3 字符串的查找

  • 查找字符串位置：str.indexOf(searchString, fromIndex)

    • 从fromIndex开始，查找searchValue的索引
    • 如果没有找到，那么返回-1
    • 有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）

  • 是否包含字符串：str.includes()

    • 从position位置开始查找searchString， 根据情况返回 true 或 false
    • 这是ES6新增的方法
    // 判断一个字符串中是否有另外一个字符串
// 1.indexOf(searchString, fromIndex)
/*
  index:
    情况一: 搜索到, 搜索字符串所在索引位置
    情况二: 没有搜索到, 返回-1
*/
var index = message.indexOf(name)
if (message.indexOf(name) !== -1) {
  console.log("message中包含name")
} else {
  console.log("message不包含name")
}

// 2.includes: ES6中新增一个方法, 就是用来判断包含关系
if (message.includes(name)) {
  console.log("message中包含name")
}

4.4 字符串的开头、结尾、替换

  • 以xxx开头：str.startsWidth(searchString[, position])

    • 从position位置开始，判断字符串是否以searchString开头
    • 这是ES6新增的方法

  • 以xxx结尾：str.endsWidth(searchString[, length])

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

  • 替换字符串：str.replace(regexp|substr, newSubStr|function)

    • 查找到对应的字符串，并且使用新的字符串进行替代

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

    var newMessage = message.replace("zhangsan", "lisi")
var newName = "wangwu"
var newMessage = message.replace("zhangsan", function() {
  return newName.toUpperCase()
})

4.5 字符串的截取

image.png

  • 常用的是slice方法
var message = "Hello World"

// 获取子字符串
console.log(message.slice(3, 7)) // "lo W"
console.log(message.slice(3, -1)) // "lo Worl"
console.log(message.slice(3)) // "lo World"

// substr
console.log(message.substr(3, 7)) // "lo Worl"

4.6 字符串的其他方法

  • 拼接字符串：str.concat(str2, [, ...strN])

  • 删除首位空格：str.trim()

  • 字符串分割：str.split([separator[, limit]])

    • separator：以什么字符串进行分割，也可以是一个正则表达式
    • limit：限制返回片段的数量
    var str1 = "Hello"
var str2 = "World"
var str3 = "kobe"

// 1.字符串拼接
// +
// var newString = str1 + str2 + str3
// console.log(newString)
// concat方法: 链式调用
var newString2 = str1.concat(str2).concat(str3)
var newString3 = str1.concat(str2, str3, "abc", "cba")
console.log(newString2)
console.log(newString3)

// 2.删除收尾的空格
console.log("    nba      abc   ".trim()) // "why      abc"

// 3.字符串切割split
var message = "abc-cba-nba-mba"
var items = message.split("-") // ['abc', 'cba', 'nba', 'mba']
var newMessage = items.join("*")
console.log(newMessage) // abc*cba*nba*mba

  • 更多的字符串的内容，可以查看MDN的文档

5. Date包装类型

5.1 日期的表示概念

标准时间：根据原子钟计算的标准时间UTC（Coordinated Universal Time）

5.2 Date构造函数

// 创建Date对象的方式
// 1.没有传入任何的参数, 获取到当前时间
var date1 = new Date()
console.log(date1) // Sat May 21 2022 18:35:16 GMT+0800 (中国标准时间)

// 2.传入参数: 时间字符串
var date2 = new Date("2022-05-21")
console.log(date2) // Sat May 21 2022 08:00:00 GMT+0800 (中国标准时间)

// 3.传入具体的年月日时分秒毫秒
var date3 = new Date(2022, 05, 21, 09, 08, 07, 333)
console.log(date3) // Tue Jun 21 2022 09:08:07 GMT+0800 (中国标准时间)

// 4.传入一个Unix时间戳
// 1s -> 1000ms
var date4 = new Date(10004343433)
console.log(date4)

5.3 时间表示方法

  • RFC表示
    • new Date()：Sat May 21 2022 18:43:29 GMT+0800 (中国标准时间)
  • ISO表示
    • new Date().toISOString()：'2022-05-21T10:44:03.652Z'
    image.png

5.4 实例方法

  • Date获取信息的方法

    • getFullYear()：获取年份（4位数）
    • getMonth()：获取月份，从 0 到 11
    • getDate()：获取当月的具体日期，从 1 到 32
    • getHours()：获取小时
    • getMinutes()：获取分钟
    • getSeconds()：获取秒钟
    • getMilliseconds()：获取毫秒
    • 获取某周中的星期几：
      • getDay()：获取一周中的第几天，从 0（星期日）到 6（星期六）

  • 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)
    var date = new Date()

console.log(date)
console.log(date.toISOString())

// 1.获取想要的时间信息
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) // 2022 5 21 18 54 57
console.log(`${year}/${month}/${day} ${hour}:${minute}:${second}`) // 2022/5/21 18:54:57

var weekday = date.getDay() // 一周中的第几天
console.log(weekday) // 6


// 2.也可以给date设置时间(了解)
date.setFullYear(2033)
// 自动校验
date.setDate(32)
console.log(date) // Wed Jun 01 2033 18:54:57 GMT+0800 (中国标准时间)

5.5 获取时间戳

  • Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。

  • 获取这个时间戳：

    • 方式一：new Date().getTime()
    • 方式二：new Date().valueOf()
    • 方式三：+new Date()
    • 方式四：Date.now()
    // Date对象, 转成时间戳
var date = new Date()
var date2 = new Date("2033-03-03")

// 方法一: 当前时间的时间戳
var timestamp1 = Date.now()
console.log(timestamp1) // 1653131377923

// 方法二/三将一个date对象转成时间戳
var timestamp2 = date.getTime()
var timestamp3 = date2.valueOf()
console.log(timestamp2, timestamp3) // 1653131377923 1993420800000

// 方法四:
console.log(+date) // 1653131377923


// 计算这个操作所花费的时间
var startTime = Date.now()
for (var i = 0; i < 100000; i++) {
  console.log(i)
}
var endTime = Date.now()
console.log("执行100000次for循环的打印所消耗的时间:", endTime - startTime)

5.6 Date.parse(dateString)

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

  • Date.parse(str) ：

    • 作用等同于 new Date(dateString).getTime() 操作

    • 需要符合 RFC2822 或 ISO 8601 日期格式的字符串，比如YYYY-MM-DDTHH:mm:ss.sssZ

    • 其他格式也许也支持，但结果不能保证一定正常

    • 如果输入的格式不能被解析，那么会返回NaN

    var timeString = "03/23/2033"

// 1.方式一:
// var date = new Date(timeString)
// var timestamp = date.getTime()

// 2.方式二:
var timestamp = Date.parse(timeString)
console.log(timestamp)
avatar
文章
阅读
粉丝