JS内置对象- 前端之路 -数学对象-时间对象-数组对象-字符串对象
JS 中 提供 了17种内置对象 可以 让我们直接去调用以便我们实现不同的功能
这里详细介绍四种 对象 也是最为常见的几种
分别是 Math对象 时间对象 数组对象 以及 字符串 对象
其中 数组对象 内容 最多 也是比较重要
还有一些 排序 算法 的 使用 都 相应的 配上了代码
还有就是这些也都是一名 学习中的 学生 笔记 记录
如果有那些知识点 有 歧义 尽可以 私信我 指点 一下
感谢
文章目录
-
- Math对象
- 时间对象
-
- 插件 monent
- 字符串对象
-
- 字符串的创建
- 常用方法
- 大小写转换
- 去除两端空格
- 字符串的替换
- 字符串的切割
- 数组对象
-
- 数组的添加以及删除
- splice 添加删除
- 数组去重
- 排序
-
- 选择排序：
- 冒泡排序：
- 内置方法进行排序
- 中文排序
- 快速排序(二叉排序)
- join 拼接
- concat拼接数组
- reverse转换数组
- indexOf 从前往后查找指定内容的索引
- slice截取数组的方法
- 数组的迭代方法
-
- every
- some
- filter 过滤器
- map
- forEach
- 写给看到最后的你
Math对象
- js 的 内置对象 提供一些基础的数学问题
- 常用方法
| 方法 | 含义 |
|---|---|
| Math.floor(数字) | 舍弃小数位 |
| Math.ceil(数字) | 小数位向整数取整 进位 |
| Math.max(数字1,数字2,数字3) | 取最大值 |
| Math.min(数字1,数字2,数字3) | 取最小值 |
| Math.round(数字) | 四舍五入 |
| Math.pow(x,y) | 成方 x的y 次方 |
| Math.sqrt(x) | 开方 就是 只能开平方 n 的开根号 |
| Math.random | 获取 [0-1) 的随机数 看 0.1 |
| Math.abs | 绝对值 可以 隐式转换Math.abs(“123”) == 123 |
- 0.1
取 0-100 的随机数
Math.random()*100;
取 100-300 的随机数
console.log(Math.random) * 200 +100;
// 随机数 * (终点-起点) + 起点
时间对象
- 定义：时间对象也是js中的内置对象主要用来操作时间
- 创建：
new Date()当前时间
| 方法 | 含义 |
|---|---|
| getFullYear()/setFullYear() | 获取和设置年份 |
| getMonth()/setMonth() | 获取设置月份 注意获取月份呢得到的是0-11 需要+1 |
| getDate()/setDate() | 设置和获取日期 |
| getDay() | 获取周几 只能获取不能设置 得到是的是一个数字 0-6 0是周 |
| getHours()/setHours() | 获取设置小时 |
| getMinutes()/setMinutes() | 获取设置分钟数 |
| getSeconds()/setSeconds() | 获取设置秒数 |
| getTime()/setTime() | 获取和设置时间戳 当前时间 - 1970.1.1 0:0:0 单位是ms |
| Date.parse(时间格式的字符串) | 字符串转换时间戳 |
- 特定格式时间 -通用时间:
| 方法 | 含义 |
|---|---|
| 显示全部时间 | date.toString() |
| 显示日期 | date.toDateString() 年月日 |
| 显示时间 | data.toTimeString()时分秒 时区 |
- 特定格式时间 -本地时间
| 方法 | 含义 |
|---|---|
| 显示全部时间 | date.toLocaleString() 本地时间字符串 |
| 显示日期 | date.toLocaleDateString() 年月日 |
| 显示时间 | data.toLocaleTimeString()时分秒 时区 |
-
创建制定时间的方法
var oDate = new Date(2020,11,12,0,0,0)
年,月,日,时,分,秒 注意月份 0-11var oDate = new Date("2020,12,12,0:0:0")
“年,月,日,时:分:秒”
-
距离双11 倒计时
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p>p>
<script>
var p = document.getElementsByTagName("p")[0];
// 创建目标时间
var date = new Date("2020,11,11,00:00:00");
var daojishi = setInterval(function () {
// 获取当前时间
var current = new Date();
var cha = parseInt((date - current) / 1000)
// 获取的是 毫秒数 / 1000 就是秒数
var d = Math.floor(cha / 3600 / 24);
// 秒数 / 3600一天的秒数 / 24 小时 == 天数
var h = Math.floor(cha / 3600 % 24);
var m = Math.floor(cha / 60 % 60);
var s = parseInt(cha % 60);
p.innerHTML = d + "天" + h + "小时" + m + "分钟" + s + "秒";
}, 1000)
script>
body>
html>
插件 monent
文档
-
创建当前时间对象：moment()
-
创建指定时间对象：moment(“YYYY-MM-DD HH:mm:ss”);
-
moment(原生时间对象) 创建指定时间对象
-
monent(指定时间戳) 创建指定时间对象
-
格式化format
<script src="../../moment.js"></script>
<script>
var date = moment()
console.log(date.format())
</script>
2020-09-15T14:33:38+08:00
- 取值赋值
| 方法 | 含义 |
|---|---|
| year() | 年份 |
| month() | 月份 0-11 月 |
| date() | 天 |
| day() | 周几 0-6 0 代表 周日 |
| week() | 获取当前是本年的第几周 |
| daysInMonth() | 获取当前月份 有多少天 |
| dayOfYear() | 获取当前日期是今年的第几天 |
| get(“year”) | 获取当前 可以是 year month date hour minute second millisecond |
| set(“year”,2020) | 获取当前 可以是 year month date hour minute second millisecond 后面的参数 是 要设置的 日子 月 0-11 |
- 查询(文档中查询)用于比较
| 方法 | 含义 |
|---|---|
| isBefore(“2020-01-01”) | 是否早于2020-01-01 晚于 flase 早于 true 特殊用法：moment.isBefore("2020-01-01","year")只比较年份 |
| isAfter() | 用法同上 是否晚与 |
| isBetween() | 判是否在两个值之间moment.isBefore("2020-01-01","2020-11-11") 成立true |
| isLeapYear | 判断是不是润年 整/4 不能整/100 |
| isSname | 判断两个时间是否完全相同 |
字符串对象
字符串的创建
- var str = “XXX”
- var str = String(“XXX”)
- var str = new String(“XXX”)
这种方式创建出来的是字符串对象
常用方法
- length:长度
- charAt:索引 获取 制定索引的内容
- indexOf():
用法1:字符串.indexOf(字符/字符片段) 查找 指定字符字符片段 的 索引 返回 没有返回 -1 如果存在多个 之取第一个
用法2: 字符串.indexOf(字符/字符片段,索引开始位置)
-
lastIndexOf()
用法跟indexOf一致;
从字符串尾部向头部查找
索引还是从头到尾部 -
字符串比较大小
按照字符串中的unicode 编码 进行比较
如果前一位已经比出大小 后面的就不比较了
小写大于大写字母
字母大于数字 -
截取字符串slice
用法：字符串.slice(起点,结束点)
可以截取起始不截取终点
用法：字符串.slice(起点)
从开始位置 到结尾 -
截取字符串substring()
用法：字符串.substring(起点,结束点)
可以截取起始不截取终点
用法：字符串.substring(起点)
从开始位置 到结尾 -
slice 以及 substring 的区别
- 前者在参数顺序颠倒的时候截取失败
- 后者在参数顺序颠倒的时候会截取成功自动调整顺序
- 前者参数传入负数 给负数加length 要是 > 0 就按照正常顺序计算 如果结果<0 那就直接 将负数参数转换成0
- 后者 直接转换成 0
-
截取字符串substr()
用法：字符串.substr(起点,要截取的位数)
大小写转换
- 英文转大写:
字符串.toUpperCase() - 英文转小写:
字符串.toLowerCase()
去除两端空格
字符串.trim();
字符串的替换
字符串.replace(要被替换的字符片段，用来替换的字符片段)- 只能替换第一个 后面不的替换
- 生成的是一个新的字符串并不是 在原字符串上进行更改
字符串的切割
split("标识")
从开头查找到结尾 遇到指定的标识后 进行切割 然后 存入一个数组split("标识",数组长度)
数组长度为指定长度split()根据默认标识进行切割
数组对象
- 定义：操作数组的基础方法
- 创建方式：
| 方法 |
|---|
var arr = []; |
var arr = Array(1,2,32); |
var arr = new Arrar(1,2,3); |
数组的添加以及删除
-
在数组末尾添加
数组.push(数组项1,数组项2)- 返回值就是追加之后的数组长度
-
在数组的末尾删除最后一个
数组.pop()- 返回值就是被删的数组项
-
在数组开头添加
数组.unshift(数组项1,数组项2)- 返回值就是追加之后的数组长度
-
在数组的开头删除第0项
数组.shift()- 返回值就是被删的数组项
splice 添加删除
-
删除数组项
数组.splice(删除的起始位置索引,要删除的字符数)- 这里可以写负从后往前
- 返回值是被删除的数组项 组成一个新的数组
-
替换数组项
数组.splice(删除的起始位置索引,要删除的字符数,用来替换的数组项1，用来替换的数组项2)- 删除两项 替换三项 也是可以的
- 返回值是被删除的数组项 组成一个新的数组
-
添加数组项
数组.splice(删除的起始位置索引,0,用来添加的数组项1，用来添加的数组项2)- 添加在起始位置的前面
- 返回值为空
数组去重
- 思路：利用循环 第一个数 跟所有的数 进行 匹配 匹配上了就进行删除
<script>
var arr = [3, 1, 2, 3, 4, 5, 3, 3, 3, 4];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1)
j--;
// j-- 的意思就是 有并排的相同数据的时候删除第一个相同的之后下标并没有变 ，就会导致 跳过下一个 相同的
}
}
}
console.log(arr)
</script>
排序
选择排序：
<script>
// 选择排序的思路
// 第一个数字 跟后面的所有数字进行比较
// 如果发现 有比自己小的就换位置
var num = [90,8,3,4,6,800]
for(var i = 0;i<num.length;i++){
for(var j = i+1;j<num.length;j++){
if(num[i] > num[j]){
var a;
a = num[i];
num[i] = num[j]
num[j] = a;
}
}
}
console.log(num)
</script>
冒泡排序：
<script>
// 冒泡排序思路
// 比较相邻的两个元素 如果前面的比后面的大 就交换位置 两两 比较
// 冒泡跟选择排序的区别
// 冒泡是比较相邻的两个数 ， 大数放在后面 然后 大数在跟相邻的 数比较 一趟下来 最大的 数 就已经 到了最后面
// 然后开始 第二趟 因为最大的数字 已经排到了最后 所以不用比较； 经过实际比较发现 -i 内层循环 将近 是 不加 -i 的 一半
var num = [90,8,3,4,6,800,90,8,3,4,6,800,2,90,8,3,4,6,800,90,8,3,4,6,800,2];
for(var i =0;i<num.length-1;i++){
for(var j = 0;j<num.length -1-i ;j++){
if(num[j] > num[j+1]){
var a;
a = num[j];
num[j] = num[j+1];
num[j+1] = a;
}
}
}
console.log(num)
</script>
内置方法进行排序
-
sort方法
-
用法：1
作用：把数组进行排序 按照unicode编码进行排序（默认的方法） -
用法：2
数组.sort(function(形式参数1,形式参数2){ return 形式参数1 - 形式参数2 <!-- 从小到大 --> return 形式参数2 - 形式参数1 <!-- 从大到小 --> }) -
形式参数1 是前一个数组项
形式参数2 是后一个数组项
返回值 的 减法 只能运算 数字
中文排序
写法：字符串1.localeCompare(字符串2,"zh")
快速排序(二叉排序)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
function quitSort(arr) {
// 取中间项的索引
if(arr<=0){
return arr;
}
var centerIndex = parseInt(arr.length / 2);
// 拿到中间项 是一个数组 并删除
var center = arr.splice(centerIndex, 1);
var min = [];
var max = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < center[0]) {
min.push(arr[i]);
} else {
max.push(arr[i]);
}
}
return quitSort(min).concat(center, quitSort(max));
}
console.log(quitSort([3, 1, 2, 9, 0]))
script>
body>
html>
join 拼接
- 将数组中的数组项 使用指定的拼接标识 拼接成字符串
- 用法:数组.join()默认标识 默认标识 就是 ，
- 用法:数组.join(拼接标识)
concat拼接数组
- 用法:数组.concat(数组1,数组2,数据项，其他类型的数据)
- 注意： 可以传数组 也可其他数据 传入其他数据的时候会当成数据项 加入
- 注意：拼接数组 会 生成一个新的数组
reverse转换数组
indexOf 从前往后查找指定内容的索引
跟字符串使用方法一样
slice截取数组的方法
跟字符串使用方法一样
能够截取开头不能接取末尾
可以传负数参数
数组的迭代方法
every
作用：针对数组元素如果结果都为true 返回值也是 true
用法：数组.filter(function(tem,idx,arr){return 过滤条件})
some
用法：数组.filter(function(tem,idx){return 过滤条件})
filter 过滤器
用法：数组.filter(function(tem,idx){return 过滤条件})
注意：如果满足过滤条件 就筛选出来 组成一个新的数组
map
用法：数组.map(function(item,idx){return 对数组项的操作代码})
循环对没一个数组项执行返回的操作代码 最后将执行过后的数组项组成一个新的数组
forEach
作用：没有返回值 就是单纯的循环数组
用法：数组.forEach(function(item,idx){循环体代码})
写给看到最后的你
朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！
有问题可以私信我、大家一起交流 前端知识 以及 爬虫 python知识。
公众号：Linux下撸python
期待和你再次相遇
愿你学的愉快
