马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > js教程 > JavaScript对象属性的基础教程指南

JavaScript对象属性的基础教程指南

时间:2014-03-13   文章来源:马海祥博客   访问次数:

JavaScript是使用“对象化编程”的,或者叫“面向对象编程”的。所谓“对象化编程”,意思是把JavaScript能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象,小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。今天我将在马海祥博客上跟大家讲述一些JavaScript对象属性的基础教程指南。

JavaScript对象属性的基础教程指南-马海祥博客

一、JavaScript对象的基础知识

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...。此外,JavaScript 允许自定义对象。对象是可以从JavaScript“势力范围”中划分出来的一小块,可以是一段文字、一幅图片、一个表单(Form)等等。

每个对象有它自己的属性、方法和事件。对象的属性是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等等;对象的方法能对该对象做一些事情,例如:表单的“提交”(Submit),窗口的“滚动”(Scrolling)等等;而对象的事件就能响应发生在对象上的事情,例如:提交表单产生表单的“提交事件”,点击连接产生的“点击事件”。

不是所有的对象都有以上三个性质,有些没有事件,有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。

二、JavaScript基本对象

现在我们要复习以上学过的内容了——把一些数据类型用对象的角度重新学习一下。

1、Number“数字”对象

这个对象用得很少。不过属于“Number”的对象,也就是“变量”就多了。

属性:

MAX_VALUE用法:Number.MAX_VALUE;返回“最大值”。

MIN_VALUE用法:Number.MIN_VALUE;返回“最小值”。

NaN用法:Number.NaN 或 NaN;返回“NaN”。“NaN”(不是数值)在很早就介绍过了。

NEGATIVE_INFINITY用法:Number.NEGATIVE_INFINITY;返回:负无穷大,比“最小值”还小的值。

POSITIVE_INFINITY用法:Number.POSITIVE_INFINITY;返回:正无穷大,比“最大值”还大的值。

方法:

toString()用法:<数值变量>.toString();返回:字符串形式的数值。如:若 a == 123;则 a.toString() == '123'。

2、String字符串对象

声明一个字符串对象最简单、快捷、有效、常用的方法就是直接赋值。

属性:

length用法:<字符串对象>.length;返回该字符串的长度。

方法:

charAt()用法:<字符串对象>.charAt(<位置>);返回该字符串位于第<位置>位的单个字符。注意:字符串中的一个字符是第0位的,第二个才是第1位的,最后一个字符是第length - 1位的。

charCodeAt()用法:<字符串对象>.charCodeAt(<位置>);返回该字符串位于第<位置>位的单个字符的ASCII码。

fromCharCode() 用法:String.fromCharCode(a, b, c...);返回一个字符串,该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。

indexOf()用法:<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>]);该方法从<字符串对象>中查找<另一个字符串对象>(如果给出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,没有找到就返回“-1”。所有的“位置”都是从零开始的。

lastIndexOf()用法:<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>]);跟 indexOf() 相似,不过是从后边开始找。

split()用法:<字符串对象>.split(<分隔符字符>);返回一个数组,该数组是从<字符串对象>中分离开来的,<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。例如:'1&2&345&678'.split('&')返回数组:1,2,345,678。关于数组,我们等一下就讨论。

substring()用法:<字符串对象>.substring(<始>[, <终>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终> - <始> = 返回字符串的长度(length)。如果没有指定<终>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。

substr()用法:<字符串对象>.substr(<始>[, <长>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置开始,长度为<长>的一段。如果没有指定<长>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。

toLowerCase()用法:<字符串对象>.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。

toUpperCase()用法:<字符串对象>.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。

3、Array数组对象

数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置(既然是“位置”,就也是从零开始的啦)。

数组的定义方法:

var<数组名> = new Array();

这样就定义了一个空数组。以后要添加数组元素,就用:

<数组名>[<下标>] = ...;

注意这里的方括号不是“可以省略”的意思,数组的下标表示方法就是用方括号括起来。

如果想在定义数组的时候直接初始化数据,请用:

var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);

例如,var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray,里边的元素是:myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'。

但是,如果元素列表中只有一个元素,而这个元素又是一个正整数的话,这将定义一个包含<正整数>个空元素的数组。

注意:JavaScript只有一维数组!千万不要用“Array(3,4)”这种愚蠢的方法来定义 4 x 5 的二维数组,或者用“myArray[2,3]”这种方法来返回“二维数组”中的元素。任意“myArray[...,3]”这种形式的调用其实只返回了“myArray[3]”。要使用多维数组,请用这种虚拟法:

var myArray = new Array(new Array(), new Array(), new Array(), ...);

其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:myArray[2][3] = ...;

属性:

length用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以,想添加一个元素,只需要:myArray[myArray.length] = ...。

方法:

join()用法:<数组对象>.join(<分隔符>);返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

reverse()用法:<数组对象>.reverse();使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。

slice()用法:<数组对象>.slice(<始>[, <终>]);返回一个数组,该数组是原数组的子集,始于<始>,终于<终>。如果不给出<终>,则子集一直取到原数组的结尾。

sort()用法:<数组对象>.sort([<方法函数>]);使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。在这种情况下,80 是比 9 排得前的。如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。<方法函数>比较难讲述,这里只将一些有用的<方法函数>介绍给大家。

按升序排列数字:

function sortMethod(a, b) {
      return a - b;
  }

myArray.sort(sortMethod);

按降序排列数字:把上面的“a - b”该成“b - a”。

4、Math“数学”对象

提供对数据的数学计算。下面所提到的属性和方法,不再详细说明“用法”,大家在使用的时候记住用“Math.<名>”这种格式。

属性:

E 返回常数 e (2.718281828...)。

LN2 返回 2 的自然对数 (ln 2)。

LN10 返回 10 的自然对数 (ln 10)。

LOG2E 返回以 2 为低的 e 的对数 (log2e)。

LOG10E 返回以 10 为低的 e 的对数 (log10e)。

PI 返回π(3.1415926535...)。

SQRT1_2 返回 1/2 的平方根。

SQRT2 返回 2 的平方根。

方法:

abs(x) 返回 x 的绝对值。

acos(x) 返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。

asin(x) 返回 x 的反正弦值。

atan(x) 返回 x 的反正切值。

atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角,用弧度表示,其值在-π到π之间。

ceil(x) 返回大于等于 x 的最小整数。

cos(x) 返回 x 的余弦。

exp(x) 返回 e 的 x 次幂 (ex)。

floor(x) 返回小于等于 x 的最大整数。

log(x) 返回 x 的自然对数 (ln x)。

max(a, b) 返回 a, b 中较大的数。

min(a, b) 返回 a, b 中较小的数。

pow(n, m) 返回 n 的 m 次幂 (nm)。

random() 返回大于 0 小于 1 的一个随机数。

round(x) 返回 x 四舍五入后的值。

sin(x) 返回 x 的正弦。

sqrt(x) 返回 x 的平方根。

tan(x) 返回 x 的正切。

5、Date日期对象

这个对象可以储存任意一个日期,从0001年到9999年,并且可以精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比1970年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。

定义一个日期对象:

var d = new Date;

这个方法使 d 成为日期对象,并且已有初始值:当前时间。如果要自定初始值,可以用:

var d = new Date(99, 10, 1);     //99 年10月1日

var d = new Date('Oct 1, 1999'); //99 年10月1日

等等方法。最好的方法就是用下面介绍的“方法”来严格的定义时间。

方法:

以下有很多“g/set[UTC]XXX”这样的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是获得某个数值,而“set”是设定某个数值。如果带有“UTC”字母,则表示获得/设定的数值是基于 UTC 时间的,没有则表示基于本地时间或浏览期默认时间的。

如无说明,方法的使用格式为:“<对象>.<方法>”,下同。

g/set[UTC]FullYear() 返回/设置年份,用四位数表示。如果使用“x.set[UTC]FullYear(99)”,则年份被设定为0099年。

g/set[UTC]Year()返回/设置年份,用两位数表示。设定的时候浏览器自动加上“19”开头,故使用“x.set[UTC]Year(00)”把年份设定为1900年。

g/set[UTC]Month()返回/设置月份。

g/set[UTC]Date()返回/设置日期。

g/set[UTC]Day()返回/设置星期,0表示星期天。

g/set[UTC]Hours()返回/设置小时数,24小时制。

g/set[UTC]Minutes()返回/设置分钟数。

g/set[UTC]Seconds()返回/设置秒钟数。

g/set[UTC]Milliseconds()返回/设置毫秒数。

g/setTime() 返回/设置时间,该时间就是日期对象的内部处理方法:从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时,就用:“x.setTime(x.getTime() + 60 * 60 * 1000);”(一小时60分,一分60秒,一秒1000毫秒)。

getTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。

toString() 返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800 2000”。

toLocaleString() 返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。如:“2000-07-21 15:43:46”。

toGMTString() 返回一个字符串,描述日期对象所指的日期,用GMT格式。

toUTCString() 返回一个字符串,描述日期对象所指的日期,用UTC格式。

parse() 用法:Date.parse(<日期对象>);返回该日期对象的内部表达方式。

6、全局对象

全局对象从不现形,它可以说是虚拟出来的,目的在于把全局函数“对象化”。在 Microsoft JScript语言参考中,它叫做“Global对象”,但是引用它的方法和属性从来不用“Global.xxx”(况且这样做会出错),而直接用“xxx”。

方法:

eval()把括号内的字符串当作标准语句或表达式来运行。

isFinite() 如果括号内的数字是“有限”的(介于Number.MIN_VALUE和Number.MAX_VALUE之间)就返回true;否则返回 false。

isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。

parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。

parseFloat() 返回把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。

toString() 用法:<对象>.toString();把对象转换成字符串。如果在括号中指定一个数值,则转换过程中所有数值转换成特定进制。

escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL,也就是把空格写成“%20”这种格式。“+”不被编码,如果要“+”也被编码,请用:escape('...', 1)。

unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。

三、对象函数

1、函数的定义

所谓“函数”,是有返回值的对象或对象的方法。

2、函数的种类

常见的函数有:构造函数,如:Array(),能构造一个数组;全局函数,即全局对象里的方法;自定义函数;等等。

3、自定义函数

定义函数用以下语句:

function 函数名([参数集]) {
      ...
      [return[ <值>];]
      ...
  }

其中,用在function之后和函数结尾的大括号是不能省去的,就算整个函数只有一句。
 
函数名与变量名有一样的起名规定,也就是只包含字母数字下划线、字母排头、不能与保留字重复等。

参数集可有可无,但括号就一定要有。

4、参数

参数是函数外部向函数内部传递信息的桥梁,例如,想叫一个函数返回3的立方,你就要让函数知道“3”这个数值,这时候就要有一个变量来接收数值,这种变量叫做参数。

参数集是一个或多个用逗号分隔开来的参数的集合,如:a, b, c。

函数的内部有一至多行语句,这些语句并不会立即执行,而只当有其它程序调用它时才执行。这些语句中可能包含“return”语句。在执行一个函数的时候,碰到return语句,函数立刻停止执行,并返回到调用它的程序中。如果“return”后带有<值>,则退出函数的同时返回该值。

在函数的内部,参数可以直接当作变量来使用,并可以用var语句来新建一些变量,但是这些变量都不能被函数外部的过程调用。

要使函数内部的信息能被外部调用,要么使用“return”返回值,要么使用全局变量。

5、全局变量

全局变量在Script的“根部”(非函数内部)的“var”语句所定义的变量就是全局变量,它能在整个过程的任意地方被调用、更改。例如:

function addAll(a, b, c) {
      return a + b + c;
  }

var total = addAll(3, 4, 5);

这个例子建立了一个叫“addAll”的函数,它有3个参数:a, b, c,作用是返回三个数相加的结果。在函数外部,利用“var total = addAll(3, 4, 5);”接收函数的返回值。

更多的时候,函数是没有返回值的,这种函数在一些比较强调严格的语言中是叫做“过程”的,例如Basic类语言的“Sub”、Pascal 语言的“procedure”。

马海祥博客点评:

使用JavaScript使网页增加了互动性。JavaScript使有规律地重复的HTML文段简化,减少下载时间。JavaScript能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由CGI验证。JavaScript 的特点是无穷无尽的,只要你有创意。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/js/444.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: JavaScript   js教程   js对象   js属性   js指南  

上一篇:Javascript教程:js异步模式编程的4种解决方法
下一篇:如何将模板理念应用到JS组件中

您可能还会对以下这些文章感兴趣!

  • 常用的JS页面跳转代码调用大全

    所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面。目前很多垃圾站经常用js跳转将正常页面跳转到广告页面,当然也有一些网站为了追求吸引人的视觉效果,把一些栏目链接做成js链接,但这是一个比较严……【查看全文

    阅读:24316关键词: js页面   js跳转   js代码   js调用   日期:2014-09-17
  • 最新挂木马的10大操作方法

    最近看了很多博友反馈的问题,发现最近一周谈论最多的问题就是js挂马的问题。问题也大多集中在如何挂马、挂马的方法有哪些?挂马的效果和如何防止自己网站被挂木马。并根据自己多年做网站的经验汇总了10条网站挂木马的常用的一些代码写法。在此给大家介绍一下具体代码……【查看全文

    阅读:1218关键词: 挂马   最新挂木马方   挂马操作方法   最新挂马方法   日期:2013-05-20
  • JavaScript对象属性的基础教程指南

    JavaScript是使用对象化编程的,或者叫面向对象编程的。所谓对象化编程,意思是把JavaScript能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象,小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。……【查看全文

    阅读:1315关键词: js教程   JavaScript   js对象   js属性   js指南   日期:2014-03-13
  • 常见JS挂马方法及如何防止网站被黑客挂马?

    最近有朋友说自己的网站平时并未作弊,文章也都是原创的,更新很稳定。可不知道为什么网站突然就被各大搜索引擎降权了,一直找不到原因。最后发现是网站被挂马了,导致网站被连累了。在此,借助马海祥博客的平台,给大家简单的介绍下js挂马的方法及如何防止网站被挂马……【查看全文

    阅读:1985关键词: JS挂马   防止网站挂马   常见挂马方法   日期:2012-10-26
  • 推荐一种测试JavaScript执行性能和性能比较的方法

    随着越来越多的站长对网站形象方面的关注,js文件也使用的越来越多了,于是乎一些细心的seo优化人员也开始重视JavaScript 的性能问题了,同时也导致了越来越多的 JS 性能测试框架和一些工具诞生,比如说 JSLitmus、jsperf 等等,由于本人对JavaScript方面的知识掌握的也……【查看全文

    阅读:7003关键词: JavaScript   js文件   JS性能比较   日期:2013-05-12
  • 常用的JavaScript字符串处理函数及用法

    最近参加了几次前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题、淘宝的笔试题等,如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一,这些题有一个特点,站在考官的角度去……【查看全文

    阅读:1639关键词: javascript   字符串   日期:2015-05-03
  • JS基础知识:Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言。JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为,Javascript事件像HTML标签的属性一样使……【查看全文

    阅读:2112关键词: js知识   javascript   js事件列表   js事件   日期:2014-06-26
  • Javascript教程:js异步模式编程的4种解决方法

    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javascript语言的执行环境是单线程(single thread)。 所谓单线程,就……【查看全文

    阅读:5145关键词: Javascript   js教程   异步模式   js编程   日期:2013-09-03
  • JavaScript事件处理程序的3种方式

    事件对象是用来记录一些事件发生时相关信息的对象,但事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!事件流就是描述了页面中接受事件的顺序,在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐……【查看全文

    阅读:8333关键词: javascript   js事件   日期:2014-07-19
  • JavaScript开发者新手经常忽略或误用的基础知识点

    JavaScript本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它,昨天我们将这些模式应用到了JavaScript框架中,今天这些框架又驱动了我们的Web应用程序。很多新手开发者被各种强大的JavaScript框架吸引进来,但却忽略了框架身后浩如星海的JavaScript……【查看全文

    阅读:637关键词: javascript   开发者   日期:2016-07-03
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告