JS基础-常见内置类

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；
  - 注意：如果是直接对一个数字操作，需要使用..运算符；
    - console.log(123..toString(2)) –》输出123的二进制表示
- 方法二：toFixed(digits)，格式化一个数字，保留digits位的小数；
  - digits的范围是0到20（包含）之间；

 var num = 1000
console.log(num.toString(), typeof num.toString())
console.log(num.toString(2))
console.log(num.toString(8))
console.log(num.toString(16))

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

// toFixed的使用(重要)
var pi = 3.1415926
console.log(pi.toFixed(3))

Number类方法补充：
- 方法一：Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
- 方法二：Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；

 var num1 = "123.521"
   console.log(Number(num1).toFixed(0))
   console.log(Number.parseInt(num1))
   console.log(Number.parseFloat(num1))

   // window对象上面
   console.log(parseInt(num1))
   console.log(parseFloat(num1))
console.log(parseInt === Number.parseInt)

更多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次幂
Math中还有很多其他数学相关的方法，可以查看MDN文档：
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

String类

String常见的属性：
- length：获取字符串的长度；
操作一：访问字符串的字符
- 使用方法一：通过字符串的索引 str[0]
- 使用方法二：通过str.charAt(pos)方法
- 它们的区别是索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串；
练习：字符串的遍历
- 方式一：普通for循环
- 方式二：for..of遍历

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

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

String类的补充（二） - 修改字符串

字符串的不可变性：
- 字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的
所以，在我们改变很多字符串的操作中，都是生成了一个新的字符串；
- 比如改变字符串大小的两个方法
- toLowerCase()：将所有的字符转成小写；
- toUpperCase() ：将所有的字符转成大写；

String类的补充（三） - 查找字符串

在开发中我们经常会在一个字符串中查找或者获取另外一个字符串，String提供了如下方法：
方法一：查找字符串位置
- 从fromIndex开始，查找searchValue的索引；
- 如果没有找到，那么返回-1；
- 有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）
方法二：是否包含字符串
- 从position位置开始查找searchString，根据情况返回 true 或 false
- 这是ES6新增的方法；

String类的补充（四）- 开头和结尾

方法三：以xxx开头
- 从position位置开始，判断字符串是否以searchString开头；
- 这是ES6新增的方法，下面的方法也一样；

1	message.startsWith("my")

方法四：以xxx结尾
- 在length长度内，判断字符串是否以searchString结尾；
方法五：替换字符串
- 查找到对应的字符串，并且使用新的字符串进行替代；
- 这里也可以传入一个正则表达式来查找，也可以传入一个函数来替换；

String类的补充（五） - 获取子字符串

**方法八：获取子字符串 **

开发中推荐使用slice方法。

String类的补充（六） - 其他方法

方法六：拼接字符串

1 2	var newString2 = str1.concat(str2).concat(str3) var newString3 = str1.concat(str2, str3, "abc", "cba")

方法七：删除首尾空格

1	console.log(" why abc ".trim())

方法九：字符串分割
- separator：以什么字符串进行分割，也可以是一个正则表达式；
- limit：限制返回片段的数量
更多的字符串的补充内容，可以查看MDN的文档：
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

数组的创建方式

创建一个数组有两种语法：
1.创建数组的方式

var names = ["why", "kobe", "james", "curry"]


 var product1 = { name: "苹果", price: 10 }
 var products = [
   { name: "鼠标", price: 98 },
   { name: "键盘", price: 100 },
   { name: "西瓜", price: 20 },
   product1
 ]

创建方式二: 类Array

1
2
3

 var arr1 = new Array()
var arr2 = new Array("abc", "cba", "nba") // ["abc", "cba", "nba"]
console.log(arr1, arr2)

传入了一个数字, 它默认会当成我们要创建一个对应长度的数组

1 2	var arr3 = new Array(5) // [empty*5] console.log(arr3, arr3[0])

通过索引访问元素

1 2	console.log(names[0]) // 第一个元素 console.log(names[names.length-1]) // 最后一个元素

数组的基本操作

访问数组中的元素：
- 通过中括号[]访问
- arr.at(i)：
  - 如果 i >= 0，则与 arr[i] 完全相同。
  - 对于 i 为负数的情况，它则从数组的尾部向前数。

var names = ["abc", "cba", "nba"]

 // 1.访问数组中的元素
 console.log(names[0])
 console.log(names.at(0))
 
 console.log(names[-1])
 console.log(names.at(-1))

修改数组中的元素

1	names[0] = "why"

删除和添加元素虽然也可以通过索引来直接操作，但是开发中很少这样操作。

// 3.新增数组中的元素(了解)
names[3] = "kobe"
names[10] = "james"
console.log(names)

// 4.删除数组中的元素(了解)
delete names[1]
console.log(names)
console.log(names[1])

数组的添加、删除方法

在数组的尾端添加或删除元素：
- push 在末端添加元素.
- pop 从末端取出一个元素.

1 2	arr.push("why", "kobe") arr.pop()

在数组的首端添加或删除元素
- shift 取出队列首端的一个元素，整个数组元素向前前移动；
- unshift 在首端添加元素，整个其他数组元素向后移动；

1 2	arr.unshift("why", "kobe") arr.shift()

push/pop 方法运行的比较快，而 shift/unshift 比较慢。

数组的添加、删除方法（二）

如果我们希望在中间某个位置添加或者删除元素应该如何操作呢？
arr.splice 方法可以说是处理数组的利器，它可以做所有事情：添加，删除和替换元素。
arr.splice的语法结构如下：
- 从start位置开始，处理数组中的元素；
- deleteCount：要删除元素的个数，如果为0或者负数表示不删除；
- item1, item2, …：在添加元素时，需要添加的元素；

// 3. 在任意位置添加/删除/替换元素
    var names = ["abc", "cba", "nba", "mba", "abcd"]
    // 参数一: start, 从什么位置开始操作元素
    // 参数二: deleteCount, 删除元素的个数

    // 3.1.删除元素
    names.splice(1, 2)
    console.log(names)

    // 3.2.新增元素
    // deleteCount: 0, 后面可以添加新的元素
    names.splice(1, 0, "why", "kobe")
    console.log(names)

    // 3.3.替换元素
    names.splice(1, 2, "why", "kobe", "james")
    console.log(names)

**注意：这个方法会修改原数组 **

length属性

length属性用于获取数组的长度：
- 当我们修改数组的时候，length 属性会自动更新。
length 属性的另一个有意思的点是它是可写的
- 如果我们手动增加一个大于默认length的数值，那么会增加数组的长度。
- 但是如果我们减少它，数组就会被截断。
**所以，清空数组最简单的方法就是：arr.length = 0;。 **

数组的遍历

// 2.数组的遍历
 var names = ["abc", "cba", "nba", "mba"]
 
 // 2.1. 普通的for循环
 for (var i = 0; i < names.length; i++) {
   console.log(names[i])
 }

 // 2.2. for..in
 for (var index in names) {
   console.log(index, names[index])
 }

 // 2.3. for..of
 for (var item of names) {
   console.log(item)
 }

数组方法 – slice、cancat、 join

arr.slice 方法：用于对数组进行截取（类似于字符串的slice方法）。
- 包含bigin元素，但是不包含end元素；
- slice方法: 不会修改原数组.与splice有区别: splice修改原有的数组

1
2
3

var names = ["abc", "cba", "nba", "mba", "why", "kobe"]
var newNames = names.slice(2, 4)
console.log(newNames)

arr.concat方法：创建一个新数组，其中包含来自于其他数组和其他项的值。
- concat方法: 将多个数组拼接在一起

var names1 = ["abc", "cba"]
var names2 = ["nba", "mba"]
var names3 = ["why", "kobe"]
var newNames2 = names1.concat(names2, names3)
console.log(newNames2)

**arr.join方法：将一个数组的所有元素连接成一个字符串并返回这个字符串。 **

1 2	var names = ["abc", "cba", "nba", "mba", "why", "kobe"] console.log(names.join("-"))

数组方法 – 查找元素

arr.indexOf方法：查找某个元素的索引
- 从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1；
- 也有对应的从最后位置开始查找的 lastIndexOf 方法

1 2	var names = ["abc", "cba", "nba", "mba"] console.log(names.indexOf("nbb"))//-1

arr.includes方法：判断数组是否包含某个元素
- 从索引 from 开始搜索 item，如果找到则返回 true（如果没找到，则返回 false）。
**find 和 findIndex 直接查找元素或者元素的索引（ES6之后新增的语法） **

var students = [
   { id: 100, name: "why", age: 18 },
   { id: 101, name: "kobe", age: 30 },
   { id: 102, name: "james", age: 25 },
   { id: 103, name: "why", age: 22 }
 ]

 var stu = students.find(function (item) {
   if (item.id === 101) return true
 })
 console.log(stu)

var names = ["abc", "cba", "nba"]
  var findIndex = names.findIndex(function(item, index, arr) {
    return item === "nba"
  })
  
  console.log(findIndex)//2

数组的排序 – sort/reverse

sort方法也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组：
- 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 前面；
- 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
- 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 前面；
- 也就是说，谁小谁排在前面；
**reverse() 方法将数组中元素的位置颠倒，并返回该数组。 **

var nums = [20, 4, 10, 15, 100, 88]
 nums.sort(function (item1, item2) {
   return item1 - item2
 })

 console.log(nums)
 console.log(nums.reverse())

var students = [
   { id: 100, name: "why", age: 18 },
   { id: 101, name: "kobe", age: 30 },
   { id: 102, name: "james", age: 25 },
   { id: 103, name: "curry", age: 22 }
 ]

 students.sort(function (item1, item2) {
   return item1.age - item2.age
 })
 console.log(students)

数组的其他高阶方法

arr.forEach
- 遍历数组，并且让数组中每一个元素都执行一次对应的方法；

var names = ["abc", "cba", "nba", "mba"]

  // 三种方式, 新增一种方式
  names.forEach(function(item) {
    console.log(item, this)
  }, { name: "why" })

arr.map
- map() 方法创建一个新数组；
- 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；

var nums = [11, 20, 55, 100, 88, 32]
var newNums = nums.map(function (item) {
  return item * item
})
console.log(newNums)

arr.filter
- filter() 方法创建一个新数组
- 新数组中只包含每个元素调用函数返回为true的元素；

var nums = [11, 20, 55, 100, 88, 32]
 var newNums = nums.filter(function (item) {
   return item % 2 === 0
 })
 console.log(newNums)

arr.reduce
- 用于计算数组中所有元素的总和；
- 对数组中的每个元素按序执行一个由您提供的 reducer 函数；
- 每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；

var nums = [11, 20, 55, 100, 88, 32]
var result = nums.reduce(function (preValue, item) {
  console.log(`preValue:${preValue} item:${item}`)
  return preValue + item
}, 0)
console.log(result)

**如果initialValue没有传,**preValue为第一个值，item为第二个值

var nums = [11, 20, 55, 100, 88, 32]
   var result = nums.reduce(function (preValue, item) {
     console.log(`preValue:${preValue} item:${item}`)
     return preValue + item
   })
   console.log(result)

创建Date对象

在JavaScript中我们使用Date来表示和处理时间
- Date的构造函数有如下用法：

// 1.没有传入任何的参数, 获取到当前时间
 var date1 = new Date()
 console.log(date1)

 // 2.传入参数: 时间字符串
 var date2 = new Date("2023-05-08")
 console.log(date2)

 // 3.传入具体的年月日时分秒毫秒
 var date3 = new Date(2033, 10, 10, 09, 08, 07, 333)
 console.log(date3)

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

dateString时间的表示方式

日期的表示方式有两种：RFC 2822 标准或者 ISO 8601 标准。
默认打印的时间格式是RFC 2822标准的：
我们也可以将其转化成ISO 8601标准的：

Date获取信息的方法

我们可以从Date对象中获取各种详细的信息：
- getFullYear()：获取年份（4 位数）；
- getMonth()：获取月份，从 0 到 11
- getDate()：获取当月的具体日期，从 1 到 31（方法名字有点迷）；
- getHours()：获取小时；
- getMinutes()：获取分钟；
- getSeconds()：获取秒钟；
- getMilliseconds()：获取毫秒；
获取某周中的星期几：
- getDay()：获取一周中的第几天，从 0（星期日）到 6（星期六）；

Date获取Unix时间戳

Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数
在JavaScript中，我们有多种方法可以获取这个时间戳：
- 方式一：new Date().getTime()
- 方式二：new Date().valueOf()
- 方式三：+new Date()
- 方式四：Date.now()
获取到Unix时间戳之后，我们可以利用它来测试代码的性能：

Date.parse方法

Date.parse(str) 方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳
Date.parse(str) ：
- 作用等同于 new Date(dateString).getTime() 操作；
- 需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
  - 比如YYYY-MM-DDTHH:mm:ss.sssZ
- 其他格式也许也支持，但结果不能保证一定正常
- 如果输入的格式不能被解析，那么会返回NaN；