版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80726098
String对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--String高级用法</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
//construcor属性
var str = new String("abc123");
println(str.constructor); //类似于Java中的instanceof
if (str.constructor == String){ //Java的写法: str instanceof String
println("一个String实例");
}
</script>
<h3>prototype属性的引例:为String对象添加一个trim()方法 </h3>
<script type="text/javascript">
//※独立的方法: trim(str)
function trim(str){ //去除str两端的空格
var start=0;//第一个非空格字符的位置
var end=str.length-1;//最后一个非空格字符的位置
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
var str = " abc 123a ";
alert("--"+str+"--");
alert("--"+ trim(str) +"--");
</script>
<script type="text/javascript">
//通过对象的prototype属性可以为它添加变量与方法
/*给原型对象(js已经创建好的String,Array,Date,Number这些)
添加变量或函数之后，所有的克隆体(我们声明与创建的对象)都有了。*/
//1 添加变量
String.prototype.ab = 100; //类似于在Java的类模板中添加变量
println("ab:"+ "abc".ab);
String.prototype.x=3.14;
println("x:"+"aa".x);
//2 添加函数
function aa(){
alert("1111111....");
}
String.prototype.aa = aa; //把一个函数引用赋给原型对象
"abcd".aa();
//匿名函数的方式添加
String.prototype.ff=function(){
alert("222222222...");
};
"abc".ff();
</script>
<script type="text/javascript">
//※把trim方法融入到String对象中: str.trim()---代码已经移植到tools.js中了
var str2 = " dddd 123dd ";
alert("--"+str2.trim()+"--");
alert( str2.trim().toCharArray() );
alert( str2.trim().reverse() );
</script>
</body>
</html>用到的tools.js
function print(str){
document.write(str);
}
function println(str){
document.write(str+"<br/>");
}
///////通过prototype属性扩展js API的对象的功能/////////
//※把trim方法融入到String对象中: str.trim()
String.prototype.trim = function(){
var start=0;//第一个非空格字符的位置
var end=this.length-1;//最后一个非空格字符的位置
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
};
//给String对象添加一个toCharArray()方法
String.prototype.toCharArray = function(){
var chs=[];
for(var x=0;x<this.length;x++){
chs[x]=this.charAt(x);
}
return chs;
};
//给String对象添加一个reverse()方法
String.prototype.reverse = function(){
//函数内部可以再定义函数----Java做不到
function swap(arr,start,end){
var temp=arr[start];
arr[start]= arr[end];
arr[end] = temp;
}
var arr = this.toCharArray();
for(var start=0,end=arr.length-1; start<end; start++,end--){
swap(arr,start,end);
}
return arr.join("");
};
String.prototype.compareTo=function(str){
if(typeof(str)!="string"){
return 1;
}
var len1=this.length;
var len2=str.length;
var shortLen=len1>len2?len2:len1;
var longLen=len1>len2?len1:len2;
for(var i=0; i<shortLen; i++){
if(this.charAt(i)!=str.charAt(i)){
return this.charAt(i)-str.charAt(i);
}
}
if(len1>len2){
return 1;
}else if(len1<len2){
return -1;
}else{
return 0;
}
};
//为数组对象的shift()和unshift()函数取两个我们习惯的别名
Array.prototype.removeFirst=function(){
return this.shift();
};
Array.prototype.addFirst=function(e){
return this.unshift(e);
};
Array.prototype.addLast=function(e){
return this.push(e);
};
Array对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Array对象</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
//js中只有一个容器----Array
var arr =["ccc","aaa","ddd","opq","bbb"];
var arr2 =[1,2,3,4,5];
println(arr);
println(arr2);
//concat()方法：连接两个或更多的数组，并返回结果。---现场保护方式
var newArr = arr.concat(arr2);
println(arr);
println(newArr);
//join()方法：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
println( newArr ); //toString()，相当于join()
println( newArr.join() ) ; //空参方法，用“,”作为分隔符
println( newArr.join(",") );
//以上三行功能一样
println( newArr.join("-*") ); //自己指定元素之间的分隔符
println( newArr.join("") ); //自己指定元素之间的分隔符(这里为"没有分隔符")
println("<hr/>");
//pop()方法：删除并返回数组的最后一个元素
println( arr );
var lastE = arr.pop();
println(lastE);
println( arr );
//push()方法：addLast(), 向数组的末尾添加一个或更多元素，并返回新的长度。
var len = arr.push("Jack",20,"Male");
println( len );
println( arr );
//reverse(): 颠倒数组中元素的顺序。 ---原地修改
arr.reverse();
println(arr);
//shift(): removeFirst(), 删除并返回数组的第一个元素
var firstE = arr.shift();
println(firstE);
println(arr);
//unshift(): addFirst(), 向数组的开头添加一个或更多元素，并返回新的长度。
arr.unshift(66);
println(arr);
arr.addLast(9);
arr.addFirst(3.14);
println(arr);
//slice(): slice(start,end) 参数为负数时是倒数的意思
println( arr.slice(2, 4) ); //把[2,4)范围内的元素返回出来,,现场保护方式---该方法并不会修改数组，而是返回一个子数组。
println( arr.slice(-4, -2)); // [倒数第4个 , 倒数第2个)
println( arr.slice(-3) ); //[倒数第3个，末尾]
//sort(): 对数组的元素进行排序, sort( cmpFun )
arr.sort();
println(arr);
//自定义排序----所有字符串都比数字小，然后字符串与数字自身的比较规则为小的在前
arr.sort( function(a,b){
if(typeof(a)=="number"){
if(typeof(b)=="string"){
return 1;
}else if(typeof(b)=="number"){
return a-b;
}
} else if( typeof(a)=="string"){
if(typeof(b)=="number"){
return -1;
}else if(typeof(b)=="string"){
return a.compareTo(b);
}
}
});
println(arr); //Jack,aaa,ccc,ddd,opq,3.14,9,20,66
//splice()方法： 向/从数组中添加/删除项目，然后返回被删除的项目。
var temp = arr.splice(1, 3, "france",2,1,"australia"); //从位置1开始删除3个元素，并在删除位置添加:"france",2,1,"australia"
println(temp); //aaa,ccc,ddd
println( arr ); //Jack,"france",2,1,"australia",opq,3.14,9,20,66
//toSource()方法： 返回对象的源代码
</script>
<hr/>
<script type="text/javascript">
//一点小细节: concat()和 push()的区别
var arr =["ccc","aaa","ddd","opq","bbb"];
var arr2 =[1,2,3,4,5];
var arr3 =["Jack",20,"Male"];
//分别把arr2和arr3中的元素一个个取出来加到arr的末尾,添加之后newArr仍然是一维数组
var newArr = arr.concat(arr2,arr3); //现场保护
println(newArr);
println(newArr.length);
//把arr2作为一个整体(一个复杂元素)加到arr的末尾,添加之后arr变成二维数组
arr.push(arr2);//原地修改
arr.push(arr3);////把arr3作为一个整体(一维数组)加到arr(二维数组)的末尾
println(arr);
println(arr.length);
</script>
<script type="text/javascript">
//js中做队列--演示
var arr=[];
arr.push("aa");
arr.push("bb");
arr.push("cc");
println(arr); //aa,bb,cc
arr.shift();
println(arr);//bb,cc
arr.push("11");
println(arr);//bb,cc,11
arr.shift();arr.shift();
println(arr);//11
//js中做栈--演示
var stack=[];
stack.push("u1");
stack.push("u2");
stack.push("u3");
stack.pop();
println(stack);//u1,u2
stack.push("u4");
println(stack);//u1,u2,u4
stack.pop();
println(stack);//u1,u2
stack.pop();
println(stack);//u1
</script>
</body>
</html>Date对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Date对象</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
var date = new Date();
println(date); //date.toString()
println(date.toDateString()); //只显示日期
println(date.toLocaleString()); //本地格式
println(date.toLocaleDateString());//本地格式:只显示日期
var year = date.getYear(); //建议使用getFullYear()代替
println( year ); //118 = 2018-1900
year = date.getFullYear(); //※
var month = date.getMonth(); //※ 0~11 我们用时要 +1
var day1 = date.getDay(); //※星期几, 其中星期日是0
var day2 = date.getDate(); //※月份中的第几天，就是我们平时用的“日期”
println( year+"."+(month+1)+"."+day2 );
</script>
<hr/>
<script type="text/javascript">
//格式转换
//日期对象 和 毫秒值之间的转换
var date2 = new Date();
var time = date2.getTime(); //日期对象 --> 毫秒值
println("毫秒值:"+time);
time = time + 2*24*60*60*1000;//2天后
var date3 = new Date(time); //也可以用setTime() // 毫秒值 --> 日期对象
println("后天:"+ date3.toLocaleString() );
//日期对象 和 字符串之间的转换
var str = date3.toLocaleString(); //日期对象 --> 字符串
//字符串 --> 日期对象
//var str = "6/27/2018"; //格式 OK
//var str = "July 23, 2018"; //格式 OK
//var str = "2010/08/08"; //格式 OK
var str = "2010-08-08"; //格式 OK
var time = Date.parse(str);
var d = new Date(time);
println( d.toLocaleString() );
</script>
<script type="text/javascript">
/*一个小语法:
with(对象){
//在该区域内可以直接使用"对象"的内容(属性和方法),不需要“对象.”
}
*/
var date = new Date();
with(date){
var year = getFullYear();
var month = getMonth()+1;
var day = getDate();
println(">>> "+year+"年"+month+"月"+day+"日");
}
</script>
</body>
</html>Math对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Math对象</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
var x = -323.78;
x = Math.abs(x);
println("x="+ x);
x = 7.89;
println( Math.ceil(x) ); //8
println( Math.floor(x) ); //7
println( Math.exp(2) ); //e^2
y=5;
println( Math.pow(x,y) ); //x 的 y 次幂
//round(x) 四舍五入
println( Math.round(4.56) );
//random() 返回 0 ~ 1 之间的随机小数。
//生成10个[1,10]范围内的随机整数
for(var i=0; i<10; i++){
//int n = (int)(Math.random()*10) +1; //Java写法
//var n = Math.floor( Math.random()*10 ) +1; //JS写法1---用Math.floor()实现取整
var n = parseInt( Math.random()*10 ) +1; //JS写法2---用parseInt()实现取整
print(n+" ");
}
println("");
</script>
</body>
</html>Global对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Global对象, 顶层函数（全局函数）</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
//js把一些通用的函数定义在一个叫Global的对象中，调用时不能写"Global."
//eval(str): 把字符串当成js语句来进行评估且执行
eval("x=10;y=20;document.write(x*y);");
document.write("<br/>"+eval("2+2")+"<br/>");
var x=10;
document.write(eval(x+17) +"<br/>");
//isNaN(s): 判断s是否是一个"非Number类型"的值
var str ="123";
println( isNaN(str) ); //false ---不是"非Number类型"
str="abc123";
println( isNaN(str) ); //true ---是"非Number类型"
</script>
<script type="text/javascript">
//Number(s): 把参数s转换成"数值(Number类型的值)",如果参数是Date则返回毫秒值，如果参数不能转换成数值则返回: NaN
var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");
document.write(Number(test1)+ "<br />");
document.write(Number(test2)+ "<br />");
document.write(Number(test3)+ "<br />");
document.write(Number(test4)+ "<br />");
document.write(Number(test5)+ "<br />");
document.write(Number.MAX_VALUE+ "<br />");
document.write(Number.MIN_VALUE+ "<br />");
document.write(Number.NEGATIVE_INFINITY+ "<br />");
</script>
<hr/>
<script type="text/javascript">
//parseFloat(): 解析一个字符串并返回一个浮点数。
var str = "3.14159";
var val = parseFloat(str);
val *=2;
println( val );
//parseInt(): 解析一个字符串，并返回一个整数。
//parseInt(str, radix) : 没有参数radix时为十进制
//将字符串 --> 十进制数
var num = parseInt("110",10); //10进制的字符串"110" --> 110
println(num);//110
var num = parseInt("110",2); //2进制的字符串"110" --> 6
println(num);//6
var num = parseInt("110",16); //16进制的字符串"110" --> 272
println(num);//272
//将十进制数 --> 其它进制格式的字符串
var num = 100; //js自动会把一个数值包装成一个Number对象
//NumberObject.toString(radix)
println( num.toString(2) ); //把num转换成2进制的字符串
println( num.toString(16) ); //把num转换成16进制的字符串
</script>
</body>
</html>JSON对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON技术</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
<script type="text/javascript">
//给一个js对象添加/修改成员(属性或方法)可以有两种方式:
// 1)通过 "对象.prototype.属性名/函数名=xxx", 更改的是对象的原型，此时所有对象都会被更改
// 2)通过 "对象.属性名/函数名=xxx", 更改的是对象本身，此时只是当前对象被更改
</script>
<script type="text/javascript">
//JSON:JavaScript Object Notation
//方式1--描述对象: 类似面向过程的方式 ---把函数当作类似Java中的类模板来用
function Person(){
//alert("person....");
}
var p = new Person();
p.name = "Jack";
p.age = 20;
p.getAge=function(){
return this.age;
};
p.show=function(){
return this.name+","+this.age;
};
document.write( p.show() +"<br/>" );
////////下面这种方式，我们以后开发，传参(数据比较多)时也会用///////////
var obj = new Object();
obj.name = "Tom";
obj.age = 20;
//把obj作为参数传递给其它模块
</script>
<hr/>
<script type="text/javascript">
//方式2--描述对象: 类似面向对象的方式--类的封装--定义Class
function User(name,age){
this.name = name;
this.age = age;
this.setAge=function(age){
this.age = age;
};
this.getAge=function(){
return this.age;
};
this.show=function(){
//return name+","+age; //有bug，这两个变量是方法的参数
return this.name+","+this.age;
};
}
var user = new User("张三",24);
user.setAge(25);
//alert(user.getAge());
document.write( user.show() +"<br/>" );
</script>
<hr/>
<script type="text/javascript">
//方式3--封装数据(我们平时讲的json技术主要是指这种), map
//js中，"[]"用来封装数组, "{}"用来封装json--map
var map = {"name":"张三", "age":23, "getName":function(){return this.name}, "info":"一些其它信息" };
println( map.name );
println( map.age );
println( map.getName() );
println( map.info );
println( "<br/><br/>");
println( map["name"] );
println( map["age"] );
println( map["getName"]() );
println( map["info"] );
var map2={"1":"aaa","2":20, "x":3.14 };
//println( map2.1 ); //由于key不符合变量名的命名规则，因此无法使用该方式
println(map2.x); //AC
println( map2["1"] ); //key不符合变量名的命名规则，该方式也行
println( map2["2"] );
/*小结: json-map读取数据的方式有两种:
方式1: json对象名.属性名/方法名() ---该方式当属性名和方法名不符合变量名的命名规则时，不能用
方式2: json对象名["属性名"] ---当属性名和方法名不符合变量名的命名规则时，也能用。注意，属性名必须用引号括起来
*/
</script>
<script type="text/javascript">
//写一个稍复杂点的 json-map
var data = {"count":35,
"currentPage":15,
"info":{"stud":[{"name":"jack","age":20,"tel":"13800001111"},{"name":"Tom","age":21,"tel":"13800002222"},{"name":"李四","age":22,"tel":"13855551111"}],
"teacher":[{"name":"T1","age":30},{"name":"T2","age":33}]
}
};
//遍历出所有学生信息
var studs =data.info.stud ;//所有学生的数组
for(var i=0; i<studs.length; i++){
println( studs[i].name+","+studs[i].age+","+studs[i].tel );
}
var studs =data["info"].stud; //OK
//alert(studs[1]["name"]);
var studs =data.info["stud"];
//alert(studs[1]["name"]); //OK
var studs =data["info"]["stud"];
alert(studs[1]["name"]); //OK
</script>
</body>
</html