JavaScript---网络编程(3)-Object、String、Array对象和prototype属性

谙忆 2021-01-21 12:54:17
编程 网络 javascript Object javascript---


本节学习JavaScript的对象和方法(函数)~

Object 对象

提供所有 JScript 对象通用的功能。

obj = new Object([value])

参数 obj 必选项。要赋值为 Object 对象的变量名。 value 可选项。任意一种 JScript 基本数据类型。(Number、Boolean、或 String。)如果 value 为一个对象,返回不作改动的该对象。如果 value 为 null、undefined,或者没有给出,则产生没有内容的对象。 说明 Object 对象被包含在所有其它 JScript 对象中;在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法,并在适当的时候通过 JScript 调用。toString 方法是经常被重定义的 Object 方法的例子。

代码演示:

<html>
<head>
<title>Object对象的用法演示</title>
</head>
<body>
<script type="text/javascript">
/*toString():将对象转换成字符串*/
function show(){
document.write("show...");
}
document.write(show);//默认调用的是toString()
document.write("<br/>");
document.write(show.toString());
document.write("<br/>");
document.write(show.toLocaleString());
document.write("<br/>");
var arr=[1,5,6,20];
document.write(arr+"<br/>");//默认调用的是toString()
document.write(arr.toString()+"<br/>");
/*valueOf(): 返回指定对象的原始值 */
document.write(arr.valueOf()+"<br/>");//结果和toString()一样
document.write(show.valueOf());//结果和toString()一样
</script>
</body>
</html>

演示结果:

toLocaleString 方法说明:

就是根据你电脑的设置时区,来匹配输出时间的格式,一般在字符串用的少。 说明 toLocaleString 方法返回一个 String 对象,这个对象中包含了用当前区域设置的默认格式表示的日期。 对于公元 1601 和 1999 之间的时间,日期格式要按照用户的“控制面板”中“区域设置”来确定。 F对于此区间外的其他时间,使用 toString 方法的默认格式。 例如,同样是 1 月 5 日,在美国,toLocaleString 可能会返回 “01/05/96 00:00:00”,而在欧洲,返回值则可能是 “05/01/96 00:00:00”,因为欧洲的惯例是将日期放在月份前面。

注意 toLocaleString 只用来显示结果给用户;不要在脚本中用来做基本计算,因为返回的结果是随机器不同而不同的。

String 对象:

可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。

语法 newString = new String([“stringLiteral”])

参数 newString 必选项。要赋值为 String 对象的变量名。

stringLiteral 可选项。任意 Unicode 字符群。

说明 String 对象可用字符串文字显式创建。用这种方法创建的 String 对象(指以标准字符串形式)与用 new 运算符创建的 String 对象处理上不同。所有字符串文字共享公用的全局字符串对象。如果为字符串文字添加属性,则它对所有标准字符串对象都是可用的:

var alpha, beta; alpha = “这是一个字符串”; beta = “这也是一个字符串”;

alpha.test = 10; 在前一示例中,这时为 beta 和所有将来的字符串定义 test。然而,在下面的例子中,被添加属性的处理略有不同:

var gamma, delta; gamma = new String(“这是一个字符串”); delta = new String(“这是也一个字符串”);

gamma.test = 10; 在这种情况下,不为 delta 定义 test。每个用 new String 声明的 String 对象有其自己的一组成员。这是对 String 对象和字符串文字的处理不同的唯一情况。

replace 方法

返回根据正则表达式进行文字替换后的字符串的复制。 stringObj.replace(rgExp, replaceText)

参数 stringObj 必选项。要执行该替换的 String 对象或字符串文字。该字符串不会被 replace 方法修改。

rgExp 必选项。为包含正则表达式模式或可用标志的正则表达式对象。也可以是 String 对象或文字。如果 rgExp 不是正则表达式对象,它将被转换为字符串,并进行精确的查找;不要尝试将字符串转化为正则表达式。

replaceText 必选项。是一个String 对象或字符串文字,对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。在 Jscript 5.5 或更新版本中,replaceText 参数也可以是返回替换文本的函数。

slice 方法 (String)

返回字符串的片段。 stringObj.slice(start, [end])

参数 stringObj 必选项。是一个 String 对象或文字。

start 必选项。下标以 0 开始的 stringObj 指定部分起始索引。

end 可选项。下标以 0 起始的 stringObj 的指定部分结束索引。

说明 slice 方法返回一个包含 stringObj 的指定部分的 String 对象。

slice 方法一直复制到 end 所指定的元素,但是不包括该元素。如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。

示例 在下面的示例中,slice 方法的两种用法将返回相同的结果。第二个示例中的 -1 指向 str1 中的最后一个字符,并作为提取操作的结束位置。 str1.slice(0) str2.slice(0,-1)

代码演示:

<html>
<head>
<title>String对象的用法演示</title>
</head>
<body>
<script type="text/javascript" src="out.js">
//注意导入顺序,必须先导入,后面才能用
</script>
<script type="text/javascript">
var str = new String("abc123");
println(str);
var str2 = "qwe234";
println(str2);
</script>
<!-- 加个小知识点<pre>-按原格式输出到网页(空格回车不忽略) -->
<pre>
asdsad
asfd
sdf dsfd
dsfd dsf
</pre>
<script type="text/javascript">
//length属性:返回 String 对象的长度
println(str.length);
println(str.bold());//bold 方法 把 HTML <B> 标记放置在 String 对象中的文本两端。
println(str2.bold());
println(str.charAt(3));
println(str.concat(str2));//连接str+str2---返回新的字符串
println(str.fontcolor("red"));//fontcolor 方法
//把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端。
println(str.link("http://www.hncu.net"));//link 方法
//把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
println(str.replace("1", "666"));//将1这个字符替换成666
println(str.search("bc"));// 1
//search 方法
//返回与正则表达式查找内容匹配的第一个子字符串的位置。
println( str.slice(1, 4));
println( str.substring(1, 4));//返回位于 String 对象中指定位置的子字符串。
//substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。
//例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
//如果 start 或 end 为 NaN 或者负数,那么将其替换为0。
println( str.strike() );//字符串加删除线
//将 HTML 的<STRIKE> 标识放置到 String 对象中的文本两端。
println( str.substring(0, 4)+str.substring(4, 5).sub() );
//sub() -- 下标-将 HTML 的 <SUB> 标识放置到 String 对象中的文本两端。
println( str.substr(1,3) ); //从位置1开始,截取3个字符
str = "aBcewWfd677";
println( str.toUpperCase() );//返回一个字符串,该字符串中的所有字母都被转化为大写字母。
</script>
</body>
</html>

out.js–代码:

function println(param){
document.write(param+"<br/>");
}
function print(param){
document.write(param);
}

360浏览器8.1 演示结果:

prototype属性的用法演示

返回对象类型原型的引用。 objectName.prototype objectName 参数是对象的名称。

JS是基于对象的,用对象的时候都是临时去读取复制原型的,这个属性,就是改变那个原型的。

用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

代码演示:

<html>
<head>
<title>prototype属性的用法演示</title>
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
//※※※利用prototype更改原型时,如果属性或方法已经存在那么是修改,否则就是添加。
//※※给String原型对象添加一个属性aa
String.prototype.aa=100;
var str = "abc123";
println( str.aa );
println( "aw12".aa );//只要是String型的,都能调用aa,结果都是100
</script>
<script type="text/javascript">
//※※给String原型对象添加一个函数---以trim()为例--去前后空格
//**过渡版
function trim(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);
}
println( trim(" ewwewe ewwewe ") );
//println( " ewwewe ewwewe ".trim() );
</script>
<!--
<script type="text/javascript">
//※※给String原型对象添加一个函数---以trim()为例
//不用传参,将str改为this就可以了。
//**法1---用非匿名函数
function trim(){
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.prototype.trim=trim;//给原型对象添加一个trim()方法
println( " yyy 666 ".trim() );
</script>
-->
<script type="text/javascript">
//※※给String原型对象添加一个函数---以trim()为例
//**法2---用匿名函数
String.prototype.trim= function(){ //给原型对象添加一个trim()方法
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);
};
println( " yyrry 666888 ".trim() );
var sstr = new String(" www eee ");
println( sstr.trim() );
</script>
</body>
</html>

360浏览器8.1 演示结果:

prototype扩展:

我们现在扩展一下,假如我们先写好js,再导入,就可以直接用我们自己写的那个函数,那个值了。

代码演示:

<html>
<head>
<title>利用prototype属性给API进行功能扩展</title>
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript" src="stringtools.js">
</script>
<script type="text/javascript">
var str=" hjdsh ";
println( str.trim() );//去掉字符串前后空格
println( str.toCharArray() );//字符串转换为字符数组
var str2 = "abc123";
println( str2 );
println( str2.reverse() );//字符串反转输出
</script>
</body>
</html>

stringtools.js的代码:

//给原型对象添加一个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);
};
// 给原型对象添加一个toCharArray()方法
String.prototype.toCharArray = function() {
var chs = [];
for ( var x = 0; x < this.length; x++) {
chs[x] = this.charAt(x);
}
return chs;
};
// 给原型对象添加一个reverse()方法
String.prototype.reverse = function() {
//**js中,函数当中可以再定义函数--内部函数
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
var arr = this.toCharArray();
for(var x=0,y=arr.length-1; x<y; x++,y--){
swap(arr,x,y);
}
return arr.join("");//join(str)方法-返回字符串,str就是连接数组元素之间的符号。
};

360浏览器8.1 演示结果:

Array对象使用方法

代码演示:

<html>
<head>
<title>Array对象使用方法演示</title>
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
var arr=["aaa","bbb","ccc","ddd"];
println(arr);
var arr2=["111","222","333","okok"];
var newArr = arr.concat(arr2);
println(newArr);
println(newArr.join("-"));
println("<hr/>");
//pop() : 移除数组中的最后一个元素并返回该元素。
println( newArr.pop() );
println(newArr);
//push() : 将新元素添加到一个数组中,并返回数组的新长度值。
arr.push("x1",arr2,"x2");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9
println(arr+"----二维数组了");
println(arr.length);
//arr.push("y1",arr2,"z1");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9
arr=arr.concat("y1",arr2,"z1");
//注意1,该方法会把数组arr2当中的每个元素取出来,分别添加到arr当中---arr还是一维数组
//注意2,concat方法不会改变原来的数组,连接结果以新数组的形式返回。旧arr的长度还是6,新arr的长度是12
println(arr);
println(arr.length);
arr.sort();
println(arr);
arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始,删掉3个元素,并且在删除的位置插入:"u1","u2","u3","u4","u5"
println(arr);
//※※※做栈和队列的提示
//unshift---addFirst concat--addLast() shift---removeFirst() pop---removeLast()
//Array.prototype.addFirst=unshift;
</script>
<script type="text/javascript" src="arraytools.js">
</script>
<script type="text/javascript">
var arr=["aaa","bbb","ccc","ddd"];
var max = arr.getMax();
println(max);
println(arr);
</script>
</body>
</html>

arraytools.js代码:

//给原型对象添加一个getMax()方法
Array.prototype.getMax = function() {
var temp=0;
for(var x=1;x<this.length;x++){
if(this[x]>this[temp]){
temp = x;
}
}
return this[temp];
};
Array.prototype.toString = function() {
return "["+this.join("")+"]";
};

360浏览器8.1 演示结果:

prototype属性真的很强大~~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[谙忆]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1777209

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云