JavaScript之常见内置类 (九):认识包装类型、数字类型Number、数学类型Math、字符串类型String、数组Array使用详解、Date类型的使用

限量版甜甜圈

已于 2023-06-29 13:38:48 修改

阅读量278

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

于 2023-06-23 21:27:47 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/131262601

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

跳转目录🚀

篇章	知识点
JavaScript之邂逅 (一)	认识编程语言及其历史、JS的历史、JS的分类、JS运行引擎、JS应用场景
JavaScript之基本语法 (二)	JS的编写方式、noscript元素的使用、JS的注意事项、JS交互方式、JS语句和分号、JS注释方式
JavaScript之变量与数据类型 (三)	认识JavaScript变量、变量的定义和规范、数据类型和typeof、常见的数据类型、数据类型的转换
JavaScript之常见的运算符 (四)	运算符和运算元、算数运算符、赋值运算符、自增和自减、比较运算符、运算符优先级
JavaScript之分支语句与逻辑运算符 (五)	if分支语句、if分支语句、if…else if…else…语句、三元运算符、逻辑运算符、switch语句
JavaScript之循环语句 (六)	认识循环语句、while 循环、do……while 循环、 for 循环、 break与continue关键字
JavaScript之函数 (七)	认识JavaScript函数、函数的声明和调用、函数的递归调用、局部和全局变量、函数表达式的写法、立即执行函数使用
JavaScript对象 (八)	对象类型的使用、值类型和引用类型、函数的this指向、工厂方法创建对象、构造函数和类、new创建对象
JavaScript之常见内置类 (九)	认识包装类型、数字类型Number、数学类型Math、字符串类型String、数组Array使用详解、Date类型的使用

1. 原始类型的包装类型

1.1 认识包装类型

在之前我们经常会用下面的情况：

JavaScript的原始类型并非对象类型，所以从理论上来说，它们是没有办法获取属性或者调用方法的
原始类型是简单类型，默认并不能调用属性和方法

原因：因为JavaScript为了可以使其可以获取属性和调用方法，对其封装了对应的包装类型
常见的包装类型有： String、Number、Boolean、Symbol、BigInt类型

1.2 包装类型的使用过程

默认情况，当我们调用一个原始类型的属性或者方法时，会进行如下操作:
- 通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用
1. 根据原始值，创建一个原始类型对应的包装类型对象
2. 调用对应的属性或者方法，返回一个新的值
3. 创建的包装类对象被销毁

	var name = "Hello World"
    var height = 1.8888888
    
	// 该包装类中有很多类属性、类方法与实例方法
    // function String(str) {
    //   this.str = str
    //   this.length = 11
    //   this.split = function() {
    //   }
    // }

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

创建一个包装类的对象
1. 字面量创建
2. new 创建对象

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

使用内置API的概念

属性：可以直接通过 . 点运算符去访问的数据
类方法：可以直接通过内之类 .点运算符去调用的方法
实例方法：需要创建具体的实例对象，通过实例对象去调用的方法

1.3 包装类型 Number 类

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number

1.3.1 Number 属性

Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)
Number.MIN_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)；

	console.log(Number.MAX_SAFE_INTEGER) //9007199254740991
    console.log(Number.MIN_SAFE_INTEGER) //-9007199254740991

1.3.2 Number 实例方法

toString(base)：将数字转成字符串，并且按照base进制进行转化，base 的范围可以从 2 到 36，默认情况下是 10

// toString(base)
    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))

    // 数字直接调用时，需要使用 ..运算符 因为第一个.会被识别为小数点 即 123.  =》 123.0
    console.log(123..toString(2))

toFixed(digits)：格式化一个数字，保留digits位的小数，digits的范围是0到20（包含）之间

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

1.3.3 Number 类方法

Number.parseInt(string, radix)：将字符串解析成整数，也有对应的全局方法parseInt
Number.parseFloat(string)：将字符串解析成浮点数，也有对应的全局方法parseFloat

 	// 类的方法
    // parseInt
    // parseFloat
    // 整数: 123
    // 浮点数: 小数 123.321
    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))

其中 window上的parseInt或parseFloat方法和Number上所指的是同一个：

	// function HYNumber() {
    // }
    // HYNumber.parseInt2 = function() {
    // }
    // window.parseInt2 = HYNumber.parseInt2
    // console.log(window.parseInt2 === HYNumber.parseInt2)

    console.log(parseInt === Number.parseInt)

1.4 包装类型 String 类

在开发中，我们经常需要对字符串进行各种各样的操作，String类提供给了我们对应的属性和方法
MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

1.4.1 String 属性

length：获取字符串的长度

var message = "Hello World"
    // 1.属性: length
    console.log(message.length) //11

字符串的遍历：

for 循环

 // for普通遍历
    for (var i = 0; i < message.length; i++) {
      consol

for of 循环

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

1.4.2 String 实例方法

操作一：访问字符串的字符

方法访问 str.charAt(pos) ：返回对应索引的字符
通过字符串的索引 str[i]访问：返回对应索引的字符

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

区别：索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串

操作二：修改字符串

字符串的不可变形：字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的

toLowerCase()：将所有的字符转成小写，返回一个新字符串
toUpperCase()：将所有的字符转成大写，返回一个新字符串

操作三：查找字符串

indexOf(searchValue[,fromIndex]) :查找字符串位置,从fromIndex开始，查找searchValue的索引

情况一: 搜索到, 搜索字符串所在索引位置
情况二: 没有搜索到, 返回-1

  var message = "my name is why."
    var name = "why"
    var index = message.indexOf(name)
    console.log(index)// 11
    if (message.indexOf(name) !== -1) {
      console.log("message中包含name")
    } else {
      console.log("message不包含name")
    }

有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）

includes(searchString[,position]):是否包含字符串,从position位置开始查找searchString，根据情况返回 true 或 false。ES6新增的方法

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

startsWith(searchString[,position]): 是否以xxx开头（ES6新增方法）
- 从position位置开始，判断字符串是否以searchString开头；

	var message = "my name is why."
	if (message.startsWith("my")) {
	      console.log("message以my开头")
	  }

endsWith(searchString[,length]): 是否以xxx结尾（ES6新增方法）
- 在length长度内，判断字符串是否以searchString结尾；

	// 4.endsWith: 是否以xxx结束
	 var message = "my name is why."
    if (message.endsWith("why",14)) {
      console.log("message以why结尾")
    }

replace(regexp|substr,newSubStr|function)：查找到对应的字符串，并且使用新的字符串进行替代
- 可以输入字符串、正则表达式、函数

	// 5.replace 替换字符串
    var newMessage = message.replace("why", "kobe")
    console.log(message)
    console.log(newMessage)
    // var newName = "kobe"
    // var newMessage = message.replace("why", function () {
    //   return newName.toUpperCase()
    // })
    // console.log(newMessage)

操作四：获取子字符串

slice(start, end)推荐：返回从start索引到end（不含end）之间的字符串，没有end默认获取到最后，支持负数参数

var message = "Hello World"

    // 获取子字符串
    console.log(message.slice(3, 7)) //lo W
    console.log(message.slice(3, -2)) // llo Wor
    console.log(message.slice(3)) //llo World

substring(start, end)：与slice相同，参数负值代表0

console.log(message.substring(3, 7))//lo W
    console.log(message.substring(3, -2)) //负数默认为0
    console.log(message.substring(3))//llo World

substr(start, length)：从 start 开始获取长为 length 的字符串，允许 start 为负数

	// substr
    console.log(message.substr(-1, 7)) //d

操作七：分隔和拼接字符串

concat(str2,[,…strN])：拼接字符串

 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)

split([separator[,limit]])：字符串分割
- separator：以什么字符串进行分割，也可以是一个正则表达式，不写默认从将每个字符组成一个数组返回
- limit：限制返回片段的数量

 	var message = "abc cba nba mba"
    var items = message.split("-")
    var newMessage = items.join("*")
    console.log(newMessage)

操作八：清除首尾空字符串

trim()：删除首位空格

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

1.5 内置对象 Math 对象

Math是一个内置对象（不是一个构造函数）：它拥有一些数学常数属性和数学函数方法

1.5.1 Math对象常用的属性

Math.PI：圆周率约等于 3.14159

// Math对象的属性
    console.log(Math.PI) //3.141592653589793

1.5.2 Math对象常用的方法

Math.floor()：向下四舍五入取整
Math.ceil()：向上四舍五入取整
Math.round()：四舍五入取整

var num = 3.55
    console.log(Math.floor(num)) // 3
    console.log(Math.ceil(num)) // 4
    console.log(Math.round(num)) // 4

Math.random()：生产0~1的随机数 [0,1)

// random: 随机生成 [0, 1)
    console.log(Math.random())
    // [起始值,最大值]
    // 公式：Math.floor(Math.random()*(最大值-起始值+1)+起始值)
    // 需求: [5~50)的随机数
    // [a, b)
    // y = a
    // x = b - a
    // 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)：返回x的y次幂

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

2. 数组 Array 类

2.1 认识数组

数组 Array：数组是一种有序的集合，里面的元素按照某一个顺序来排列，这个有序的集合，通常使用索引来获取元素，我们把这样的结构称为数组 array。
数组的结构：数组是一个特殊的对象类型，包含数组集合，索引，元素组成，通常使用字面量 []的方式创建数组

 const arr=[]

在这里插入图片描述

数组的索引：数组元素从 0 开始编号（索引index），在JavaScript中并不支持用负数索引的写法

 // 3.通过索引访问元素
    console.log(names[0]) // 第一个元素
    console.log(names[names.length-1]) // 最后一个元素

2.2 数组的创建方式

通过字面量[ ]创建（更常用）

// 1.创建数组的方式
    var names = ["why", "kobe", "james", "curry"]

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

通过类创建实例：

// 2.创建方式二: 类Array
    var arr1 = new Array()
    var arr2 = new Array("abc", "cba", "nba") // ["abc", "cba", "nba"]
    console.log(arr1, arr2)

    // 传入了一个数字, 它默认会当成我们要创建一个对应长度的数组
    var arr3 = new Array(5) // [empty*5]
    console.log(arr3, arr3[0])
    var arr4 = [5]

2.3 数组的基本操作

2.3.1 访问数组元素

通过中括号 [] 访问
arr.at(i) 方法：支持负数索引的方式访问数组，对于 i 为负数的情况，它则从数组的尾部向前数

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

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

    console.log(names[-1]) //undefined
    console.log(names.at(-1)) //abc

2.3.2 修改数组元素

使用中括号 [] 访问对应数据，重新赋值：

// 修改数组中的元素
    names[0] = "why"
    console.log(names)

2.3.3 增加数组元素

通过中括号 [] 直接在对应索引位置添加

    names[3] = "kobe"
    names[10] = "james"
    console.log(names)

在这里插入图片描述

2.3.4 删除数组元素

delete 关键字：删除后的位置为空，不影响其它元素的索引

delete names[1]
    console.log(names)
    console.log(names[1])

在这里插入图片描述

2.4 数组添加删除的方法

以下五个方法均改变原数组
在这里插入图片描述

数组尾端：
1. push()：在数组末端添加元素，返回新的数组长度
2. pop()：在数组末端移除元素，返回被移除的元素

// 1.在数组的尾部添加和删除元素
    // // push方法
    console.log(names.push("why", "kobe")) //7
    console.log(names)
    // // pop方法
    // names.pop()
    console.log(names.pop()) //kobe
    console.log(names)

数组首端
1. shift：在数组队列首端移除一个元素，整个数组元素向前移动，返回被移除的元素
2. unshift：在数组队列首端添加一个元素，整个数组元素向后移动，返回数组的新长度

 var names = ["abc", "cba", "nba", "mba", "abcd"]
    // // 2.在数组的头部添加和删除元素
    // // unshift方法
    console.log(names.unshift("why", "kobe")) //7
    console.log(names)
    // // shift方法
    console.log(names.shift())
    // console.log(names)

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

数组任意位置：arr.splice(start[,deleteCount[,item1[,item2[,……]]]]) ，返回删除或替换的元素组成的数组
1. 删除元素：设置deleteCount删除的个数
2. 新增元素： deleteCount: 0时，后面可以添加新的元素，
3. 替换元素：设置start或deleteCount，后面添加items

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

    console.log(names)  //['abc', 'mba', 'abcd']
     // 3.2.新增元素
    // deleteCount: 0, 后面可以添加新的元素
    console.log(names.splice(1, 0, "why", "kobe")) //[]
    console.log(names)
    // 3.3.替换元素
    console.log(names.splice(1, 2, "why", "kobe", "james"))
    console.log(names)

2.5 数组的length属性

length属性 ：用于获取数组的长度。当我们修改数组的时候，length 属性会自动更新

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

    // 1.属性length
    // 获取数组的长度length
    console.log(names.length) // 4

length可写属性的应用：
1. 扩大数组：length属性可写的(扩容)，多余的空间为undefined
2. 截取数组：设置的length小于原来的元素个数
3. 清空数组：arr.length = 0

2.6 数组的遍历

普通for循环遍历

// 2.1. 普通的for循环
    for (var i = 0; i < names.length; i++) {
      console.log(names[i])
    }

for…in 遍历，获取到索引值

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

for…of 遍历，获取到索引值

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

2.7 数组的拼接和截取

以下方法不会修改原数组：

arr.slice() : 用于对数组进行截取（类似于字符串的slice方法）

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

    // 1.slice方法: 不会修改原数组
    // splice有区别: splice修改原有的数组
    // start 从什么位置开始
    // end 结束位置, 不包含end本身
    var newNames = names.slice(2, 4)
    console.log(newNames) //[ "nba", "mba"]

arr.concat()：返回一个新数组，其中包含来自于其他数组和其他项的值。

// 2.concat方法: 将多个数组拼接在一起
    var names1 = ["abc", "cba"]
    var names2 = ["nba", "mba"]
    var names3 = ["why", "kobe"]
    var newNames2 = names1.concat(names2, names3)
    console.log(newNames2) //['abc', 'cba', 'nba', 'mba', 'why', 'kobe']

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

// 3.join方法: 字符串split
    console.log(names.join("-")) //abc-cba-nba-mba-why-kobe

2.8 数组的查找

arr.indexof( )方法：该方法可以查找数组中某个元素的索引，如果没有找到返回-1，找到了返回对应元素的索引。也有对应的从最后位置开始查找的 lastIndexOf 方法

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

    var index = names.indexOf('cba')
    console.log(index) // 1
    var fuindex = names.lastIndexOf('mba',-1)
    console.log(fuindex) // 3

arr.includes( )方法：用于判断数组中是否包含某个元素

	var includesItem = names.includes('abc')
    var includesItem2 = names.includes('casd')
    console.log(includesItem,includesItem2) // true false

备注：以上两个方法中的数组存放的是原始类型，方法存在一定得局限性，如果我们数组中存放的是对象的话该怎么办呢

arr.find()或arr.findIndex()：直接查找元素或者元素的索引（ES6之后新增的语法）

var students = [
      {
        id: '001',
        name: "fsj",
        age: 18,
        height: 160,
        gender: 'male'
      },
      {
        id: '002',
        name: "abc",
        age: 18,
        height: 160,
        gender: 'male'
      },
      {
        id: '003',
        name: "wyt",
        age: 18,
        height: 160,
        gender: 'male'
      }
    ]
 // 查找的是id为001的学生
    var student = students.find(function (item,) {
      return item.id === '001'
    })
    console.log(student) //返回找到的对象
    var index = students.findIndex(function (item,) {
      return item.id === '001'
    })
    console.log(index) //返回符合条件的数组下标

使用for循环去查找会有点麻烦

扩展:手动实现高阶函数 arr.find()和arr.findIndex()

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

    // forEach函数: 可以帮助我遍历数组
    // for (var i = 0; i < names.length; i++) {
    //   console.log(names[i])
    // }

    // 1.hyForEach版本一(大部分同学掌握)
    function hyForEach(fn) {
      for (var i = 0; i < names.length; i++) {
        fn(names[i], i, names)
      }
    }

    hyForEach(function(item, index, names) {
      console.log("-------", item, index, names)
    })

    // 2.hyForEach版本二
    // function hyForEach(fn, arr) {
    //   for (var i = 0; i < arr.length; i++) {
    //     fn(arr[i], i, arr)
    //   }
    // }

    // hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // }, names)

    // hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // }, [123, 321, 111, 222])


    // 3.hyForEach版本三
    // names.hyForEach = function(fn) {
    //   for (var i = 0; i < this.length; i++) {
    //     fn(this[i], i, this)
    //   }
    // }

    // names.hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // })

    // names.forEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // })
    

    // 4.hyForEach版本四(了解)
    Array.prototype.hyForEach = function(fn, thisArgs) {
      for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
      }
    }

    // names.hyForEach(function(item, index, names) {
    //   console.log("------", item, index, names)
    // })

    // 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 }
    // ]

    // students.hyForEach(function(item, index, stus) {
    //   console.log("++++++", item, index, stus)
    // })

 // 1.原始类型的查找
    var names = ["abc", "cba", "nba", "mba"]

    // 原生find方法
    var findName = names.find(function(item, index, arr) {
      console.log(item, index, arr)
      return item === "nba"
    })
    console.log(findName)

    // 2.数组中对象类型的查找
    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 findStu = students.find(function(item) {
    //   return item.id === 101
    // })
    // console.log(findStu)

    // 3.自己实现hyFind(百分90以上的不要求)
    Array.prototype.hyFind = function(fn) {
      // var item = undefined
      for (var i = 0; i < this.length; i++) {
        var isFlag = fn(this[i], i, this)
        if (isFlag) {
          // item = this[i]
          // break
          return this[i]
        }
      }
      // return item
    }

    var findStu = students.hyFind(function(item, index, arr) {
      console.log(item)
      return item.id === 101
    })
    console.log(findStu)

2.9 数组的排序

学习数据结构与算法时，我们会编写自己的排序算法：冒泡排序、插入排序、选择排序、堆排序、希尔排序、快速排序等；

arr.sort()方法：也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组。

sort除了可以给数组中原始类型的数据排序,还可以给数组中为复杂类型数据进行排序
```
// 复杂类型的排序
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)
```
- 排序规则：默认时a-b，用结果决定，谁小谁在前。如果调换顺序，那就是结果负数时就是大，大的放后面，原本 20-4>0 4换前面去，调换后编程 4-20<0 这个结果在a-b时被理解为是 20<4 因此就是不换了。

arr.reverse()方法：将数组中元素的位置颠倒，并返回该数组

 // 排序
    const arr = [20, 4, 10, 15, 12, 55, 78]

    // 排序有很多算法： 冒泡/选择/插入/快速/希尔/堆排序

    // 数组的排序 sort() 的使用
    // sort也是高阶函数，可以用另外一个函数作为它的参数
    const newArr = arr.sort(function (item1, item2) {
      // 比较对应的规则 ：谁小谁在前面
      // item1 比较 item2 
      // item2-item1 就是本来结果负数时，4<20 
      // 角色互换一下之后，意思就是 4>20 
      return item1 - item2
    })
    // 获得升序数组
    console.log(newArr)
    // 可以直接通过 arr.reverse() 反转数组
    console.log(newArr.reverse())

2.10 数组的其他高阶方法

很多时候我们其实需要遍历数组，通过不同方法去返回一个不同的新数组，更多的时候数组中的数据存的是一个个的复杂类型数据。

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

 // forEach
    const arr = [20, 4, 10, 15, 12, 55, 78]
    const student = [
      {
        id: '001',
        name: 'fsj'
      }, {
        id: '002',
        name: 'fsj2'
      }, {
        id: '003',
        name: 'fsj3'
      },
    ]

    // 遍历数组
    arr.forEach(function (item, index, arr) {
      console.log(item, index, arr, this)
    }, { name: 'xxx' })


    student.forEach((item, index, arr) => {
      console.log(item.id, item, name, index, arr)
    })

arr.filter( )方法：主要是过滤的作用，filter()方法创建了一个新数组，新数组只包含每个元素调用函数返回为true的元素。

// 过滤数组
    const filterArr = arr.filter(function (item, index, arr) {
      // 将值大于10的数组元素添加到新数组返回
      return item > 10
    })
    console.log(filterArr)

arr.map( )方法：映射数组，map()方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，他们是一一对应的关系，因此被称为映射。

 // 映射数组
    const mapArr = arr.map(function (item, index, arr) {
      return item ** 2
    })

    console.log(mapArr) // [400, 16, 100, 225, 144, 3025, 6084]

arr.reduce( )方法:用于计算数组中所有元素的总和，对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值，如果没有设置initialValue会跳过第一次执行

var nums = [11, 20, 30, 40, 50, 60]
    // for循环实现累加
    var result = 0
    for (let i = 0; i < nums.length; i++) {
      result += nums[i]
    }
    console.log(result) //211

    // reduce 累加数组
    // arr.reduce(function(prevValue,item){},initialValue)
    // 第一次 prevValue ==> 0  item ==> 11
    // 第二次 prevValue ==> 0+11  item ==> 20
    // 第二次 prevValue ==> 0+11+20  item ==> 30
    var result = nums.reduce(function (prevValue, item) {
      return prevValue + item
    }, 0)
    console.log(result) //211
	var products = [
	      { name: "鼠标", price: 88, count: 3 },
	      { name: "耳机", price: 88, count: 2 },
	      { name: "电脑", price: 88, count: 10 }
	    ]
	
	    // 计算所有的总价格
	    var result = products.reduce(function (prevValue, item) {
	      return prevValue + (item.price * item.count)
	    }, 0)
	
	    console.log(result) //1320

综合案例

  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    // 拿到数组中所有偶数的平方和
    var result = nums.filter(item => item % 2 === 0)
				     .map(item => item ** 2)
				     .reduce((pre, item) => pre + item, 0)
    console.log(result)

3. 时间 Date 类

3.1 创建Date对象

在JavaScript中我们使用Date来表示和处理时间，创建一个对象有以下几种常用方式：

 //  创建Date 对象的方式
    // 1.没有传入任何的参数，获取到当前时间
    var date1 = new Date()
    console.log(date1)
    // 2. 传入参数：时间字符串
    var date2 = new Date("2023-10-30")
    console.log(date2)
    // 3. 传入具体的年月日时分秒毫秒
    var date3 = new Date(2023, 5, 15, 13, 45, 27, 3000)
    console.log(date3)
    // 4. 传入一个Unix时间戳
    var date4 = new Date(1688010190388)
    console.log(date4)
  // 1s===1000ms

3.2 Date对象的字符串形式dateString

日期的表示方式有两种：RFC 2822 标准 或者 ISO 8601 标准，其中默认打印的时间格式是 RFC 2822 标准的，也可以将其转化成ISO 8601标准
1. RFC 2822 标准：星期月份日期年份小时: 分钟:秒 GMT+时差
2. ISO 8601 标准：年份 - 月份 - 日期T小时:分钟:秒.毫秒Z

3.3 Date获取和设置时间信息

我们可以从Date对象中获取各种详细的信息，有如下方法：
1. getFullYear()：获取年份（4 位数）；
2. getMonth()：获取月份，从 0 到 11
3. getDate()：获取当月的具体日期，从 1 到 31（方法名字有点迷）
4. getDay()：获取一周中的第几天，从 0（星期日）到 6（星期六）；
5. getHours()：获取小时
6. getMinutes()：获取分钟
7. getSeconds()：获取秒钟
8. getMilliseconds()：获取毫秒
Date也有对应的设置方法，我们可以设置超范围的数值，它会自动校准。：
1. setFullYear(year, [month], [date])
2. setMonth(month, [date])
3. setDate(date)
4. setHours(hour, [min], [sec], [ms])
5. setMinutes(min, [sec], [ms])
6. setSeconds(sec, [ms])
7. setMilliseconds(ms)
8. setTime(milliseconds)

 var date = new Date()
    function getTime() {
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()

      var hours = date.getHours()
      var minutes = date.getMinutes()
      var second = date.getSeconds()
      var milliSecond = date.getMilliseconds()
      console.log(`${year}/${month}/${day} ${hours}:${minutes}:${second}.${milliSecond}`)
    }

    getTime()
    //2023/6/29 12:55:41.807

    // 修改data对象的时间
    date.setFullYear(2033)
    date.setHours(25) //超出标准会自动修正
    getTime()
    //2033/6/30 1:55:41.807

3.4 Date获取Unix时间戳

Unix时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数
获取时间戳的方法
1. 实例方法 date.getTime( )
2. 实例方法 date.valueOf( )
3. 隐式转换 +new Date()
4. 类方法 Date.now()

  //方案:
    var date1 = new Date().getTime()
    var date2 = new Date().valueOf()
    var date3 = 1 * new Date()
    var date4 = new Date() / 1
    var date5 = +new Date()
    var date6 = Date.now()

    console.log(date1)
    console.log(date2)
    console.log(date3)
    console.log(date4)
    console.log(date5)
    console.log(date6)

娱乐：可以通过时间戳来测试电脑性能

var startTime = Date.now()
    for (var i = 0; i < 1000; i++) {
      console.log(i)
    }
    var endTime = Date.now()
    document.write(endTime - startTime)

3.5 字符串转换成时间戳

new Date(timeStr).getTime()

 // 字符串转换时间戳
    var timeStr = "2024-10-20"

    var time = new Date(timeStr).getTime()
    console.log(time) //1729382400000

Date.parse(str) 方法：可以从一个字符串中读取日期，并且输出对应的Unix时间戳，需要是时间标准格式的字符串，否则可能会不能解析，返回NaN

 var time = Date.parse(timeStr)
    console.log(time) //1729382400000

补充：这里讲了如何将字符串转换成时间戳，后续还有高级的方法，可以封装一个函数来通过时间戳来自定义时间的格式。

限量版甜甜圈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之常见内置类 (九):认识包装类型、数字类型Number、数学类型Math、字符串类型String、数组Array使用详解、Date类型的使用

在之前我们经常会用下面的情况：JavaScript的原始类型并非对象类型，所以从理论上来说，它们是没有办法获取属性或者调用方法的原始类型是简单类型，默认并不能调用属性和方法因为JavaScript为了可以String、Number、Boolean、Symbol、BigInt类型。
复制链接

扫一扫