5.JS中的内置对象
1.String对象
- 定义方式:
//String 对象 用于处理文本(字符串)
//创建String对象的语法:new String(s) 或者String(s)
//创建String对象 方式1
//当String()和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String对象,
//存放的字符串s或者s的字符串表示。
var s=new String("abc"); //创建出一个String的对象
//方式2 当不用new运算符调用String()时,它只把s 转换成原始的字符串,并返回转换后的值。
var s2=String("你好"); //返回的是一个原始的字符串
alert(typeof s); //object
alert(typeof s2); //string
//instanceof 判断一个引用(对象)是不是该类的一个引用.
alert(s instanceof String); //true
alert(s2 instanceof String); //false
//最简便的定义字符串的方式
var str="hehe";
-
属性:length: 字符串的长度
// length属性 可以遍历字符串长度
var len=“hehehe”.length; -
方法:
charAt()返回在指定位置上的字符
charCodeAt()返回在指定的位置的字符的Unicode编码
concat()连接字符
indexOf()检索字符 检索不到就返回-1
replace()匹配与正则表达式匹配的子串
slice()提取字符串的片断,并在新的字符串中返回别提取的部分
substr()从起始检索号提取字符串指定数目的字符 可传负值
substring()提取字符串中两个指定的索引号之间的字符
toLowerCase()把字符串转换为小写
toUpperCase()把字符串转换为大写
trim() 去除两端空格
trimLeft() 去除左端空格
trimRighht() 去除右端空格
//遍历字符串
var str="返回在指定位置上的字符";
//反转字符串
var s3='';
for (var i = str.length-1; i >=0; i--) {
var ch=str.charAt(i);
s3+=ch;
}
document.write(s3);
2.Number对象
-
定义方式:
var num=new Number(555.6666);
var num1=Number(5694); -
方法:
toString() 把数字类型转成字符串类型
例子:
var v=Number(695444);
var z=v.toString();
toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位
例子:
var v=Number(3.5999999999999);
var z=v.toPrecision(4);//把字符串的100转换成数字的100 var s="100"; //s=+"100"; //s=s*1;//乘1最简便 /* Number 对象 Number 对象是原始数值的包装对象。 创建 Number 对象的语法: var myNum=new Number(value); var myNum=Number(value);参数 参数 value 是要创建的 Number 对象的数值,或是要转换成数字的值。 返回值 当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象。 如果不用 new 运算符,把 Number() 作为一个函数来调用, 它将把自己的参数转换成一个原始的数值,并且返回这个值(如果转换失败,则返回 NaN)。 */ //和java中 Integer Double 很像 var n=new Number(100); var n1=new Number("100"); alert(n+n1); var n2=new Number(3.14); var n3=new Number("3.122"); alert(n2+n3); var n4=Number(300); alert(typeof n4); //Number alert(typeof n1); //object alert(n4 instanceof Number); //false alert(n1 instanceof Number); //true var n5=Number("100ab");//转换不过来,就转换成NaN alert(n5); //对象属性: //MAX_VALUE 可表示的最大的数。 它的近似值为 1.7976931348623157 x 10308 //MIN_VALUE 可表示的最小的数 它的近似值为 5 x 10-324 alert(Number.MAX_VALUE); alert(Number.MIN_VALUE); //对象方法 //toFixed 保留小数点后面的位数 把数字转换为字符串,结果的小数点后有指定位数的数字。 //toString 把数字转换为字符串,使用指定的基数。 var n7=new Number(3.1449944444444); //保留小数点后面的位数,会自动四舍五入,返回的是字符串类型 var s=n7.toFixed(4); alert(s); //toPrecision 把数字格式化为指定的长度。返回的是字符串类型 //但它是将整数和小数一起算起来第几位 var s1=n7.toPrecision(4); alert(s1);
3.Date对象
- 定义方式: var myDate=new Date();
- 方法:
getTime() 获取从1970-01-01 00:00:00 到当前的毫秒值
toLocaleString() 将时间转化成本地格式 利于阅读
例子
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();
<script type="text/javascript">
/* 1.Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法:
var myDate=new Date()注释:Date 对象会自动把当前日期和时间保存为其初始值。 */
var myDate=new Date();
//2.Date 对象方法
//Date() 返回当日的日期和时间。 1 3
//getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 1 3
//getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 1 3
//getMonth() 从 Date 对象返回月份 (0 ~ 11)。
//getFullYear() 从 Date 对象以四位数字返回年份。
var year=myDate.getFullYear();
var m=myDate.getMonth();//从0开始
var d=myDate.getDate();
var h=myDate.getHours();
var mm=myDate.getMinutes();
var ss=myDate.getSeconds();
alert(year);
alert(m);
alert(d);
alert(h);
alert(mm);
alert(ss);
var datestr=year+"年"+m+"月"+d+"日"+h+"时"+mm+"分"+ss+"秒";
alert(datestr);
//格式化日期
//toTimeString() 把 Date 对象的时间部分转换为字符串。
//toDateString() 把 Date 对象的日期部分转换为字符串。
//toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串
var s=myDate.toTimeString();//16:27:05 GMT+0800(中国标准时间)
var s1=myDate.toDateString();//Thu Nov 12 2020
var s2=myDate.toLocaleString();//2020年11月12日 16:27:05
alert(s);
alert(s1);
alert(s2);
</script>
当然可以使用第三方的js文件来处理日期:
<!-- 引入处理日期的第三方文件 -->
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//可以从网页的moment.js里面看规则
var datestr=moment().format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>"+datestr+"</h1>");//2020-11-12 17:10:19
var date=new Date();
//获取从1970年到现在所间隔的毫秒值
var time=date.getTime();
//alert(time);
//把毫秒值转换成年月日时分秒 字符串
var datestr1=moment(time).format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>"+datestr1+"</h1>");
//把年月日时分秒 字符串转换毫秒值 unix
var a=moment('2020-11-12 17:10:19').unix();
alert(a); //1605172219
//把年月日时分秒 字符串转换moment对象
var now='2017-12-12 00:00:00';
var moment=moment(now,'YYYY-MM-DD HH:mm:ss');
alert(moment);//Tue Dec 112 2017 00:00:00 GMT+0800;
//然后就可以调用moment中的方法
//加一天 moment.add(1,'d');
var v=moment.add(1,'d');
alert(v);
//这个月第一天 moment.startOf('month');
var v1=moment.startOf('month');
alert(v1);
</script>
4.Mate对象
特点: 该对象不需要创建 直接对象名点上方法
Math.random();随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整
<script type="text/javascript">
//Math 对象
//Math 对象用于执行数学任务。
//使用 Math 的属性和方法的语法:
//var pi_value=Math.PI;
//var sqrt_value=Math.sqrt(15);注释:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。
//您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
//Math属性
//PI 返回圆周率(约等于3.14159)。
var pi_value=Math.PI;
//math 方法
/* random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
abs(x) 返回数的绝对值。
floor(x) 对数进行下舍入。
ceil(x) 对数进行上舍入。 */
//想要获取1-100之间的随机整数
//int num=(int)(Math.random()*100+1);java中的格式
//js中就是向下取整
for (let i=1; i <=1000; i++) {
var num=Math.random()*100+1;
num=Math.floor(num);
document.write(num);
document.write("<br>");
}
//随机生成4位验证码
var str="0132353656666dkjkfpkd";
//生成4个随机索引
var code='';
for (var i = 1; i <=4; i++) {
var index=Math.floor(Math.random()*str.length);
var ch=str.charAt(index);
code+=ch;
}
alert(code);
</script>
5.数组对象
-
定义方式: var arr=new Array(2,6,8);
var arr1=[6,“a”,6]; -
属性: length 数组的长度
-
特点:
- 在js中数组可以存储任意类型元素
- 在js中数组的长度可变
<script type="text/javascript">
//JS中的数组对象 Array
/* 1.JS中的数组特点 :
数组的长度是可变的,即不用指定长度.
数组中可以存储多种数据类型的元素.
其实JS中的数组,更像我们java中的List集合 */
//2.创建对象的方式
//Array 对象用于在单个的变量中存储多个值。
/* new Array();
new Array(size);
new Array(element0, element1, ..., elementn); */
//方式1:
var arr=new Array();
//赋值:
arr[0]=10;
arr[1]=100;
alert(arr[0]);
alert(arr[6]);//取不到元素 不会角标越界 而是undefined
//方式2:可以指定数组的长度,但是超过了指定长度也没关系,没有数组角标越界一说。
var arr1=new Array(3);
//3.length 设置或返回数组中元素的数目。
alert(arr1.length);
//方式3:创建数组的同时,就可以给数组添加元素了
var arr2=new Array(1,'abc',false,true,3.23);
//方式4 简写方式
var arr3=[100,200,300,400];
</script>
-
方法:
concat() 连接两个或更多的数组,并返回结果。
例子:var v=[1,2]; var v2=[3,4];
var z=v.concat(v2);
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var v=[1,2,3];
var z=v.join("-"); 给数组元素之间添加分隔符
pop() 删除并返回数组的最后一个元素
例子:
var arr = [1, 6, 20];
alert(arr.pop());
push() 向数组的末尾添加一个或更多元素,并返回新的数组长度。
例子:var arr = [1, 6, 20];
alert(arr.push(28));reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序 从小到大
默认排序方式:字典顺序,要想实现自己的比较方式,需要传入比较器方法对象
例子:var arr = [1, 6, 20, 100];
alert(arr.sort(bijiao));function bijiao(a, b) {
if(a > b) {return 1;
} else if(a == b) {
return 0;
} else {
return -1;
}
//return a-b;}
遍历数组:
<script type="text/javascript">
//JS中的数组对象 ArrayArray 对象方法
var arr=new Array();
//arr[0]=112; 通过脚表来添加元素
//1.push() 向数组的末尾添加一个或更多元素,并返回新的长度。
var len= arr.push(20,330,34);
var len= arr.push('ab');
alert(arr);//20,330,34,ab
alert(len);//4
//2.unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
arr.unshift(100,122);
alert(arr);//100,122,20,330,34,ab
//3.concat() 连接两个或更多的数组,并返回结果。
var arr2=[13,55,56];
var arr3=[43,545,6];
var arr4=arr2.concat(arr3);
alert(arr4);
//4.join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var s=arr4.join("-");
alert(s);//"13-55-56-43-545-6"
var s1=arr4.join("");
alert(s1);//"1356435456"
//5.pop() 删除并返回数组的最后一个元素
var arr5=[43,545,6,8];
var ele=arr5.pop();
alert(arr5);//43,545,6
alert(ele);//8
//6.shift() 删除并返回数组的第一个元素
var ele2=arr5.shift();
alert(arr5);
alert(ele2);//43
//6.splice() 删除元素,并向数组添加新元素。
var arr=[200,52,96,56,74];
//arr.splice(1);//从1索引开始删除后面所有的元素
//arr.splice(1,1);//从1索引开始删除后面1个元素 删除几个自己指定
//alert(arr);//200,96,56,74
arr.splice(1,1,2.31);//从1索引开始删除后面1个元素 并把2.31或者更多元素替换被删位置
alert(arr);//200,2.31,96,56,74
//7.reverse() 颠倒数组中元素的顺序。
arr.reverse();
alert(arr);
//8.slice() 从某个已有的数组返回选定的元素
//根据起始索引截和终止索引截取数组中的元素,放到一个新数组当中
var arr2=[200,300,400,500,600];
var newarr=arr2.slice(1,4); //含头不含尾
alert(newarr); //[300,400,500]
//排序 sort
var arr3=[21,1,52,6,35,89];
arr3.sort();//默认是按照字典顺序排的,么有按照元素的大小来排序
alert(arr3);//1,21,35,52,6,89
var arr4=[21,1,52,6,35,89];
//如果你要按照元素的大小来排序,得传入一个比较函数
var bjq=function(a,b){
return a-b;
}
arr4.sort(bjq);
alert(arr4);//1,6,21,35,52,89
/*
匿名函数 可以作为参数传递
function(a,b){
return a-b; //
} */
arr4.sort(function(a,b){
return a-b;
})
alert(arr4);//1,6,21,35,52,89
</script>
- 二维数组:
<script type="text/javascript">
//JS中的数组对象 ArrayArray 对象方法
//定义二维数组
var arr=new Array();
var arr1=new Array(20,30,40);
var arr2=new Array(200,300,400);
var arr3=new Array(2000,3000,4000);
//arr 这个时候就是二维数组
//用push或者角标给都可以
arr.push(arr1,arr2,arr3);
//arr[0]=arr1;
//arr[1]=arr2;
//arr[2]=arr3;
//遍历二维数组
for (var i = 0; i <arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
alert(arr[i][j]);
}
}
//定义二维数组的简便方法
var arr2=new Array([20,30],[2,3],[4,5]);
for (var i = 0; i <arr2.length; i++) {
for (var j = 0; j < arr2[i].length; j++) {
alert(arr2[i][j]);
}
}
//定义二维数组的简便方法
var arr3=[[20,30],[1,3],[4,5]];
for (var i = 0; i <arr3.length; i++) {
for (var j = 0; j < arr3[i].length; j++) {
alert(arr3[i][j]);
}
}
</script>
-
补充 es6新增 关于数组方法
every() 检测数值元素的每个元素是否都符合条件。
filter() 检测数值元素,并返回符合条件所有元素的数组。
forEach() 数组每个元素都执行一次回调函数。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
reduce() 将数组元素计算为一个值(从左到右) //补充 es6新增 关于数组方法 在菜鸟教程上找到
//every() 检测数值元素的每个元素是否都符合条件。
/* filter() 检测数值元素,并返回符合条件所有元素的数组。
forEach() 数组每个元素都执行一次回调函数。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
reduce() 将数组元素计算为一个值(从左到右)。 /
var arr=[10,20,30,40,50,5,1];
//判断数组中的元素是不是都是偶数,这个时候要引入函数
/ function checkAdult(age) {
return age >= 18;
}*/
var f=arr.every(function(ele){
return ele%2==0;
})
alert(f);//false
var arr1=[10,20,30,40,50,5,1,3,7];
//把数组的偶数过滤出来
var newarr=arr1.filter(function(ele){
//return false; 返回true说明元素符合条件,会过滤到新数组里面,返回false说明不符合条件,那就不要
return ele%2==0;
})
alert(newarr);//10,20,30,40,50
//遍历数组
arr1.forEach(function(ele,index){
alert(index+"=="+ele);
})
var arr2=[10,20,30,40,50,5,12];
//把数组中的每一个元素进行平方的一个人运算
//提取数组中的每一个元素,应用到一个新的函数上,返回处理后的结果数组
var newArr=arr.map(function(ele){
//return ele*ele;
return Math.pow(ele,2);
});
alert(newArr);
//累加数组中的每一个元素
//除了total,ele 也可以加index 还有arr以及初始值}里面)
var arr3=[10,20,30,40,50,5,12,89,7,6,223];
var sum=arr3.reduce(function(total,ele){
return total+ele;
},0);//这个0是初始值 可省略
alert(sum);//492
</script>
6.Global:全局方法对象
-
特点:该对象中的方法调用,不需要对象的引用,可直接使用
- isNaN() 检查某个值是否是NaN。
例子:var v=NaN; var v1=“abc”; var v2=123;
var b=isNaN(v);
var b1=isNaN(v1);
var b2=isNaN(v2); - parseInt() 解析一个字符串并返回一个整数。
- isNaN() 检查某个值是否是NaN。
从左向右依次查找,每一位是否是数字,直到遇到不是数字为止。将前边的值转为数字比正号强大些 var v=+“123”;
例子:
var v=“152abc”
var v=“123”;
var z=parseInt(v)+1;
<script type="text/javascript">
//全局对象中的方法直接调用就行
//isNaN() 检查某个值是否是数字。
alert(NaN==NaN);//用=判断不出来 因为永远是false
//可使用方法来判别
var v=isNaN(NaN);
alert(v);
var v1=isNaN(25*"abc");
alert(v1);
//把一个字符串转换成数字
//parseFloat() 解析一个字符串并返回一个浮点数。
//parseInt() 解析一个字符串并返回一个整数。
var n=+"100";
var n1="100"*1;
var n2=Number("100");
//可以使用方法来转换
var n3=parseInt("100");//方法比较智能一些 如果字母在数字的最后或中间 也可以转换成数字,但在开头不可以
var n4=parseFloat("3.22");
</script>
编解码
<script type="text/javascript">
//decodeURIComponent() 解码一个编码的 URI 组件。
//encodeURIComponent() 把字符串编码为 URI 组件。
//浏览器地址会对其中的中文进行URL的编码 即中文变成带百分号的
var str="http://127.0.0.1:8848/js%E4%BB%A5%E5%8F%8A%E4%BB%A5%E5%90%8E%E7%9A%84%E7%9F%A5%E8%AF%86%E7%AC%94%E8%AE%B0%20%20%202020-10-24/js%E7%AC%94%E8%AE%B0.html"
//对中文进行URL编码
var v=encodeURIComponent("张三");
alert(v);//%E5%BC%A0%E4%B8%89
//进行解码
var name=decodeURIComponent(v);
alert(name);
</script>
//全局变量
<body>
<a href="b页面.html?username=王五&password=123">进入b页面</a>
<!-- http://127.0.0.1:8848/js%E4%BB%A5%E5%8F%8A%E4%BB%A5
%E5%90%8E%E7%9A%84%E7%9F%A5%E8%AF%86%E7%AC%94%E8%AE%B0%20
%20%202020-10-24/b页面.html?username=王五&password=123 -->
<!-- http://127.0.0.1:8848/js以及以后的知识笔记 2020-10-24
/b页面.html?username=王五&password=123 -->
</body>
//另一个html文件 b页面
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//URL 返回当前文档的 URL。
//定义和用法URL 属性可返回当前文档的 URL。
//语法
//document.URL
var url=document.URL;
document.write(url);
url=decodeURIComponent(url);
document.write("<br >");
document.write(url);
</script>
</head>
<body>
</body>
</html>
7…RegExp(**):正则表达式对象
位置:
^ 开头
$ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除’\n’外)
组合:
[a-z]
[0-9]
等
组:
(正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
// 方式一
var regex = new RegExp(“正则表达式”, “标志”);
// 方式二
var regex = /正则表达式/标志
参数说明:
正则表达式:
参见上面的规则
标志:
g (全文查找出现的所有 pattern)
i (忽略大小写)
方法:
Regexp.test( str )
String.replace( regex, str )
正则表达式对象常用的方法:
test() 使用正则对象去匹配字符串 如果匹配成功返回ture,否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。
模式:
g (全文查找出现的所有 pattern)
i (忽略大小写)
var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗?"+reg.test(str));
查找出三个字符组成的单词。
var str =“da jia hao hao xue xi a”;
var reg = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
document.write(line+"")
}
<script type="text/javascript">
//1.正则表达式运算
/* RegExp 对象
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
直接量语法
/pattern/attributes创建 RegExp 对象的语法:
new RegExp(pattern, attributes); */
//创建 正则表达式的方法1
var regx=new RegExp('[a-z]+','i');
//创建 正则表达式的方法2
//var regx2=/[a-z]/i;
//2.正则表达式匹配
var str = "hello123";
/* var reg = /[A-Z0-9]+/;
//test()用来匹配正则
var flag=reg.test(str);
alert(flag);//true 这是因为他属于局部匹配123属于0-9 */
var reg = /^[A-Z0-9]+$/;//应该加上开头和结尾
var flag=reg.test(str);
alert(flag);//false
var reg = /^[A-Z0-9]+$/i;//i是不区分大小写
//var reg=new RegExp('^[A-Z0-9]+$','i');;
var flag=reg.test(str);
alert(flag);//true
//3.查找出三个字符组成的单词。
var str1 ="da jia hao hao xue xi a";
var regx1 = /\b[a-z]{3}\b/gi;//\b 匹配单词边界。{3}是个数 g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
//exec 检索字符串中指定的值。返回找到的值,并确定其位置。
var s=regx1.exec(str1);
alert(s);
s=regx1.exec(str1);
alert(s);
</script>
支持正则表达式的 String 对象的方法
//4.支持正则表达式的 String 对象的方法
/* search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。 */
var str2="dkklk=lllklk=klskj";
//根据普通的字符串来切割
var arr=str2.split("=");
//根据正则表达式切割
var arr=str2.split(/=/);
alert(arr);//dkklk,lllklk,klskj
var str3="dkklk=lllklk=klskj";
//把=替换成#
/* var nerstr=str3.replace("=","#");
document.write(nerstr);//dkklk#lllklk=klskj 没有全文匹配 */
/* 说明:
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。
它将在 stringObject 中查找与 regexp 相匹配的子字符串,
然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,
那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。 */
//根据正则表达式替换 g全局替换
var nerstr=str3.replace(/=/g,"#");
document.write(nerstr);//dkklk#lllklk#klskj
var str4="Hello world!";
document.write(str4.match("world")+"<br />")//world
document.write(str4.match("world!"))//world!
var str5="1 plus 2 equal 3";
//返回的是一个数组
var ss=str5.match(/\d+/g); //d数字 根据正则表达式 找到符合的放在数组中
document.write(ss);//1,2,3
var str6="Visit W3School";
document.write(str6.search(/W3School/));//6
document.write("<hr />");
var index=str6.indexOf("W3School");
document.write(index);//6
8.boolean
var f=new Boolean(false);
//把字符串的true转换成布尔类型的true
var f1=new Boolean("true");
alert(f1);