目录
一、数组
内建对象
数组也是一个对象,他和我们普通对象类似,也是用来存储一些值的。不同的是,普通对象是使用字符串作为属性名的,数组则是通过数字作为索引来操作元素。
索引
从o开始的整数就是索引
数组的特点
1.从0开始,用索引来确定值
2.数组的存储性能比普通对象要好
3.数组中的元素可以是任意的数据类型,包括对象、函数都可,甚至是放多个数组也可以。
1.1.数组的创建
1.1.1.使用new关键字(构造函数)
//var 数组名 = new Array();(使用构造函数来创建数组)
var arr = new Array();
1.1.2.使用字面量形式
//var 数组名 = [];(用字面量来创建数组)
var arr = [];
1.1.3.创建数组的注意事项
可以在创建数组时,就指定数组中的元素,元素之间采用逗号隔开
构造函数:将元素添加在()中
字面量:将元素写在[]中
var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4]
//两者相同,都是创建一个数组,数组中元素为1 2 3 4
注意:
使用构造函数直接添加元素时,如果只有一个数a,则表示创建一个长度为a的数组,而不是一个元素为a的数组
var arr = new Array(5);//表示创建一个长度为5的数组,数组名为arr
1.2.数组的基本使用
1.2.1.存操作(增)
向数组中添加元素
//数组名[索引] = 值;
arr[0] = 1;
1.2.2.取操作(查)
读取数组中的元素
1.读取不存在的索引,不会报错,而是返回undefined。
//数组名[索引]
console.log(arr[0]);
1.2.3.获取数组长度
注意:
1.对于连续数组,使用length可以获取到数组的长度(元素的个数。最大的index + 1 )
2.对于非连续数组,获得的是该数组的索引最大值+1(中间位置将会被空出)
//数组名.length
console.log(arr.length);
1.2.4.修改数组长度
1.如果修改的length大于数组原来的长度,则多出来的部分会被空出来
2.如果修改的length小于数组原来的长度,则多出来的部分会被删除
//数组名.length = 长度
arr.length = 1
1.3.数组的方法
需要注意各个方法的返回值,并不是数组本身。
1.3.1.push()
向数组的末尾添加一个或多个元素,并返回数组的新长度。
arr.push("唐僧","蜘蛛精");
console.log(arr);
1.3.2.pop()
删除数组的最后一个元素,并返回被删除的元素作为返回值
arr.pop();
1.3.3.unshift()
向数组的开头添加一个或多个元素,并返回数组长度。
arr.unshift("牛魔王","二郎神");
1.3.4.shift()
删除数组的第一个元素,并将被删除元素返回
arr.shift();
1.3.5.concat()
可以连接两个或多个数组,并将新的数组返回
1.该方法不会对原数组产生影响
2.多个数组或元素之间用,隔开
//调用concat()方法将arr与arr2连接起来
arr.concat(arr2);
1.3.6.join()
该方法可以将数组转换成字符串,并将转换之后的字符串进行返回
1.对原来的数组不会产生影响
2.在使用该方法时,可以指定一个字符作为参数,该参数将会成为数组中元素的连接符如果不指定连接符,则默认指定逗号,也可以传入空串作为连接符
result = arr.join();
1.3.7.revrese()
用来反转数组,即将其倒置,顺序颠倒
1.该方法会对原数组产生影响
arr.reverse()
1.3.8.sort()
可以用来对数组中的元素进行排序
1.也会影响原数组,默认按照Unicode编码来进行排序。因此,对数字进行排序时,可能会得到错误的答案
我们需要自己来添加一个回调函数,来指定排序规则
该回调函数需要两个参数,参数的调用由浏览器决定,但是在数组中a一定在b的右边。浏览器会根据该函数的返回值决定元素的顺序
1.如果返回一个大于0的值,则元素交换位置
2.如果返回一个小于0的值,则元素位置不变
3.如果返回0,则元素相等,也不交换位置
arr.sort(function(a,b){
return a-b ;
})
1.3.9.slice()
可以从数组中提取指定元素
该方法不会改变原数组,仅仅是将提取到的新元素封装到一个新数组中返回
需要两个参数:
1.截取开始位置的索引(包括开始的索引)
2.截取结束位置的索引(不包含结束索引)
注意:
1.第二个参数可以省略不写,代表将开始位置及以后的所有元素都截取出来
2.也可以写一个超过原数组最大长度的数值,意义与不写相同
3.参数可以传递一个负值,传递负值时就需要从后往前计算该值的位置
-1代表的是倒数第一个
var result = arr.slice(-4,-1);//开始位置必须在结束位置的前面
1.3.10.splice()
替换数组中的元素,也可以用于删除数组中的指定元素(根据参数不同)
使用splice()会将指定元素从原数组中删除并将被删除元素作为返回值返回
参数(最少两个):
第一个参数表示开始位置的索引
第二个参数表示删除的数量(并不是结束位置的索引)
第三个参数及以后的参数将会被自动按顺序从开始位置之前插入到原数组中
var result = arr.splice(0,1,"牛魔王","红孩儿");
1.4.数组的遍历
遍历数组,就是把数组中的所有元素都取出来,for循环、foreach方法,可以参考上篇笔记
JavaScript学习笔记01-数据类型-运算符-循环语句_czttaotao的博客-CSDN博客
//创建一个数组r
var arr = ["孙悟空","猪八戒","沙和尚"];
//用for循环遍历数组
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
二、Data对象
在JS中使用Date对象来表示一个时间
//创建一个Date对象
//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();
console.log(d);
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串来作为参数
//日期格式:"月/日/年(代指一个空格)时:分:秒"
var d2 = new Date("04/08/2021 11:10:30");//周四
console.log(d2);
2.1.Data对象的方法
2.1.1.getDate()
获取当前日期对象是年月日中的几日
var date = d2.getDate();
2.1.2.getDay()
获取当前日期对象是星期几
它会返回一个0-6的值
0表示周日,1表示周一......
var day = d2.getDay();
2.1.3.getmonth()
获取当前日期对象的月份
他会返回一个0-11的值
0表示一月,1表示二月......11表示十二月
var month = d2.getMonth();
2.1.4.getFullYear()
获取当前日期对象的年份
hour小时second分钟......
var year = d2.getFullYear();
2.1.5.getTime()
获取当前日期对象的时间戳
表示的是从格林威治标准时间的1970年1月1日,0时0分0秒到当前日期所花费的毫秒数()
因为时间的进制单位的不统一,我们统一规定使用毫秒
计算机底层在保存时间时使用的都是时间戳
var time = d2.getTime();
2.1.6.Date.now()
获取当前的时间戳
可以用来测试当前代码的执行的性能
用两个时间戳将代码包裹起来
var time = Date.now();
三、Math对象
Math和其他对象不同,他不是一个构造函数,它属于一个工具类,不用创建对象,它里面封装了数学运算相关的属性和方法。
Math.PI 表示圆周率
3.1.Math的方法
3.1.1.Math.abs()
计算一个数的绝对值
var a = Math.abs(-1);
3.1.2.Math.ceil()
向上取整
console.log(Math.ceil(1.1));//2
console.log(Math.ceil(-1.1));//-1
3.1.3.Math.floor()
向下取整
console.log(Math.floor(1.1));
3.1.4.Math.round()
四舍五入取整
console.log(Math.round(1.1));//1
console.log(Math.round(1.6));//2
3.1.5.Math.random()
生成一个0-1之间的随机数
Math.random()
Math.random()的引申用法
1.生成一个0-x之间的随机数
Math.random()*x
2.生成整数时,可以对其进行四舍五入或取整,
需要注意的是,四舍五入可以包含0跟x
取整则会缺少其中的某一个值
Math.round(Math.random()*x)
3.生成一个X-Y之间的随机数
Math.round(Math.random()*(Y-X)+X)
3.1.6.Math.max()
获取多个数中间的最大值
Math.max(1, 4, 3, 2)
3.1.7.Math.min()
获取多个数中间的最小值
Math.min(1, 4, 3, 2)
3.1.8.Math.pow(X,Y)
需要两个参数X,Y
返回X的Y次幂,即X的Y次方
Math.pow(4, 2)
3.1.9.Math.sqrt()
返回数的开方:4的开方是2
Math.sqrt(4)
四、包装类
在JS中,为我们提供了三个包装类,通过这三个包装类可以将基本数据类型数据转换为对象。此时,我们就可以像使用对象一样使用他们了。
String()
将基本数据类型String转换为String对象
var str = new String("hello");
Number()
将基本数据类型Number转换为Number对象
var num = new Number(3);
Boolean()
将基本数据类型Boolean转换为Boolean对象
var bool = new Boolean(true);
基本数据类型与转换为对象后的区别
var a = 123;
//比较普通基本数据类型与对象基本数据类型的区别
num.hello = "nihao";
console.log(num.hello);
a.hello = "nihao";
console.log(a.hello);//报错,普通基本数据类型不能添加属性
注意:当转换为对象后,他们就变成了引用数据类型,在变量中保存的就是内存地址了。
//两者不同的原因是两者都为对象,保存地址不同
var a = new Number(1);
var a2 = new Number(1);
console.log(a == a2);//false
//两者相等的原因是因为,系统默认进行了类型转换.
var bool2 = true;
console.log(bool == bool2);
console.log(bool === bool2);//true
但是,我们在实际应用中一般不会使用基本数据类型的对象。如果使用基本数据类型的对象,在做一些比较是可能会带来不可预料的结果。
包装类其实是电脑自己使用的,在对基本数据类型调用方法时,临时将其转换成对象来使用该方法,然后在将其重新转换成基本数据类型。比如,a.toString()......
五、字符串
在底层,字符串是以字符数组的形式保存的,也就是说,我们的一个字符串在底层就是一个数组,数组中的每个元素就是字符串的每个字符。
5.1.属性
5.1.1.length
用来获取字符串的长度
每个字符串中都有length属性保存字符串的长度
var c = "hello world";
console.log(c.length)//11
5.2.方法
5.2.1.charAt()
可以返回字符串中指定位置的字符
参数:索引
var result = a.charAt(6);
5.2.2.charCodeAt()
返回指定位置的字符编码(Unicode编码)
参数:索引
var result = a.charCodeAt(6);
5.2.3.fromCharCode()
可以根据字符编码来获取字符
参数:想要获取的字符的字符编码。可以填写其他进制数字,但是需要填写标准
var result = String.fromCharCode(119);
5.2.4.concat()
可以用来连接两个或多个字符串,返回新字符串
对原字符串无影响,多个参数中间用,隔开 作用和 + 一样
参数:要连接的字符串
var result = a.concat(b,c,"nihao");
5.2.5.indexOf()
可以检索一个字符串中是否含有指定内容
有,则返回指定内容第一个出现的位置的索引
没有,则返回-1
也可以指定第二个参数,用来指定开始检索的位置
var result = a.indexOf("l");
5.2.6.lastIndexOf()
作用与indexOf()相同,用法也相同
区别在于,该方法是从后往前找
var result = a.lastIndexOf("l");
5.2.7.slice()
可以从字符串中截取指定的内容,并将截取到的内容返回
两个参数:
第一个参数:开始位置
第二个参数:结束位置
包括开始位置,不包括结束位置
1.不会影响原字符串
2.开始位置一定要在结束位置的前面
3.可以省略第二个参数 ,则会截取到后面所有的
4.也可以传递负数作为参数,负数则会从后面计算
var result = a.slice(1,5);
5.2.8.substring()
可以截取一个字符串,与slice()类似
区别在于,这个方法不能接受负值作为参数,如果使用负值,则默认其为0
注意:
该方法会自动调整参数的位置
如果,传递的两个参数,第二个参数小于第一个参数,则自动交换位置
var result = a.substring(1,5);
5.2.9.substr()
用来截取字符串
第一个参数,截取开始位置的索引,第二个参数,截取字符串的长度
var result = a.substr(1,5);
5.2.10.split()
可以将一个字符串拆分为一个数组
参数:以字符串中的哪个字符分割改字符串
传递参数为空串时,则会将每个字符都拆分为数组中的元素
var result = str.split(",");
5.2.11.toUpperCase()
将一个字符串转换为大写并返回新字符串
1. 不会影响原字符串
var result = a.toUpperCase();
5.2.12.toLowerCase()
将一个字符串转换为大写并返回新字符串
1.不会影响原字符串
var result = a.toLowerCase();
六、正则表达式
用于定义一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,将字符串中符合规则的内容提取出来
6.1.创建正则对象
6.1.1.通过new关键字来创建正则表达式
var 变量名 = new RegExp("正则表达式","匹配模式");
参数:在构造函数中可以传递一个匹配模是作为第二个参数(双引号包住)
i 忽略大小写
g 全局匹配模式
使用typeof检查正则对象,会返回object
//var 变量名 = new RegExp("正则表达式","匹配模式");
var reg = new RegExp("a");
var reg = new RegExp("a", 'i');
//这个正则表达式可以用来检查一个字符串中是否含有a
console.log(typeof reg);//object
6.2.2.通过字面量的形式来创建正则表达式
var 变量名 = /正则表达式/匹配模式
//var 变量名 = /正则表达式/匹配模式
var reg = /[A-Z|a-z]/i;
使用字面量的方式更加简单,但是使用构造函数更加灵活。这是因为在构造函数中可以通过传递变量来切换不同的正则表达式。
使用 | 来表示或者的意思
reg = /a|b|c/;
[ ]里的内容也是或的关系
reg = /[abc]/;
[a-z]表示任意的小写字母
var reg = /[a-z]/i;
[A-Z]表示任意的大写字母
var reg = /[A-z]/i;
[A-z]表示任意的字母,等同于[A-Z|a-z]
var reg = /[A-z]/i;
[^ ]表示除了 以外的
var reg = /[^abc]/;
eg:[^ab]表示除了a和d以外的,即含有除了a和d以外的字符的字符串就满足条件,abc也满足
[0-9]表示任意的数字
var reg = /[0-9]/;
6.2.方法
6.2.1.test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
符合,返回true;不符合返回false
参数:被检查的字符串
reg.test("abc")//检查字符串'abc'中是否含有a
6.3.字符串和正则相关方法
6.3.1.split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法会根据正则表达式去拆分字符串。这个方法即使不全局匹配,也会全都拆分。
//以下面这个字符串为例
var str = "1a2b3c4d5eee6f";
var result = str.split(/[A-z]/);
console.log(result);//结果为一个长度为7的数组,数组元素分别为1 2 3 4 5 6 ''
总结:
当字符串是一个比较规律的字符串时,分隔时的分隔符也是相同的,此时,我们直接传递参数即可,但是像上面这样,分隔符并不是同一个字符,此时就需要使用到正则表达式了
6.3.2.search()
可以搜索字符串中是否含有指定内容。
如果搜索到指定内容,则出现第一次出现的索引,没有则返回-1
可以接受一个正则表达式作为参数,然后会根据正则表达式来检索字符串
只会查找第一个,不能全局匹配
//speach()方法:搜索字符串中是否含有某一个片段的时候可以直接写参数
//但是若是搜索字符串中是否含有某几个片段的时候,就需要传递一个正则表达式来作为参数
var str = "hello abc helli adc world afc";
var result = str.search("abc");
console.log(result);
result = str.search(/a[bdf]c/);
console.log(result);
总结:
搜索字符串中是否含有某一个片段的时候可以直接写参数。但是若是搜索字符串中是否含有某几个片段的时候,就需要传递一个正则表达式来作为参数
6.3.3.match()
可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
1. 不添加条件时计算机默认是回在找到第一个时就不在继续往下找。但是,我们可以设置正则表达式为全局匹配模式,来要求计算机匹配所有内容。
2. 可以为一个正则表达式设置多个匹配模式切顺序无所谓
3. 该方法会将查询结果封装到一个数组中返回,即使只查询到一个结果
var str = "1a2b3c4d5e6f7A8B";
var result = str.match(/[A-z]/gi);
console.log(result);
console.log(typeof result);
console.log(Array.isArray(result));
6.3.4.replace()
可以将字符串中指定的内容替换为新内容
需要两个参数:
第一个参数:被替换的内容,可以接受一个正则表达式作为参数
第二个参数:新的内容
1.默认情况下替换第一个被检索到的指定内容
2.第二个参数为空串时,则表示,将指定内容删除后返回新字符串
result = str.replace(/a/gi,"BBBBB");
console.log(result);
console.log(str);
总结:
1.如果我们使用普通方式,那么他只会替换第一个被检索的内容,但是我们使用正则表达式的时候,就可以将字符串中所有符合要求的都替换掉
6.4.正则表达式语法
6.4.1.量词
通过量词可以设置一个内容出现的次数(正好出现n次)
注意:
量词只对它前面的一个内容起作用
语法:
/内容{次数}/设置模式
{n} 正好出现n次
var reg = /a{3}/;//表示a连续出现三次
console.log(reg.test("aacaad"));//false
console.log(reg.test("aaacaaad"));//true
reg = /(ab){3}/;//表示ab连续出现3次
console.log(reg.test("abababccc"));//true
{a,b} 出现a到b次
var reg = /b{1,3}/;// 表示a出现1到3次
console.log(reg.test("ccc"));//false
console.log(reg.test("abccc"));//true
console.log(reg.test("abbccc"));//true
console.log(reg.test("abbbccc"));//true
console.log(reg.test("abbbbccc"));//false
{a,} 出现a次及a次以上
var reg = /b{3,}/;//表示b出现三次及以上
console.log(reg.test("accc"));//false
console.log(reg.test("abbccc"));//false
console.log(reg.test("abbbccc"));//true
console.log(reg.test("abbbbccc"));//true
+ 表示至少一个,相当于{1,} a+
* 表示0个或多个,相当于{0,} a*
? 表示0个或一个,相当与{0,1} a?
^ 表示以...开头 ^a、
//检查一个字符串中是否以a开头
reg = /^a/;
console.log(reg.test("cacc"));//false
console.log(reg.test("accc"));//true
$ 表示以...结尾 a$
//检查一个字符串中是否以a结尾
reg = /a$/;
console.log(reg.test("accc"));//false
console.log(reg.test("accca"));//true
6.4.2.任意字符
. 表示任意字符(所以检查它时需要添加转义字符\) 。
即 \. 表示 .
\\ 表示 \
//检查一个字符串中是否含有.
//比较一下含有转义字符与没有转义字符的区别
var reg = /./;
console.log(reg.test("aaaaa.sdddd"));//true
console.log(reg.test("aaaaasdddd"));//true
reg = /\./;
console.log(reg.test("aaaaa.sdddd"));//true
console.log(reg.test("aaaaasdddd"));//false
注意:
使用构造函数时,由于他的参数就是一个字符串,而\是字符串中的转义字符。因此如果要使用 \ 则应该使用 \\ 来代替
6.4.3.转义字符的使用
\w:
表示任意的字母,数字,_ [A-z0-9_]
\W:
表示除了字母,数字,_ [^A-z0-9_]
\d:
表示任意的数字 [0-9]
\D:
表示除了数字 [^0-9]
\s:
表示空格
\S:
表示除了空格
\b:
表示单词边界
\B :
表示除了单词边界
单词边界就是:
在判断一个字符串中是否含有某个单词时,排除相近的单词的干扰
比如,判断是否含有child时,排除children的干扰
如果没有单词边界,则会将children中的child当作判断条件来判定通过
注意:
--这些正则表达式的判断条件都是含有,并不是只有。
即,只要含有就判断为通过
reg = /\bchild\b/;
console.log(reg.test("child"));//true
console.log(reg.test("children"));//false
reg = /child/;
console.log(reg.test("child"));//true
console.log(reg.test("children"));//true