JavaScript对象及继承教程之内置对象(1)

一、 类与对象

在 JavaScript 世界里,关于面向对象第一个要澄清的概念就是类。对象都是有类来定义的,通过类来创建对象就是我们所熟悉的实例化。然而,在 JavaScript 中别没有真正的类,对象的定义就是对象自身。而 ECMA-262 干脆把这种妥协的方式称作为对象的调和剂。为了方便理解,我通常把这个发挥类的作用的调和剂称为类。

二、 内置对象

1、 Array类

数组在 js 中是非常常用的一种数据结构,由于其灵活性和易用性,合理的使用数组可以帮助我们更好的实现相应的功能。

让我们先看 Array 对象的创建吧

第一种:


  1. var arr = new Array(10);  

该方法在实际的使用当中并不那么的实用,与很多编译型语言不同, js 数组的长度是可变的,不但增强了灵活性,还给我们有了更多好的选择。

第二种:


  1. var arr = new Array("one","two","three");  

使用 new 方式创建数组的方法一般多为这两者,当然也可以使用 new Array() 创建一个空的数组对象。通常情况下,我推荐如下的方法

第三种:


  1. var arr = ["one","two","three"];  

使用数组的字面量方式创建一个数组对象,不但简洁易读,而且几乎完全等价于使用 new 方式创建数组对象的效果。数组对象有很多好用的方法,接下来我们就一起看看这个数组对象的强大功能吧。

首先要介绍的是 push 方法,学过数据结构的朋友都知道 push 意味着什么,没错,他的出现让数组能够实现栈的数据结构(同时需要配合 pop 方法)。 push 方法帮助我们紧凑的添加数组元素。前面提到js中的数组是长度是可变的,则我们可以添加元素。既然可以通过 arr[length] = newValue; 来给 arr 添加一个新元素并放置于数组尾。更好的办法就是使用 push 方法。 arr.push(newValue); 怎么样,使用他比你还要通过数组长度来赋新值方便多了吧。在这里有一点需要注意。请看下面的代码:


  1. var arr = [];   
  2. arr[4] = 5;   
  3. alert(arr.length == 5);   
  4. alert(arr); //alert : ,,,,5  

当我们需要给指定数组位置赋予指定的值的时候,这种赋值就显得十分有用了,比如在用于装箱排序的时候。

pop 方法则是实现与 push 相反的作用,返回数组的最后一个元素,并出栈。


  1. var arr = [1,2,3,4,5];   
  2. var ele = arr.pop();   
  3. alert(ele == 5);   
  4. alert(arr.length == 4); 

数组对象的 toString 和 valueOf 方法比较人性化的重写了,它的实现是把每一项都调用 toString 方法,然后用半角逗号(,)连接每一项。那么:


  1. var arr = [1,2,3,4,5];   
  2. alert(arr);//output:1,2,3,4,5   

toLocaleString 方法在这里不做详细说明了,他的效果与 toString 方法类似,只是每项调用 toLocateString 方法。

如果你想使用个性化的分隔符来显示数组元素,那么 join 方法可能会更加的适合。比如:


  1. var city = ["上海","北京","天津","重庆","深圳"];   
  2. alert(city.join(""));//output:上海北京天津重庆深圳   

由此可见 join 是把数组元素转换为一个字符串。在介绍字符串的时候我们将再次看到 join 方法的使用。

concat 方法和 slice 方法是又一对好用的方法,这两个方法的特殊之处在于 String 对象也拥有他们。当我们希望给一个数组添加多个数组元素的时候,使用 push 可能就显得有些冗余和复杂了,而且也会让 coding 变得不那么有意思了。好在我们有 concat 方法,该方法将其参数们按序加入数组元素中。如:


  1. var arr = [1,2,3,4,5];   
  2. arr = arr.concat(6,7,8,9);   
  3. alert(arr.length == 9);    

注意, concat 并不修改数组对象本身,而是将数组元素与 concat 方法的数组元素合并后返回。所以需要给数组元素进行赋值运算才行。

slice 方法则是从数组对象中返回一个子数组。该子数组是从 slice 方法的第一个参数所指位置至第二个参数所指的位置。这是一个半开半闭区间 [a,b) 。如:


  1. var arr = [1,2,3,4,5];   
  2. var arr1 = arr.slice(1,3);   
  3. alert(arr1); //output:2,3   
  4. alert(arr); //output:1,2,3,4,5 

好了, slice 和 concat 方法一样不是修改数组对象本身。同时参数1,3表示从位置1到位置3的半开半闭区间的子数组。

刚才讨论了后进先出的栈操作,现在我们来看看先进先出的队列操作吧。进列使用 push 方法没有问题,那么出列呢。是 shift ,他删除数组对象的第一个元素并返回:


  1. var arr = [1,2,3,4,5];   
  2. var ele = arr.shift();   
  3. alert(ele); //output:1   
  4. alert(arr.length);//output:4 

另外一个还有一个方法,叫 unshift ,他将新元素插入数组对象的第一项,究其功能与 shift 是相反的操作。

sort 方法很灵活,使用好了,他可以给数组元素以任意你想要的排序方式来进行排序。因为 sort 方法接收一个匿名函数(其实,它同样可以接收一个非匿名的函数,但是通常不推荐为此而创建一个这样的命名函数,除非该函数可重用)作为自己的排序的条件。比如:


  1. Object.prototype.toString = function(){   
  2. var str = '';   
  3. for(var item in this) {   
  4. str += item + ":" + this[item] + ",";   
  5. }   
  6. return str.length?str.substr(0,str.length-1):str;   
  7. };   
  8. var arr = [{key:3,value:"three"},  
  9. {key:1,value:"one"},{key:2,value:"two"}];   
  10. arr.sort(function(a,b){   
  11. return a.key - b.key;   
  12. });   
  13. alert(arr);  
  14. //output:key:1,value:one,key:2,value:two,key:3,value:three   

我们先不去纠结 Object.prototype.toString 方法,他的左右就是将对象遍历使之可以输出为键值对格式字符串,在介绍原型链的时候会再次提到。我们可以看到 sort 方法通过这个匿名方法让我们可以根据 key 属性来进行排序。那就让我们来看看这个匿名方法吧。


  1. function(a,b) {   
  2. return a.key - b.key;   
  3. };   

可以看到,这个方法接收2个参数,然后对参数的自身或某个属性进行比较,然后返回比较结果,他们的比较结果与排序对应关系如下:

如果 paramA - paramB > 0,return 正数 ,则 b 排在 a 的前面

如果 paramA - paramB < 0,return 负数 ,则 b 排在 a 的后面

如果 paramA - paramB = 0,return 0 ,则顺序不变。

上面的实现是顺序排序,那么 倒序 呢?对, return paramB - paramA;

reverse 方法可以将数组对象反转。他和 sort 方法一样是修改数组对象内部元素顺序的。

最后我们看看 splice 方法,他是替换和删除数组对象元素的方法。根据参数的改变而拥有不同的实现结果。 splice(pos,count[,insertParams]);pos 参数是删除元素的第一个项的位置, count 参数是删除元素的个数,当为0时则不删除(不删除还要这个方法干嘛,别着急,往下看), insertParams 则是参数列表,这些参数是即将插入的元素集合。插入的位置为 pos 。那么就出现了以下几种情况了。

1、 insertParams 忽略时,该方法就是删除数组元素

2、 当 count 参数为0时,该方法将只是将 insertParams 插入到 pos 位置

3、 当 count 参数不为0且 insertParams 不忽略时,该方法就是删除 pos 位置开始的 count 个元素,并替换 insertParams 参数集合。

2、 Math类

我们花了很大的篇幅来介绍数组类,我要再次强调一点,这个类只是为了介绍方便强加于它的一个名字,实际上他们也只是对象。而非真正的类。

Math 类的使用范围相对狭窄,因为他作为一个数学计算的类,而非一个数据结构类,但是我们也看到了 Math.random 以及各种取整等常用方法。因此我们不妨花些时间来看看他们,但是如果你对此兴趣不大,那么看完 random 方法之后就可以跳到下一节去,以后用到的时候再翻手册就可以了。

Math 通常是一个“静态”类,因为没有人会实例化一个 Math 对象,而是直接使用其“静态”方法,有些资料直接称它为 Math 对象,在这里我们不妨称它为“静态”类吧。

首先我必须介绍 random 方法,因为他常用且太有用了。在制造随机事件的时候他总是不可或缺,同样在防止缓存上他也显得很有用处。 Math.random 方法返回的是一个 0到1 之间的开区间浮点数,即 (0,1) ,他的使用非常简单,唯一需要注意的是,当我们取整的时候对 floor 和 ceil 方法的筛选时需要谨慎,前者使得 random 间接转换为前闭后开区间,而后者则是前开后闭区间。假如我们现在需要一个取1-100的随机数,那么有如下的两种常用解决方案

方法一:


  1. Math.ceil(Math.random*100);  

方法二:


  1. Math.floor(Math.random*100)+1;  

ceil 方法和 floor 方法都是用来取整的数学方法,根据单词含义我们可以理解,前者是向上取整,而后者则是向下取整。

当我们从一个连续的数组对象中随机选择一个数组元素时,我们可以借助 random 轻松的来帮我们挑选:


  1. ["ipad","iphone","ipod touch","ipod nano","macbook"]  
  2. [Math.ceil(Math.random()*4)]; 

这个例子中,我直接使用的是数组字面量,一开始你可能会觉得费解或者不易理解,当你深入以后你会发现原来 JavaScript 是如此的方便、简洁、灵活。

前面我们介绍了 ceil 和 floor 方法的取整,那么当我们想要接近舍入时呢,我们可以使用 Math.round 方法,他在取整时根据数值进行靠近取整。比如 Math.round(5.4) 返回的是 5 。那么如果 Math.round(5.5) 呢,答案是 6 而不是 5 。关于这点需要有所了解。好吧我承认我较真了,但是知道了他有什么坏处呢。

当我们想从 2 个数中取得较小或者较大的数的时候怎么做呢?


  1. if(a>b) {   
  2. return a;   
  3. } else {   
  4. return b;   
  5. }   

我们多虑了。 Math 提供了 Math.max 和 Math.min 方法来帮助我们解决这个问题。

Math 还有一大堆的“静态”方法和属性。在这里我就不一一列举了,当我们要进行数学计算的时候不妨去查查手册。

3、 String类

字符串对象的使用频率恐怕比数组对象有过之而无不及,为什么我要放到后面来说呢,其实是因为对于字符串,我们要说的更多,而可扩展的方法和工具函数也更加丰富。我们一起先来看看 String 类本身吧。

创建一个字符串对象有以下几种方法:

方法一:


  1. var str = new String("Hello World");  

方法二:


  1. var str = String("Hello World");  

方法三:


  1. var str = "Hello World";  

和数组对象一样,我推荐大家使用最后一种方法,及字符串字面量。关于是否有 new 的区别,周爱民老师的博客中有过很详细的解释,同时,如果你一直读下去,在介绍自定义对象的时候也会提到 new 运算符。

String 对象有且只有一个属性 length ,他返回字符串的长度,在这里我们必须要弄明白 JavaScript 是 unicode 编码,那么汉字和英文都当作一个字符长度来处理,之所以提到这个是因为曾经遇到不止一位朋友在论坛提问这个问题,呵呵,动手的必要性啊。那么如果我们非要把汉字当作 2 个字符长度来计算呢?这就带来了我们第一个自定义方法。


  1. String.prototype.getLength = function(isSplit){   
  2. if(isSplit) {   
  3. return this.replace(/[^\u0000-\u00FF]/g,"tt").length;   
  4. }    
  5. else {   
  6. return this.length;   
  7. }   
  8. };  

该方法通过传递一个 Boolean 类型的参数,如果为真则将非半角字符、数字、英文字母分割为 2 个长度来求长度,不用担心这个分割,他并不会修改字符串对象本身。如果为假,则直接返回 length 属性值。由于介绍方法不是根据方法的字符排列顺序而来,如果作为字典,我想还是 w3school 更合适,因为我是根据作用的不同和关联性来进行介绍。 ok ,介绍完了 length 属性,我们看看字符串查找吧。

[1] [2]  下一页

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数组
, 对象
, 方法
, 数组唯一key
, 元素
, arr
, 一个
, push与concat区别
javascript随机排序
javascript内置对象、javascript的内置对象、javascript 对象继承、javascript 继承、javascript 原型继承,以便于您获取更多的相关知识。

时间: 2025-01-21 07:56:37

JavaScript对象及继承教程之内置对象(1)的相关文章

JavaScript核心参考教程--内置对象

博学,切问,近思--詹子知 (https://jameszhan.github.io) JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言.这个标准由 ECMA 组织发展和维护.ECMA-262 是正式的 JavaScript 标准.这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在

JavaScript 核心参考教程 内置对象_js面向对象

这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape 和 Microsoft 浏览器中.ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本. 本系列教程旨在向大家分享本人当年学习Javascript的笔记和心得.本系列教程预计分五个部分. 第

JavaScript学习笔记之内置对象_基础知识

JS Window 窗口对象:http://www.w3school.com.cn/js/js_window.asp 所有浏览器都支持window对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为window对象的成员. 窗口对象的属性和方法格式: [window.]属性 [window.]方法(参数) 甚至 HTML DOM 的 document 也是 window 对象的属性之一: window.document.getElementById("heade

javascript对象之内置对象Math使用方法_基础知识

一.Math.min()和Math.max(),分别返回参数中的最小和最大值 例: alert(Math.min(1,2,3)) //输出 "1" alert(Math.max(1,2,3)) //输出 "3" 二.Math.abs(),返回参数的绝对值 例: alert(Math.abs(-1)) //输出 "1" 三.Math.random(),产生一个0到1的随机数 例: window.open("http://www.***.c

javascript学习笔记(八) js内置对象_基础知识

1.URI方法 encodeURI()和encodeURIComponent()对URI进行编码 encodeURI()不会对本身属于URI的特殊字符进行编码,如冒号,正斜杠,问好,井字等 encodeURIComponent()会对任何非标准字符进行编码 2.eval() 方法:解释参数中的代码字符串 复制代码 代码如下: var msg = "hello world"; eval("alert(msg)"); //"hello world"

PS滤镜基础教程之内置滤镜:扭曲

Distort(扭曲)滤镜通过对图像应用扭曲变形实现各种效果. 1.Wave(波浪滤镜) 作用:使图像产生波浪扭曲效果. 调节参数: 生成器数:控制产生波的数量,范围是1到999. 波长:其最大值与最小值决定相邻波峰之间的距离,两值相互制约,最大值必须大于或等于最小值. 波幅:其最大值与最小值决定波的高度,两值相互制约,最大值必须大于或等于最小值. 比例:控制图像在水平或垂直方向上的变形程度. 类型:有三种类型可供选择,分别是正弦,三角形和正方形. 随机化:每单击一下此按钮都可以为波浪指定一种随

Javascript学习6 - 类、对象、继承

原文:Javascript学习6 - 类.对象.继承     Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成的.     在Javascript中,可以把对象(object)定义为"属性的无序集合",每个属性存放一个原始值.对象或者函数.理解这一点非常重要. ECMAScript定义:对象由特性(attribute)构成,特性可以是原始值,可以是引用值,如果特性存放的是函数,它将被看作对

ASP内置对象详解精彩教程

对象|教程|内置对象|详解 使用ASP开发动态网站我们经常使用到其中的六个内置的对象,今天给大家收集了一下供大家参考! 1.ASP内置对象详解之Session对象 [2005-03-16]     2.ASP内置对象详解之Server对象 [2005-03-16]     3.ASP内置对象详解之Response对象 [2005-03-16]     4.ASP内置对象详解之Request对象 [2005-03-16]     5.ASP内置对象详解之ObjectContext对象 [2005-

ASP教程:深入认识学习ASP内置对象Request

request|对象|教程|内置对象 系统学习ASP,就是先从ASP的几大内置对象开始的.一般称五大对象:Request.Response.Server.Session.Application.今天先来看看Request对象. 当然一直还没有提到的就是,ASP到底是什么样?我看代码怎么知道是ASP代码?很简单,当看到"<%"和"%>"就表明是ASP,并且两者之间的就是ASP源码. 那为什么要学对象,对象的作用又是如何的? 其实ASP所提供的这些可在脚本中