原型对象(prototype)
toString()
垃圾回收(GC)
数组(Array)
arguments
Date
Math
包装类
字符串方法
正则表达式
正则语法
字符串和正则表达式的相关方法
正则表达式语法
邮件的正则
function构建函数的缺点:在整体功能域定义函数,污染整体功能域的命名空间(其他人不能再使用此定义);在整体功能域定义也非常不安全
原型对象(prototype)
我们创建的每添加到我们创建的每个函数中prototype;该属性对应一个对象,即原型对象。如果函数作为普通函数调用prototype没有效果。当函数以构造函数的形式调用时,它创建的对象中会有一个隐含的属性,指向构造函数的原型对象,可以通过__proto__访问该属性。
function MyClass(){ } MyClass.prototype.a = 123;//向MyClass在原型中添加属性a MyClass.prototype.sayHello = function(){ //向MyClass在原型中添加一种方法 alert("hello"); } var mc = new MyClass(); var mc2 = new MyClass(); mc.a = "我是mc中的a"; mc.sayHello();//"hello" console.log(mc.__proto__==MyClass.prototype);//true console.log(mc.a);//"我是mc中的a"
原型对象相当于一个公共区域。所有相同类别的例子都可以访问原型对象,并将对象中共同的内容设置为原型对象。当我们访问对象的属性或方法时,它会首先在对象本身中找到;如果有,直接使用。如果没有,我们将在原型对象中找到它。如果是,我们将使用它。
原型对象也是对象,所以它也有原型。当我们使用一个对象的属性或方法时,我们现在会找到它。如果有,我们会直接使用它;没有在原型对象中找到它;在找到它之前,没有在原型中找到它Object对象的原型Object如果没有,就会返回Undefined(Object对象的原型没有原型)
function MyClass(){ } MyClass.prototype.name = "我在原型中name"; var mc = new MyClass(); mc.age = 18; //console.log(mc.name);//"我在原型中name" //使用对象hasOwnProperty()检查对象本身是否含有属性 ///只有当对象本身有属性时才会返回true console.log(mc.hasOwnProperty("age"));//true console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true console.log(mc.__proto__.__proto__);//"[object Object]"
toString()
当我们直接在页面上打印对象时,实际上是输出对象toString()方法的返回值;如果我们想输出返回值,Object Object,可添加对象toString方法。
function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; } Person.prototype.toString = function(){ return "Person [name=" this.name ",age=" this.age ",gender=" this.gender "]"; } var per = new Person("Tom",15,"男"); var per2 = new Person("Sad",18,"女"); console.log(per);//"Person [name=Tom,age=15,gender=男]" console.log(per2);//"Person [name=Sad,age=18,gender=女]"
垃圾回收(GC)
垃圾:当一个对象没有任何变量或属性被引用时,我们不能操作它,这就是垃圾。如果垃圾太多,会占用很多空间,导致程序运行太慢。JS有自动垃圾回收机制,会自动从内存中销毁垃圾对象,不需要操作。要做的就是设置未使用的对象null即可。
var obj = new Object(); obj = null;
数组(Array)
数组也是一个对象;类似于普通对象的功能,用于存储一些值;不同的是,普通对象使用字符串作为属性名,数组使用数字作为索引操作元素。索引:从0开始的整数是索引。数组的优点:存储优于普通对象,数组经常用于存储开发中的一些数据。
使用typeof检查数组,返回object。
将元素添加到数组中 语法:数组[索引] = 值
读取数组中的元素 语法:数组[索引];读取不存在的索引,将返回undefined
获取数组的长度 语法:数组.length;对于连续数组,获得数组的长度(元素的数量),获得非连续数组的最大索引 1(尽量不要使用非连续数组)。也可以修改length,若修改的大于原长度多出来的会空出来;若修改的小于原长度,多出来会被删除。
var arr = Array(); arr[0] = 10; arr[1] = 11; arr[2] = 33; arr[10] = 66; console.log(arr(2);//33 console.log(arr.length);//11 arr.length = 2; console.log(arr);//"10,11" console.log(arr.length);//2 arr[arr.length] = 70; ///向数组的最后一个位置添加元素 //语法:数组[数组.length] = 值; console.log(arr);//"10,11,70"
用字面量创建数组。语法:[]
字面量创建数组时和构造函数创建数组时,可以指定元素,需要用逗号分开
var arr = [1,2,3,4,5]; console.log(typeof arr);//Object console.log(arr[3])//4 var arr2= new Array(6,7,8,9)
//创建数组,数组中只有一个元素10
arr3 = [10]//10
//创建一个长度为10的数组
var arr4 = new Array(10);// ",,,,,,,,,"
数组中的元素可以是任意的数据类型,也可以是对象,函数,数组
var arr = [true,"hello",1,null,undefined]
var obj = {name:"Tom"};
arr[arr.length] = obj;//"true,hello,1,,,[object Object]"
arr = [{name:"Sad"},{name:"Lay"},{name:"zhang"}];
arr = [function(){alert(1)},function(){alert(2)}]
console.log(arr[1].name);// "Lay"
arr[1]();//alert(2)
//二维数组
arr = [[1,2,3],[3,4,5],[4,5,6]]
console.log(arr[1]);//"3,4,5"
functionName | function |
push() | 用来向数组的末尾添加一个或多个元素,并返回数组新的长度 |
pop() | 用来删除数组的最后一个元素,并返回被删除的元素 |
unshift() | 向数组的开头添加一个或多个元素,并返回数组的新的长度 |
shift() | 删除数组的开头的一个元素,并返回被删除的元素 |
var arr = ["Tom","Sad","Lay"];
var result = arr.push("Lee","Lisa");
console.log(arr);//"Tom,Sad,Lay,Lee,Lisa"
console.log("result = "+result);//5
var result = arr.pop();
console.log(arr);//"Tom,Sad,Lay,Lee"
console.log("result = "+result);// "result = Lisa"
arr.unshift("ZZ","BB")
console.log(arr);// "ZZ,BB,Tom,Sad,Lay,Lee"
arr.shift();
console.log(arr);//"BB,Tom,Sad,Lay,Lee"
将数组中元素都获取到;一般情况我们都是使用for循环来遍历数组
var arr = ["Tom","Y","Lay"];
for(var i = 0;i <arr.length;i++){
console.log(arr[i]);
}//"Tom" "Y" "Lay"
forEach()遍历数组的浏览器;forEach()方法需要一个函数作为参数,像这种函数不需要调用的称为回调函数;数组中有几个元素函数就会执行几次,每次执行浏览器会将遍历到的元素以实参的形式传递进来,可以定义实参来读取这些内容。
浏览器会在回调函数中创建三个函数:
- 第一个参数(value),正在遍历的元素
- 第二个参数(index),正在遍历的元素的索引
- 第三个参数(obj),正在遍历的数组
var arr =["Tom","Sad","Lay"];
arr.forEach(function(value,index,obj){
console.log(value);//"Tom","Sad","Lay"分行
console.log(index);//"0" "1" "2"
console.log(obj);//"Tom,Sad,Lay"不分行
})
可以从一个数组中截取指定的元素;该方法不会影响原数组,而是将截取到的内容封装为一个新的数组并返回 参数:
- 截取开始位置的索引(包括开始位置)
- 截取结束位置的索引(不包括结束位置)
第二个参数可以省略不写,如果不写则一直截取到最后;参数可以传递一个负值,如果是负值,则从后往前计数
var arr = ["Tom","Sad","Lay","Cold","City"];
var result = arr.slice(1,2);//"Sad"
result = arr.slice(3);// "Cold,City"
result = arr.slice(1,-1);//"Sad,Lay,Cold"
console.log(result);
可以用来删除数组中指定元素,使用splice()会影响到原数组,会将指定元素从原数组中删除,并将删除的元素作为返回值 参数:
- 删除开始位置的索引
- 删除的个数
- 三个及以后,都是替换的元素,这些元素将会插入到开始位置索引的前边
var arr = ["Tom","Sad","Lay","Cold","City"]; arr.splice(0,2);//"Lay,Cold,City" var result = arr.splice(0,3);//"Tom,Sad,Lay" var result = arr.splice(1,0,"cc","zz");//"Tom,cc,zz,Sad,Lay,Cold,City" console.log(result); console.log(arr);
可以连接两个或多个数组,并将新的数组返回。该方法不会对原数组产生影响。
var arr = ["Tom","Sad"];
var arr2 = ["Lay","Cold"];
var arr3 = ["aa","bb"];
var result = arr.concat(arr2,arr3,"zz");
console.log(result);//"Tom,Sad,Lay,Cold,aa,bb,zz"
可以将一个数组转换为一个字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回。 参数: 需要一个字符串作为参数,这个字符串将会作为连接符来连接数组中的元素 如果不指定连接符则默认使用逗号(,)
var arr = ["Tom","Sad"];
var result = arr.join("@-@");
console.log(result);//"Tom@-@Sad"
可以用来反转一个数组,它会对原数组产生影响
var arr = ["Tom","Sad"];
var result = arr.reverse();
console.log(result); //"Sad,Tom"
可以对一个数组中的内容进行排序,默认是按照Unicode编码进行排序;调用以后,会直接修改原数组。 可以自己指定排序的规则,需要一个回调函数作为参数: 我们可以自己来指定排序的规则 我们可以在sort()添加一个回调函数,来指定排序规则, 回调函数中需要定义两个形参, 浏览器将会分别使用数组中的元素作为实参去调用回调函数 使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边 浏览器会根据回调函数的返回值来决定元素的顺序, 如果返回一个大于0的值,则元素会交换位置 如果返回一个小于0的值,则元素位置不变 如果返回一个0,则认为两个元素相等,也不交换位置 如果需要升序排列,则返回 a-b 如果需要降序排列,则返回 b-a
var arr = [5,4];
arr.sort(function(a,b){
//console.log("a = "+a);
/*"a = 5"
"b = 4"
"5,4"*/
//console.log("b = "+b);
return -1;//"5,4"
})
console.log(arr);
var arr2 = [2,6,8,4,1,3];
arr2.sort(function(a,b){
return a - b;//升序排列
});
console.log(arr2);//"1,2,3,4,6,8"
这两个方法都是函数对象的方法,需要通过函数对象来调用;当对函数调用call(),aplly()都会调用函数执行;在调用call(),apply()可以将一个对象指定为第一个参数;此时这个对象将会成为函数执行时的this;call方法可以将实参在对象之后依次传递;apply方法需要将实参封装到一个数组中统一传递。
this的情况:
- 以函数形式调用时,this永远都是window
- 以方法的形式调用时,this时调用方法的对象
- 以构造函数的形式调用时,this是新创建的那个对象
- 使用call和apply调用时,this时指定的那个对象
function fun(a,b){
console.log("a = "+a);
console.log("b = "+b);
alert(this);
}
var obj ={}
//fun.call(obj);//object object
//fun.apply(obj);//object object
//fun();//object window,区别在于指定对象不同
fun.call(obj,2,3);//"a = 2";"b = 3"
fun.apply(obj,[2,6]);//"a = 2";"b = 6"
arguments
在调用函数时,浏览器每次都会传递两个隐含的参数
- 函数的上下文对象this
- 封装实参的对象arguments
arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度;在调用函数时,所传递的实参都会在arguments中保存;arguments.length表示获取实参的长度;arguments[0]表示第一个参数,arguments[1]表示第二个参数;callee属性对应一个函数对象,就是当前正在指向的函数对象。
function fun(){
console.log(Array.isArray(arguments));//false
console.log(arguments.length);//2
console.log(arguments[0]);//1
console.log(arguments.callee);/*"function fun(){
console.log(Array.isArray(arguments));//false
console.log(arguments.length);//2
console.log(arguments[0]);//1
console.log(arguments.callee);
}"*/
console.log(arguments.callee == fun);//true
}
fun(1,2);
Date
日期的对象,在JS中通过Date对象来表示一个时间
//创建一个指定的时间对象
var d = new Date();
//指定 月/日/年 时:分:秒"
var d2 = new Date("05/02/2022 12:12:12");
console.log(d);//"Mon May 02 2022 16:29:23 GMT+0800 (中国标准时间)"
console.log(d2);//"Mon May 02 2022 12:12:12 GMT+0800 (中国标准时间)"
//getDate()获取当前日期对象是几日
var date = d2.getDate();
console.log("date = "+date);//"date = 2"
//getDay()获取当前对象是周几,返回0-6的值,0:周天
var day = d2.getDay();
console.log("day = "+day);//"day = 1"
//getMonth()会返回0-11的值表示当前时间对象的月份,0一月
var month = d2.getMonth();
console.log("month = "+month);//"month = 4"
//getFullYear()获取当前年份
var year = d2.getFullYear();
console.log(year);//"2022"
/*getTime()获取当前时间戳,
指从格林威治时间的1970年1月1日0时0分0秒
到当前所花费的毫秒数(1秒=1000毫秒);计算机底层保存时间使用时间戳*/
var time = d2.getTime();
console.log(time/1000/60/60/24/365);
//利用时间戳来测试代码的执行性能
var start = Date.now();//获取当前的时间戳
for(var i = 0;i < 1000;i++){
console.log(i);
}
var end = Date.now();
console.log("执行了"+(end-start)+"毫秒");//"执行了141毫秒"
Math
Math和其他的对象不同,不是一个构造函数;属于一个工具类,不需要我们创建对象,它里边封装了属性运算相关的常量和方法;我们可以直接使用它来进行数学运算相关的操作
console.log(Math.PI);//"3.141592653589793"
console.log(Math.abs(-6));//6
//自动向上取整,小数位只要有值就自动进一
console.log(Math.ceil(1.2));//2
//自动向下取整,小数部位会舍掉
console.log(Math.floor(1.99));//1
//四舍五入取整
console.log(Math.round(1.5))//2
//可以生成一个0-1之间的随机数
console.log(Math.random());//"0.22543523949570954"
/*生成0-x之间的随机数Math.round(math.random()*x)
生成x-y之间的随机数(Math.round(math.random()*(y-x)+x)*/
for(var i = 0;i<100;i++){
console.log(Math.round(Math.random()*10))//0-10之间的数
console.log(Math.round(Math.random()*8)+2)//2-10之间的数
}
var max = Math.max(2,3,4);//最大值
var min = Math.min(5,6,7);//最小值
console.log(max);//4
console.log(Math.pow(2,4));//返回x的y次幂,16
console.log(Math.sqrt(9));//开方运算,3
包装类
在JS中为我们提供了三个包装类:通过这三个包装类可以创建基本数据类型的对象
- String():将基本数据类型转换为String对象
- Boolean():将基本数据类型转换为Boolean对象
- Number():将基本数据类型转换为Number对象
但是注意我们在实际应用中不会使用基本数据类型的对象。当我们去操作一个基本数据类型的属性和方法时,解析器会临时将其转换为对应的包装类,然后再去操作属性和方法,操作完成以后再将这个临时对象进行销毁。
//都转换为了对象
var num = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
var s = 123;
s = s.toString();
console.log(s);//"123"
console.log(typeof s);//"string",调用是number
字符串方法
创建字符串时,底层字符串是以字符数组的形式保存的["H","e","l"]。
var str = "Hello";
console.log(str.length)//"5",字符串长度
console.log(str[2]);//"l"
//charAt()根据索引获取指定的字符,根据索引获取指定的字符
var result = str.charAt(0);
var result = str[4];//"o"
console.log(result);//"H"
//charCodeAt()根据索引获取指定的字符编码(Unicode编码)
var result = str.charCodeAt(0);
console.log(result);//"72"
//String.fromCharCode()根据字符编码获取字符
var result = String.fromCharCode(72);
console.log(result);//"H"
//concat()用来连接两个或多个字符串,作用和+一样
var result = str.concat("你好","再见");
console.log(result);//"Hello你好再见"
indexOf()是从前向后找;lastIndexOf()是从后向前找 从一个字符串中检索指定内容,需要一个字符串作为参数,这个字符串就是要检索的内容, 如果找到该内容,则会返回其第一次出现的索引,如果没有找到则返回-1。可以指定一个第二个参数,来表示开始查找的位置
var str = "hello atguigu"
result = str.indexOf("e",2);//"-1"
console.log(result);//值为"e"时为"1"
result = str.lastIndexOf("u");
console.log(result);//"0"
slice(start,[end]) 可以从一个字符串中截取指定的内容,并将截取到内容返回,不会影响原变量 参数:
- 第一个:截取开始的位置(包括开始)
- 第二个:截取结束的位置(不包括结束)
可以省略第二个参数,如果省略则一直截取到最后;可以传负数,如果是负数则从后往前数 substring()和slice()基本一致,不同的是它不能接受负值作为参数,如果设置一个负值,则会自动修正为0,substring()中如果第二个参数小于第一个,自动调整位置,则会自动交换 substr()和slice()基本一致,不同的是它第二个参数不是索引,而是截取的数量
var str = "zxcvb";
result = str.slice(1,-2);
console.log(result);//"xc"
result = str.substring(1,-1);//等价于(0,1)
console.log(result);//"z"
result = str.substr(3,2);
console.log(result);//"vb"
split:可以将一个字符串拆分为一个数组,参数:需要一个字符串作为参数,将会根据字符串去拆分数组,如果传递一个空串作为参数,则会将每个字符串都会拆分为数组中的一个元素。toLowerCase();将字符串转换为小写并返回 toUpperCase();将字符串转换为大写并返回
var str = "abc bcd efg hij";
result = str.split(",");
console.log(Array.isArray(result));//true
console.log(result[2]);//"efg"
result = str.split("");//"a,b,c, ,b,c,d, ,e,f,g, ,h,i,j"
console.log(result);
str = "abcdef";
result = str.toUpperCase();
console.log(result);// "ABCDEF"
正则表达式
正则用来定义一些字符串的规则,程序可以根据这些规则来判断一个字符串是否符合规则, 也可以将一个字符串中符合规则的内容提取出来。var reg = new RegExp(“正则”,”匹配模式”);这个正则表达式可以检查一个字符串是否有a 第二个参数(匹配模式):
- i:忽略大小写(ignore)
- g:全局匹配模式(默认为1次)设置匹配模式时,可以都不设置,也可以设置1个,也可以全设置,设置时没有顺序要求
var reg = new RegExp("a","i");
var str = "a";
console.log(reg);// "/a/"
console.log(typeof reg);//"object"
/*test()可以用来检查一个字符串是否符合正则表达式
如果符合返回true,否则返回false*/
var result = reg.test(str);
console.log(reg.test("hbd"));//false
console.log(reg.test("Abd"));//true
正则语法
使用字面量来创建正则表达式。语法:var 变量 = /正则表达式/匹配模式。使用字面量的方式创建更加简单,使用构造函数创建更加灵活。
var reg = new RegExp("a","i");//查找a忽略大小写
reg = /a/i;//和上面一样
console.log(typeof reg);//object
console.log(reg.test("abc"))
/*创建一个正则表达式,检查一个字符串中是否有a或b;
使用 | 表示或者的意思;
[]里的内容也是或的关系[ab]==a|b
[a-z]任意小写字母 [A-Z]任意大写字母
[A-z]任意字母 [0-9]任意数字*/
reg = /a|b/;//reg = /[A-z]/;
console.log(reg.test("asd"));//true
/*检查字符串是否含有abc或adc或aec*/
reg = /a[bdc]c/;
console.log(reg.test("adc"));//true
//[^ ]除了
reg = /[^ab]/
console.log(reg.test("abc"));//true
字符串和正则表达式的相关方法
split() 可以根据指定内容将一个字符串拆分为一个数组 参数: 需要一个字符串作为参数,将会根据字符串去拆分数组 可以接收一个正则表达式,此时会根据正则表达式去拆分数组
search() 可以搜索字符串中是否含有指定内容 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1 它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
match() 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来 默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索 我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容 可以为一个正则表达式设置多个匹配模式,且顺序无所谓
replace() 可以将字符串中指定内容替换为新的内容 参数: 1.被替换的内容,可以接受一个正则表达式作为参数 2.新的内容,空串则为删除””
var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);//"1,2,3,4,5,6,7"
str = "hello abc"
result = str.search("abc");
console.log(result);//"6"
//搜索字符串是否含有abc或aec或afc
result = str.search(/a[bef]c/);
console.log(result);//"6"
str = "1a2b3c4d5e6f7A8B";
result = str.match(/[a-z]/gi);//即全局又忽略大小写
console.log(result);//"a,b,c,d,e,f,A,B"
console.log(Array.isArray(result));//返回是一个数组
result = str.replace("a","-@-");
console.log(result);//"1-@-2b3c4d5e6f7A8B"
result = str.replace(/[a-z]/gi,"");
console.log(result);//"12345678"
正则表达式语法
量词 通过量词可以设置一个内容出现的次数;量词只对它前边的一个内容起作用 {n} 正好出现n次 {m,n} 出现mn次 {m,} m次以上 +至少一个,相当于{1,} *个或多个,相当于{0,} ? 0个或1个,相当于{0,1}
var reg = /a{3}/;
console.log(reg.test("aaabc"));//"true";
reg = /(ab){3}/;
console.log(reg.test("ababab"));//"true"
reg = /ab{1,3}c/;
console.log(reg.test("abbbbc"));//"false"
reg = /ab{3,}c/;
console.log(reg.test("abbbbbc"))//"true",有c为true,无c为false
reg = /ab+c/;
console.log(reg.test("abc"))//true
reg = /ab*c/;
console.log(reg.test("ac"));//true
reg = /ab?c/;
console.log(reg.test("abc"));//true
// ^ 表示开头
reg = /^a/;
console.log(reg.test("asd"));//true
//$结尾
reg = /a$/;
console.log(reg.test("asd"));//false
//如果同时使用^ $要求字符串必须完全符合正则表达式
reg = /^a$/;//==/a/
console.log(reg.test("a"));//true
检查一个字符串中是否含有 . . 表示任意字符 在正则表达式中使用\作为转义字符 \. 来表示. \\ 表示\ \w [A-z0-9_] \W [ ^A-z0-9_] \d 任意的数字 [0-9] \D 除了数字 [ ^0-9] \s 空格 \S 除了空格 \b 单词边界 \B 除了单词边界
var reg = /\./;
console.log(reg.test(","))//false
reg = /\\/;
console.log(reg.test("b.\\"))//在打印时候也会转换\\变为\
/*注意,使用构造函数时由于它的参数是一个字符串,而\是字符串中转义字符;
如果要使用\则需使用\\来代替;字面量中用\构造函数中用两个\\*/
reg = new RegExp("\\.")
console.log(reg);//"/\./"
//创建正则表达式检查字符串是否含有单词child
reg = / hello \bchild\b/;//表示是一个独立的单词
console.log(reg.test("childen"));//"false"
//去除开头和结尾的空格
str = " he llo "
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);// "he llo"
邮件的正则
/*电子邮件
hello . nihao @ abc .com.cn
任意数字字母下划线 . 任意数字字母下划线 @. 任意字母数字 任意字母2-5位.任意字母2-5位
\w{3,} (\.\w+)* @ \. [A-z0-9]+ ([A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc@abc.com";
console.log(emailReg.test(email));//true