Date对象和String类型
javascript
1. Math对象
1.1 取整
- parseInt 取整 舍弃小数部分
- Math.floor 向下取整 舍弃小数部分
- Math.ceil 向上取整 有小数就进位
- Math.round 四舍五入
1.2 数学方法
- Math.max(数值1,数值2,数值3…) 找序列中最大的值
- Math.min(数值1,数值2,数值3…) 找序列中最小的值
- Math.abs 取绝对值
- Math.sqrt 开根号
- Math.pow(num,n) 次方幂 num底数 n 次方幂
1.3 随机数
- Math.random() 随机生成0-1之间的数据 包括0不包括1
- 随机生成min到max之间的整数
- Math.floor( Math.random() * (max - min + 1) + min )
2.时间对象Date
月份单词
January:一月 February:二月 March:三月 April:四月
May:五月 June:六月 July:七月 August:八月
September:九月 October:十月 November:十一月 December:十二月
2.1 创建时间对象
- 创建当前时间对象
<script>
// 1.创建当前这一时刻的时间对象
var oDate = new Date();
console.log(oDate);// Thu Sep 01 2022 09:57:06 GMT+0800 (中国标准时间)
// 2.创建每秒的时间
setInterval(function(){
var a = new Date();
// console.log(a,"现在时刻");
},1000)
</script>
- 创建自定义时间
//a. 自定义的时间是一个字符串
var sDate = new Date("2023,1,1,12:00:00");
var sDate = new Date("2023 1 1 12:00:00");
var sDate = new Date("2023/1/1 12:00:00");
var sDate = new Date("2023-1-1 12:00:00");
console.log(sDate);//Sun Jan 01 2023 12:00:00 GMT+0800 (中国标准时间)
//b. 时间分开接受参数 创建2023年10月1日 12:00:00的时间
// 问题 想创建10月 但是结果出来的是11月
// 分析原因: 月份是从0开始的 0-1月 10-11月
var aDate = new Date(2023,9,1,12,0,0) //想创建10月 就给9
console.log(aDate);// Sun Oct 01 2023 12:00:00 GMT+0800 (中国标准时间)
var bDate = new Date(2023,9,1);
console.log(bDate);// Sun Oct 01 2023 00:00:00 GMT+0800 (中国标准时间)
2.2 获取时间
- 获取特定格式的时间
var oDate = new Date();
// 年月日 时分秒 日期
console.log(oDate);//Thu Sep 01 2022 10:39:02 GMT+0800 (中国标准时间)
// 1.获取特定格式的时间 年 月 日
console.log(oDate.toDateString());//Thu Sep 01 2022
console.log(oDate.toLocaleDateString());//2022/9/1
// 2.获取特定格式的时间 时 分 秒
console.log(oDate.toTimeString());//10:41:30 GMT+0800 (中国标准时间)
console.log(oDate.toLocaleTimeString());// 10:42:02
- 获取单个时间
// 3.获取单个时间
// 年
console.log(oDate.getFullYear());//2022\
// 月 月份是从0开始 0----1月份 8----9月份
console.log(oDate.getMonth() + 1);//9
// 日
console.log(oDate.getDate());// 1
// 时
console.log(oDate.getHours());
// 分钟
console.log(oDate.getMinutes());
// 秒
console.log(oDate.getSeconds());
// 星期 ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
console.log(oDate.getDay());//4
- 获取时间戳
// 4.获取现在的时间戳 1970年1月1日0:0:0 到现在时刻的毫秒
console.log(oDate.getTime())
// 5.获取未来时间的时间戳 1970年1月1日0:0:0 到2023年10月1日的毫秒
var sDate = new Date("2023,10,1")
console.log(sDate);//Sun Oct 01 2023 00:00:00 GMT+0800 (中国标准时间)
console.log(sDate.getTime());//1696089600000
2.3 倒计时
- 实现思路:倒计时 未来时间的时间戳-现在时间的时间戳 = 差值(毫秒单位)
- 注意
- 1天 24 * 60 * 60 86400s
- 1时 60*60 3600s
- 1分 60 60s
<script>
auto();
setInterval(auto, 1000)
function auto() {
// 1.倒计时 未来时间的时间戳-现在时间的时间戳 = 差值(毫秒单位)
// 创建未来时间
var futureDate = new Date("2022,9,3");
// 创建现在时间
var currentDate = new Date();
// 时间差 毫秒单位转成秒 1s = 1000ms
var time = futureDate.getTime() - currentDate.getTime();
time = parseInt(time / 1000);
// console.log(time);// 131680
// 将time 转为 天 时 分 秒
/*
1天 24*60*60 86400s
1时 60*60 3600s
1分 60 60s
*/
var t = parseInt(time / 86400);
console.log(t);
var h = parseInt((time % 86400) / 3600);
console.log(h);
var m = parseInt((time % 86400 % 3600) / 60);
console.log(m);
var s = time % 60;
console.log(s);
// 将结果显示在页面上
document.body.innerHTML = "还剩余" + suppleZero(t) + "天" + suppleZero(h) + "时" + suppleZero(m) + "分" + suppleZero(s) + "秒"
}
function suppleZero(num) {
return num < 10 ? "0" + num : num;
}
</script>
3.字符串对象
3.1 创建字符串对象
- 字面量创建
// 1.字面量创建 (包装类对象 是使用字符串的方法的之后 会暂时将自己伪装成一个对象)
var str1 = "0711web";
console.log(str1);//0711web
console.log(typeof str1);// string
console.log(str1.length);// 7
- new关键字创建
// 2.new 关键字创建
var str2 = new String("0711web");
console.log(str2);//String {'0711web'}
console.log(typeof str2);// object
console.log(str2.length);//7
3.2 字符串的方法
length
- 获取字符串长度
charAt
- 语法:str.charAt(下标)
- 作用 :获取下标对应的字符
// length
console.log(str1.length);//7
// charAt(下标)
console.log(str1.charAt(6));//b
charCodeAt
- 语法:str.charCodeAt(下标)
- 作用 :获取下标对应的字符编码
// charCodeAt(下标) "A"----65 "a"----97 "0"----48
console.log(str1.charCodeAt(0));//48
indexOf
从左往右查找
- 语法:str.indexOf(searchValue,index)
- 作用 :查询一个字符串在另一个字符串中首次出现的位置 如果出现则是返回该字符串的下标位置 没有找到则是返回-1
- 参数
- searchValue:必需参数 需要查询的字符串
- index:可选值 开始查找的位置 默认是从下标0开始查找
// indexof
var str2 = "webuiwebuiwebui";
var s = "ui";
console.log(str2.indexOf(s));// 3 ui的u的下标
var s1 = "java"
console.log(str2.indexOf(s1));// -1
var s3 = "ui";
console.log(str2.indexOf(s3,5));//8
var str3 = "uiwebui";
var s4 = "ui";
console.log(str3.indexOf(s4));//0
lastindexof
从右往左查找
-
语法 :str.lastindexOf(searchvalue,index)
-
作用 :从字符串后面开始往前查找第一次出现的目标位置 如果找到返回正常的索引值 如果找不到则是返回-1
-
参数
- searchValue: 必需参数 需要查询的字符串
- index:可选值 开始查找的位置 默认是从str.length-1开始查找
// lastindexOf 了解 var str = "webuiwebjava"; var s1 = "web" console.log(str.lastIndexOf(s1));//5 console.log(str.lastIndexOf(s1,3));//0
字符串截取方法
substring
- 语法:str.substring(start,end)
- 作用:截取介于两个指定下标之间的字符 包括start不包括end
- 参数
- start 开始截取的下标 可选值 默认是0
- end 结束截取的下标 可选值 默认是str.length
// 1.substring(start,end)
var str1 = "webuiwebuiwebui";
console.log(str1.substring());// webuiwebuiwebui
console.log(str1.substring(2));// buiwebuiwebui
console.log(str1.substring(2,4));// bu
slice
- 语法:str.slice(start,end)
- 作用:截取介于两个指定下标之间的字符 包括start不包括end
- 参数
- start 开始截取的下标 可选值 默认是0
- end 结束截取的下标 可选值 默认是str.length
// 2.slice(start,end)
var str2 = "webuiwebuiwebui";
console.log(str2.slice());//webuiwebuiwebui
console.log(str2.slice(3));//uiwebuiwebui
console.log(str2.slice(3,6));//uiw
slice和substring的区别
- substring 会自动调整位置 slice不会自动调整位置
- substring 碰见负数会默认为0 slice碰见负数认为倒数第几个
// 3.区别
var str3 = "abcdefg";
console.log(str3.substring(2,0));//ab 自动调整位置 (0,2)
console.log(str3.slice(2,0));//" " 不会自动调整位置
console.log(str3.substring(2,-1));//ab 负数会默认为是0
console.log(str3.slice(2,-1));//cdef 负数默认为倒数第几个
var str4 = ["[object Object]","[object Function]","[object Array]"];
console.log(str4[0].slice(8,-1));//Object
console.log(str4[1].slice(8,-1));//Function
console.log(str4[2].slice(8,-1));//Array
for(var i = 0;i<str4.length;i++){
console.log(str4[i].slice(8,-1))
}
substr
- 语法 str.substr(start,length)
- 作用:从哪开始截取 截取几个
var str = "110123200010010987";
console.log(str.substr(6,4))// 2000
大小写转换
toUpperCase
- 语法 str.toUpperCase() 转大写
toLowerCase
-
语法 str.toLowerCase() 转小写
-
验证码不区分大小写
<script>
var str = "ABcdeff";
console.log(str.toUpperCase());"ABCDEFF"; //转大写
console.log(str.toLowerCase());"abcdeff"; //转小写
// 验证码不区分大小写
var str1 = "OpXy"; //系统给的验证码
var str2 = "apxy"; //用户输入的验证码
if(str1.toLowerCase() == str2.toLowerCase()){
console.log("用户输入正确")
}
</script>
replace
- 语法 str.replace(searchValue,replaceValue)
- 作用 替换字符串中的某个字符 返回一个新的字符串 默认一次只能替换一个
- 参数
- searchValue 必需 将要被替换的字符串
- replaceValue 必需 替换的字符
// replace(searchValue,replaceValue)
var str = "Webuiwebuiwebui";
var newStr = str.replace("web","java");//将web字符串替换成java
console.log(newStr,str)
trim
- 语法 str.trim()
- 作用 去除字符串的首尾空格
// trim 去除字符串的首尾空格
var str = " webui webui ";
console.log(str.trim());
split
- 语法:str.split(分割标识)
- 作用:将字符串根据特定标识分割成数组
// split 将字符串根据特定标识分割成数组
var date = "2022-9-1";// [2022,9,1]
var newDate = date.split("-");
console.log(newDate,date);// ['2022', '9', '1'] '2022-9-1'
var name = "澄邈、德泽、海超"
console.log(name.split("、"));// ['澄邈', '德泽', '海超']
4.数组
数组 存储数据的容器 可以存储任意数据类型 可以存储任意多个
4.1 创建数组对象
- 字面量创建
// 1.字面量创建
var arr = [1,true,false,"1234",undefined,null,[4,5,6],{"name":"李四"}];
console.log(arr);//[1, true, false, '1234', undefined, null, Array(3), {…}]
console.log(typeof arr);// object
- new关键字创建
// 2.使用new关键字创建
var arr1 = new Array(1,true,false,"字符串",undefined,null,[1,2,3],{"age":18});
console.log(arr1); //[1, true, false, '字符串', undefined, null, Array(3), {…}]
console.log(typeof arr1);// object
- 通过下标查找数组
// 3.数组的添加 通过下标操作
// 获取 数组名[下标]
console.log(arr1[4]);//undefined
// 长度 数组名.length
console.log(arr1.length);//8
// 修改数组中的某个内容 数组名[下标] = 值
arr1[4] = "你好";
console.log(arr1); // [1, true, false, '字符串', '你好', null, Array(3), {…}]
// 添加数组内容
arr1[8] = "快下课了";
console.log(arr1);//[1, true, false, '字符串', '你好', null, Array(3), {…}, '快下课了']
arr1[11] = "我是下标11";
console.log(arr1);//[1, true, false, '字符串', '你好', null, Array(3), {…}, '快下课了', empty × 2, '我是下标11']
- 注意事项
// 4.注意事项
// 注意1 :使用new关键字创建的时候 如果只有一个数据并且是number类型 代表创建长度为n的空数组
var arr2 = new Array(2);
console.log(arr2); //[empty × 2]
// 注意2 可以使用数组名.属性名追加内容 这种形式一般不用
var arr3 = ["张三","李四","王五"];
arr3.name = "这是我用点的形式追加";
console.log(arr3.name);// "这是我用点的形式追加"
4.2 数据的分类依据
4.2.1分类依据
![](数据分类依据.png)
- typeof检测结果
基本数据类型:数据结构比较单一 数据是存储在变量中的
stirng数据 string
number数据 number
boolean数据 boolean
undefined数据 undefined
null数据 object
复杂数据类型:数据结构比较复杂 变量中存储的是内存地址 内存地址指向数据 会一改全改
array数组 object
funtion函数 function
object对象 object
// 基本数据类型
console.log(typeof "123");//string
console.log(typeof 10);//number
console.log(typeof true);//boolean
console.log(typeof undefined);//undefined
console.log(typeof null);//object
// 特殊数据类型 复杂数据类型 引用数据类型 对象数据类型
console.log(typeof []);// object
console.log(typeof {});// object
console.log(typeof function(){});// function
- 修改基本数据类型和复杂数据类型的值
// 2.修改基本数据类型和复杂数据类型的值
// 基本数据类型:数据类型比较单一 变量里存储的就是值
var a = 10;
var b = a;// 因为a中存储的是10 将10给变量b
console.log(b);//10
b = 20;
console.log(a,b);// 10,20
// 复杂数据类型 数据存储比较复杂 变量中存储的是内存地址 内存地址指向数据 如果共用一个地址 会一改全改
var arr1 = [1,2,3,4];
var arr2 = arr1;// 将arr1的内存地址赋值给arr2 arr1和arr2共用一个内存地址 一改全改
console.log(arr2);//[1,2,3,4]
arr2[3] = "哈哈哈";//修改arr2中的值
console.log(arr1);// [1,2,3,'哈哈哈']
console.log(arr2);// [1,2,3,"哈哈哈"]
4.2.2深浅拷贝
只有复杂数据类型 才存在深浅拷贝问题
- 浅拷贝
// 1.浅拷贝
// var arr1 = [1,2,3,4];
// var arr2 = arr1;// 将arr1的内存地址赋值给arr2 arr1和arr2共用一个内存地址 一改全改
// console.log(arr2);//[1,2,3,4]
// arr2[3] = "哈哈哈";
// console.log(arr1);// [1, 2, 3, '哈哈哈']
// console.log(arr2);// [1,2,3,"哈哈"]
-
深拷贝
// 2.深拷贝
var arr1 = [1,2,3,4];
var arr2 = [];//给arr2 单独创建一个存储空间
// 通过for循环 将arr1的值一一赋值给arr2
for(var i = 0;i<arr1.length;i++){
/*
i=0
arr2[0] = 1
arr2[1] = 2
*/
arr2[i] = arr1[i];
}
arr2[3] = "哈哈哈";
console.log(arr2);//[1, 2, 3, '哈哈哈']
console.log(arr1);// [1,2,3,4]
4.3 数组的方法
数组的方法都会改变原数组
4.3.1 数组的添加和删除
push
- 语法 arr.push(items)
- 作用:在数组的末尾添加一个或者多个元素 返回当前数组的长度
pop
- 语法:arr.pop()
- 作用:在数组的末尾删除一个元素 返回被删除的元素
unshift
- 语法:arr.unshift(items)
- 作用:在数组的头部添加一个或者多个元素 返回当前数组的长度
shift
- 语法:arr.shift()
- 作用:在数组的头部删除一个元素 返回被删除的元素
// 1.push
var arr = [1,true,false,"空字符串"];
var len = arr.push("快吃饭了");
console.log(arr);//[1, true, false, '空字符串', '快吃饭了']
console.log(len);//5
// push多个数据之间用逗号隔开 可以追加任意数据类型
arr.push("1","2",["哈哈","嘿嘿"])
console.log(arr);//[1, true, false, '空字符串', '快吃饭了', '1', '2', Array(2)]
// 2.pop
var arr = [1,true,false,"空字符串"];
var a = arr.pop();
console.log(arr);//[1,true,false]
console.log(a);// "空字符串"
// 3.unshift
var arr = [1,true,false,"空字符串"]
var len = arr.unshift(0);
console.log(arr);//[0,1,true,false,"空字符串"]
console.log(len);//5
arr.unshift(undefined,null,{});
console.log(arr);// [undefined,null,{},0,1,true,false,"空字符串"]
// 4.shift
var arr = [1,true,false,"空字符串"];
var a = arr.shift();
console.log(arr);//[true,fasle,"空字符串"]
console.log(a);//1
4.3.2 数组的其他方法
splice
- 语法 arr.splice(sart,deleteCount,items)
- 作用 删除数组中一串连续的数组元素 被删除的元素会组成一个新的数组返回 使用items替换前面被删除的数组元素
- 参数
- start 必需 开始删除的下标位置
- deleteCount 可选值 删除的个数 默认是删除到末尾
- items 可选值 替换的内容
// 1.splice
// a.start参数
var arr = [1,true,false,null,"字符串"];
var a = arr.splice(3);
console.log(arr);//[1,true,false];
console.log(a);// [null "字符串"];
// b:start参数 deleteCount参数 删除
var arr = [1,true,false,null,"字符串"];
var a = arr.splice(3,1);
console.log(arr);// [1,true,false,"字符串"];
console.log(a); // [null]
// c.start参数 deleteCound参数 items替换的内容 替换
var arr = [1,true,false,null,"字符串"];
arr.splice(2,2,"这是替换的内容",1);
console.log(arr);//[1,true,"这是替换的内容",1,"字符串"]
// d.添加功能
var arr = [1,3,4];
arr.splice(1,0,2);//从下标为1的位置开始删除 删除0个(相当于没有删除) 然后将数字2添加到该下标前面
console.log(arr);//[1,2,3,4]
indexof
- 语法:arr.indexof(searchValue,index)
- 作用:查找元素在数组中首次出现的位置 出现返回对应的下标 找不到返回-1
var arr = [1,2,3,4,5,6,1,2];
var index = arr.indexOf(1,2);
console.log(index);// 6
join
- str.split(分割标识) 将字符串根据分割标识分割成一个数组 字符串—数组
- arr.join(组合标识) 将数组按照组合标识组成字符串 数组–字符串
- 语法 arr.join(组合标识)
- 作用 将数组按照组合标识组成字符串
// 3.join
var arr = [1,2,3,4,5]; //
var a = arr.join("-");
console.log(a);// "1-2-3-4-5-6"
console.log(arr.join(""));//12345
console.log(arr.join(","));//1,2,3,4,5
console.log(arr.join(" "));//1 2 3 4 5
reverse
- 语法 arr.reverse()
- 作用 反转数组 将反转结果作为返回值返回
// 4.reverse
var arr = [1,true,false,null,"字符串"];;
var a = arr.reverse();
console.log(a);// ['字符串', null, false, true, 1]
console.log(arr);
concat
- 语法:arr.concat(items)
- 作用 将多个元素 数组组合成一个新的数组返回
// 5.concat 不会改变原数组
var arr = [1,2,3];
var a = arr.concat("4","5",["呵呵","哈哈"])
console.log(a);//[1, 2, 3, '4', '5', '呵呵', '哈哈']
console.log(arr); // [1,2,3]
slice
- 语法 arr.slice(start,end)
- 作用:截取数组中一串连续的元素组成一个新数组返回
// 6.slice 不会改变原数组
var arr = ['字符串', null, false, true, 1];
var a = arr.slice(0,2);
console.log(a);//["字符串","null"];
console.log(arr);//['字符串', null, false, true, 1]
4.3.3 数组排序
冒泡排序
- 冒泡排序的思路 两个相邻位置的数据进行比较
<script>
var arr = [6, 4, 9, 2, 7, 1];
for (var i = 0; i < 5; i++) {
// i=0 内层0-5
// i=1 内层0-4
// i=2 内层0-3
// i=3 内层0-2
// i=4 内层0-1
for (var j = 0; j < arr.length- 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
// 交换位置
var temp = arr[j];
arr[j] = arr[j + 1]
arr[j + 1] = temp;
}
}
}
console.log(arr);