S03-04 JS-基础-内置类
[TOC]
内置类
包装类型
原始类型的包装类
奇怪的现象:原始类型调用属性和方法
JS 的原始类型并非对象类型,所以从理论上来说,它们是没有办法获取属性或者调用方法的。
但是,在开发中会看到,我们会经常这样操作:
问题:原始类型是简单的值,默认并不能调用属性和方法;
原因:这是因为 JS 为了可以使其可以获取属性和调用方法,对其封装了对应的包装类型;
常见的包装类型:
- String、Number、Boolean、Symbol、BigInt
注意:
- null、undefined 没有任何的方法,也没有对应的“对象包装类”;
包装类型的使用过程
包装类型的工作原理:
当尝试访问原始值的属性或方法时,JavaScript 引擎会执行以下步骤:
- 创建临时包装对象:根据原始值,创建一个原始类型对应的包装类型对象。
- 访问属性/方法:调用对应的属性或者方法,返回一个新的值。
- 销毁临时对象:创建的包装类对象被销毁。
- 优化:通常JavaScript引擎会进行很多的优化,它可以跳过创建包装类的过程,在内部直接完成属性的获取或者方法的调用。
自定义包装类:
手动创建包装类对象:
name1是字面量(literal)的创建方式,name2是new创建对象的方式;
Number
概述
Number:是原始数值的包装对象,提供了丰富的属性和方法为数字操作提供了强大的功能支持。
API-Number
数字常量
Number.MAX_VALUE:
1.7976931348623157e+308
,JS 能表示的最大正数。Number.MIN_VALUE:
5e-324
,JS 能表示的最小正数(最接近0的值)。Number.MAX_SAFE_INTEGER:
9007199254740991
,最大安全整数(2⁵³ - 1)。Number.MIN_SAFE_INTEGER:
-9007199254740991
,最小安全整数。
静态方法
- Number.parseInt():
(string, radix?)
,ES2015,用于将字符串转换为整数的核心方法。是全局parseInt()
函数的标准化版本。ES6 将其添加到 Number 对象中,以提高代码的模块化和可读性。 - Number.parseFloat():
(str)
,ES2015,用于将字符串转换为浮点数的标准方法,是全局parseFloat()
函数的标准化版本。ES6 将其添加到 Number 对象中,以提高代码的模块化和一致性。 - Number.isFinite():
(value)
,ES2015,用于精确检测有限数值的方法。替代全局isFinite()
。 - Number.isInteger():
(value)
,ES2015,用于检测一个值是否为整数的方法。 - Number.isNaN():
(value)
,ES2015,用于精确检测 NaN(Not-a-Number)值的方法。
方法
number.toString():
(radix?)
,用于将数字转换为字符串的核心方法。它提供了不同进制的转换和格式化选项。number.toFixed():
(digits?)
,用于数字格式化的核心方法,它将数字转换为字符串表示,并保留指定的小数位数。
Math
概述
Math:是 JavaScript 内置的数学对象(不是构造函数),提供了丰富的数学常数和函数,用于执行各种数学运算。它是静态对象,不需要创建实例,所有属性和方法都直接通过 Math
调用。
API-Math
数学常量
- Math.PI:
≈3.141592653589793
,只读,表示数学常数 圆周率 π 的近似值(约3.14159
)。
随机数
- Math.random():
()
,用于生成一个 [0, 1) 区间(包含 0 但不包含 1)的伪随机浮点数。
取整
Math.floor():
(x)
,用于将数字向下取整(向负无穷方向取整)。Math.ceil():
(x)
,用于将数字向上取整(向正无穷方向取整)。Math.round():
(x)
,用于执行四舍五入取整操作。Math.trunc():
(x)
,ES2015,用于直接去除数字的小数部分,返回该数字的整数部分(无论正负)。
最值与绝对值
Math.min():
(value1, value2, ..., valueN)
,用于返回一组数字中的最小值。Math.max():
(value1, value2, ..., valueN)
,用于返回一组数字中的最大值。Math.abs():
(x)
,用于返回一个数字的绝对值(即该数字的非负形式)。
指数运算
- Math.pow():
(base, exponent)
,用于计算一个数的指定次幂(即 baseexponentbaseexponent)。支持正负基数、分数指数和特殊值处理。
String
基本使用
String:是 JS 的核心内置类,提供丰富的文本操作功能。所有字符串方法都不改变原字符串(字符串不可变),而是返回新字符串。
访问字符串的方式:
访问字符串可以有以下2种方式,它们的区别是:
str[0]
:没有找到会返回undefined
。str.charAt(pos)
:没有找到会返回空字符串""
。
字符串的遍历:
遍历字符串有以下2种方式:
方式一:for循环
方式二:for..of遍历
API-String
字符访问
- string.charAt():
(index)
,用于获取指定索引位置的字符。 - string.charCodeAt():
(index?)
,用于获取指定索引位置字符的 UTF-16 编码值。 - string.at():
(index?)
,ES2022,用于获取指定索引位置的字符,支持正负索引访问。
字符串查找
- string.indexOf():
(searchString,position?)
,区分大小写,用于查找子字符串首次出现的索引位置。从左向右进行,返回基于 0 的索引值。 - string.lastIndexOf():
(searchString,position?)
,区分大小写,用于查找子字符串最后一次出现的索引位置。搜索从字符串末尾向开头进行(从右向左),返回基于 0 的索引值。 - string.includes():
(searchString, position?)
,ES2015,区分大小写,用于判断一个字符串是否包含在另一个字符串中。 - string.startsWith():
(searchString, position?)
,ES2015,区分大小写,用于判断字符串是否以指定的子字符串开头。 - string.endsWith():
(searchString, length?)
,ES2015,区分大小写,用于判断字符串是否以指定的子字符串结尾。
字符串截取
- string.slice():
(startIndex, endIndex?)
,用于提取字符串的指定部分并返回新字符串。支持负索引,不自动交换参数,返回新字符串。 - string.substring():
(startIndex, endIndex?)
,用于提取两个指定索引之间的字符并返回新字符串。不支持负索引,自动参数交换,返回新字符串。 - string.substr():
(startIndex, length?)
,已废弃,用于从指定位置开始提取指定长度的子字符串。支持负索引,返回新字符串。
字符串修改
- string.toUpperCase():
()
,用于将字符串中所有字符转换为大写形式。返回新字符串,支持 Unicode 和多语言字符转换。 - string.toLowerCase():
()
,用于将字符串中所有字符转换为小写形式。返回新字符串,支持 Unicode 和多语言字符转换。 - string.concat():
(str1, str2, ..., strN)
,用于将多个字符串连接成一个新字符串。返回新字符串,功能与+
操作符相似,支持链式调用。 - string.repeat():
(count)
,ES2015,用于将字符串重复指定次数后返回新字符串。返回新字符串。 - string.trim():
()
,ES2015,用于移除字符串两端的空白字符(包括空格、制表符
\t\v
、换行符\n
等)。返回新字符串。 - string.trimStart():
()
,ES2019,用于移除字符串开头的空白字符(包括空格、制表符、换行符等)。返回新字符串,别名trimLeft()
。 - string.trimEnd():
()
,ES2019,用于移除字符串结尾的空白字符(包括空格、制表符、换行符等)。返回新字符串,别名trimRight()
。 - string.padStart():
(targetLength, padString?)
,ES2017,用于在字符串开头填充指定字符直到字符串达到目标长度。返回新字符串。 - string.padEnd():
(targetLength, padString?)
,ES2017,用于在字符串结尾填充指定字符直到字符串达到目标长度。返回新字符串。
正则表达式相关
- string.match():
(regexp)
,支持正则,用于检索字符串中与正则表达式匹配的结果。 - string.matchAll():
(regexp)
,ES2020,支持正则,必须包含g
,用于返回包含所有匹配正则表达式的结果及分组捕获组的迭代器。 - string.search():
(regexp)
,支持正则,用于检索字符串中匹配正则表达式的第一个位置。与indexOf()
类似但支持正则表达式。 - string.replace():
(searchValue, replaceValue)
,支持正则,用于替换字符串中匹配的子串。返回新字符串,支持字符串替换和正则表达式替换,并允许使用函数进行高级处理。 - string.replaceAll():
(searchValue, replaceValue)
,ES2021,支持正则,用于全局替换字符串中所有匹配的子串。无需正则表达式即可实现全量替换。 - string.split():
(separator?, limit?)
,支持正则,用于将字符串分割为子字符串数组。支持限制返回数组长度。
其他
- string.localeCompare():
(compareString,locales?,options?)
,用于根据当前语言环境比较两个字符串的排序顺序。提供本地化的字符串排序能力,支持多语言排序规则(如德语、中文等)。 - string.normalize():
(form?)
,ES2015,用于将字符串转换为 Unicode 标准化形式。它解决字符的多种表示方式问题(如组合字符 vs 预组合字符)。
修改字符串
字符串的不可变性:
- 字符串在定义后是不可以修改的,所以下面的操作是没有任何意义的;
所以,在我们改变很多字符串的操作中,都是生成了一个新的字符串;
- 比如改变字符串大小的两个方法
- toLowerCase():将所有的字符转成小写;
- toUpperCase() :将所有的字符转成大写;
查找字符串
在开发中我们经常会在一个字符串中查找或者获取另外一个字符串,String提供了如下方法:
方法一:查找字符串位置
- 从fromIndex开始,查找searchValue的索引;
- 如果没有找到,那么返回-1;
- 有一个相似的方法,叫lastIndexOf,从最后开始查找(用的较少)
方法二:是否包含字符串
- 从position位置开始查找searchString, 根据情况返回 true 或 false
- 这是ES6新增的方法;
开头和结尾
方法三:以xxx开头
- 从position位置开始,判断字符串是否以searchString开头;
- 这是ES6新增的方法,下面的方法也一样;
方法四:以xxx结尾
- 在length长度内,判断字符串是否以searchString结尾;
方法五:替换字符串
- 查找到对应的字符串,并且使用新的字符串进行替代;
- 这里也可以传入一个正则表达式来查找,也可以传入一个函数来替换;
获取子字符串
方法八:获取子字符串
开发中推荐使用slice方法。
其他方法
方法六:拼接字符串
方法七:删除首位空格
方法九:字符串分割
- separator:以什么字符串进行分割,也可以是一个正则表达式;
- limit:限制返回片段的数量;
更多的字符串的补充内容,可以查看MDN的文档:
Array
概述
什么是数组(Array)呢?
- 对象允许存储键值集合,但是在某些情况下使用键值对来访问并不方便;
- 比如说一系列的商品、用户、英雄,包括HTML元素,我们如何将它们存储在一起呢?
- 这个时候我们需要一种有序的集合,里面的元素是按照某一个顺序来排列的;
- 这个有序的集合,我们可以通过索引来获取到它;
- 这个结构就是数组(Array);
数组和对象都是一种保存多个数据的数据结构,在后续的数据结构中我们还会学习其他结构;
我们可以通过[]来创建一个数组:
- 数组是一种特殊的对象类型;
数组的创建方式
创建一个数组有两种语法:
下面的方法是在创建一个数组时,设置数组的长度(很少用)
数组元素从 0 开始编号(索引index)。
- 一些编程语言允许我们使用负数索引来实现这一点,例如 fruits[-1]
- JavaScript并不支持这种写法;
我们先来学习一下数组的基本操作:
- 访问数组中的元素;
- 修改数组中的元素;
- 增加数组中的元素;
- 删除数组中的元素;
数组的基本操作
访问数组中的元素:
- 通过中括号[]访问
- arr.at(i): ✓ 如果 i >= 0,则与 arr[i] 完全相同。 ✓ 对于 i 为负数的情况,它则从数组的尾部向前数。
修改数组中的元素
删除和添加元素虽然也可以通过索引来直接操作,但是开发中很少这样操作。
API-Array
数组的添加、删除方法
在数组的尾端添加或删除元素:
- push 在末端添加元素
- pop 从末端取出一个元素
在数组的首端添加或删除元素
- shift 取出队列首端的一个元素,整个数组元素向前前移动;
- unshift 在首端添加元素,整个其他数组元素向后移动;
push/pop 方法运行的比较快,而 shift/unshift 比较慢。
如果我们希望在中间某个位置添加或者删除元素应该如何操作呢?
arr.splice 方法可以说是处理数组的利器,它可以做所有事情:添加,删除和替换元素。
arr.splice的语法结构如下:
- 从start位置开始,处理数组中的元素;
- deleteCount:要删除元素的个数,如果为0或者负数表示不删除;
- item1, item2, ...:在添加元素时,需要添加的元素;
注意:这个方法会修改原数组
length属性
length属性用于获取数组的长度:
- 当我们修改数组的时候,length 属性会自动更新。
length 属性的另一个有意思的点是它是可写的。
- 如果我们手动增加一个大于默认length的数值,那么会增加数组的长度。
- 但是如果我们减少它,数组就会被截断。
所以,清空数组最简单的方法就是:arr.length = 0;。
数组的遍历
普通for循环遍历:
for..in 遍历,获取到索引值:
for..of 遍历,获取到每一个元素:
数组方法 – slice、cancat、 join
arr.slice 方法:用于对数组进行截取(类似于字符串的slice方法)。
- 包含bigin元素,但是不包含end元素;
arr.concat方法:创建一个新数组,其中包含来自于其他数组和其他项的值。
arr.join方法: 将一个数组的所有元素连接成一个字符串并返回这个字符串。
数组方法 – 查找元素
arr.indexOf方法: 查找某个元素的索引
- 从fromIndex开始查找,如果找到返回对应的索引,没有找到返回-1;
- 也有对应的从最后位置开始查找的 lastIndexOf 方法
arr.includes方法:判断数组是否包含某个元素
- 从索引 from 开始搜索 item,如果找到则返回 true(如果没找到,则返回 false)。
find 和 findIndex 直接查找元素或者元素的索引(ES6之后新增的语法)
数组的排序 – sort/reverse
sort方法也是一个高阶函数,用于对数组进行排序,并且生成一个排序后的新数组:
- 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 前面;
- 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变;
- 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 前面;
- 也就是说,谁小谁排在前面;
等到后续讲解数据结构与算法时,我们会编写自己的排序算法:
- 冒泡排序、插入排序、选择排序、堆排序、希尔排序、快速排序等;
reverse() 方法将数组中元素的位置颠倒,并返回该数组。
数组的其他高阶方法
arr.forEach
- 遍历数组,并且让数组中每一个元素都执行一次对应的方法;
arr.map
- map() 方法创建一个新数组;
- 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成;
arr.filter
- filter() 方法创建一个新数组;
- 新数组中只包含每个元素调用函数返回为true的元素;
arr.reduce
- 用于计算数组中所有元素的总和;
- 对数组中的每个元素按序执行一个由您提供的 reducer 函数;
- 每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值;
Date
Date:对象用于处理日期和时间。
API-Date
时间的表示方式
关于《时间》,有很多话题可以讨论:
- 比如物理学有《时间简史:从大爆炸到黑洞》,讲述的是关于宇宙的起源、命运;
- 比如文学上有《记念刘和珍君》:时间永是流驶,街市依旧太平;
- 比如音乐上有《时间都去哪儿了》:时间都去哪儿了,还没好好感受年轻就老了;
我们先来了解一下时间表示的基本概念:
最初,人们是通过观察太阳的位置来决定时间的,但是这种方式有一个最大的弊端就是不同区域位置大家使用的时间是不一致的。
- 相互之间没有办法通过一个统一的时间来沟通、交流。
之后,人们开始制定的标准时间是英国伦敦的皇家格林威治( Greenwich )天文台的标准时间(刚好在本初子午线经过的地方),这个时 间也称之为GMT(Greenwich Mean Time)。
- 其他时区根据标准时间来确定自己的时间,往东的时区(GMT+hh:mm),往西的时区(GMT+hh:mm);
但是,根据公转有一定的误差,也会造成GMT的时间会造成一定的误差,于是就提出了根据原子钟计算的标准时间UTC(Coordinated Universal Time)
目前GMT依然在使用,主要表示的是某个时区中的时间,而UTC是标准的时间。
时区对比图
创建Date对象
在JavaScript中我们使用Date来表示和处理时间。
- Date的构造函数有如下用法:
这个格式是什么意思意思呢?
dateString时间的表示方式
日期的表示方式有两种:RFC 2822 标准 或者 ISO 8601 标准。
默认打印的时间格式是RFC 2822标准的:
我们也可以将其转化成ISO 8601标准的:
- YYYY:年份,0000 ~ 9999
- MM:月份,01 ~ 12
- DD:日,01 ~ 31
- T:分隔日期和时间,没有特殊含义,可以省略
- HH:小时,00 ~ 24
- mm:分钟,00 ~ 59
- ss:秒,00 ~ 59
- .sss:毫秒
- Z:时区
Date获取信息的方法
我们可以从Date对象中获取各种详细的信息:
- getFullYear():获取年份(4 位数);
- getMonth():获取月份,从 0 到 11;
- getDate():获取当月的具体日期,从 1 到 31(方法名字有点迷);
- getHours():获取小时;
- getMinutes():获取分钟;
- getSeconds():获取秒钟;
- getMilliseconds():获取毫秒;
获取某周中的星期几:
- getDay():获取一周中的第几天,从 0(星期日)到 6(星期六);
Date设置信息的方法
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()
- 方式二: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;