举例讲解JavaScript中关于对象操作的相关知识

从数组到对象

var myarr = ['red','blue','yellow','purple'];
myarr;// ["red","blue","yellow","purple"]
myarr[0];//"red"
myarr[3];//"purple'

数组大家都很熟悉吧,我们可以理解为一个Key对应一个Value,而这个Key在数组中,已经默认了(如上述代码,它的key分别是0,1,2,3 value是red,blue,yellow,purple)。
那么一个对象就可以理解为一个自定义Key的数组。看如下代码

var hero ={
 breed: 'Turtle',
 occupation:'Ninja'
}; 

上述代码我们可以了解到:
 1.对象的名称叫hero.
 2.和数组不同的是用符号'{'替代了'['
 3.对象的属性(如breed和occupation)用符号','分隔
 4.Key和Value的语法是 KEY:VALUE
还有需要注意到是不管属性(也就是key)是放在双引号,单引号,或者是没有引号,他们的结果都是一样的,下面的代码是一样的

var obj={a:1,b:2};
var obj={'a':1,'b':2};
var obj={"a":1,"b":2};

推荐的写法是不要把属性放在引号中。除非属性的名称是特殊符号,如数字,或者带有空格等等。
 
本篇很简单,要注意的是,定义数组的符号[] ,而定义对象的符号为{}
 
元素,属性,方法
学习数组的时候,我们可以说数组里包含了元素,当谈到对象的时候,我们可以改变下说法

var animal={
   name: 'dog',
   run:function(){
    alert("running");
  }
}

name就是属性(property),run本身是个函数,在这个对象中,我们叫方法(method)。

访问对象的属性
有两种方式访问对象的属性。
用数组的形式如:animal['name']
用点的方式访问:animal.name
第一种访问方法适合任意情况。但是如果属性是无效的命名的话,如上一节所说的属性命名'1name'或者'my name'这种情况用点的方式访问就是错误的。这一点要注意。
 
下面具体看一个对象访问的例子

var book = {
  name:'Javascript Fundation',
  published:jixie.
  author:{
    firstname:'nicholas',
    lastname:'xia'
  }
};

1.获取author对象的firstname属性

book.author.firstname //nicholas

2.获取author对象的lastname属性,我们尝试用另一个写法

book['author']['lastname'] //xia

我们也可以用混合的访问方式
book.author['lastname']或者book['author'].lastname 这些方式都是有效的,要灵活去运用
 
在属性是动态的情况下,一般用数组的访问对象的方法。

var key ='lastname'
book.author[key];//xia

调用对象的方法

var hero = {
breed: 'Turtle',
occupation: 'Ninja',
say: function() {
return 'I am ' + hero.occupation;
}
}
hero.say();

访问对象的方法很简单,有点就行,不过也可以用数组的方式,看起来比较诡异
如 hero['say']();
不推荐这种写法,访问对象的时候尽量用点的方式。
 
修改属性和方法
因为Javascript是动态语言,所以在任何时候都可以修改对象的属性和方法。看如下的例子

var hero={};

hero是个空的对象。

typeof hero.breed;//undefined

说明了hero对象没有breed的属性
 接下来可以添加属性和方法了

hero.breed = 'turtle';
hero.name = 'Leonardo';
hero.sayName = function() {return hero.name;};

 调用方法

 hero.sayName();//Leonardo

 删除属性

delete hero.name;//true
hero.sayName();//方法失败

This

var hero = {
  name : 'Rafaelo',
  sayName : function(){
   return this.name;
 }
}
hero.sayName();//Rafaelo

this的意思就是这个对象的意思,关于this的复杂问题以后在讨论。
 
构造函数(Constructor Functions)
另一种创建对象的方式是用构造函数,直接看例子

function Hero(){
 this.name ='Refaelo';
}
var hero = new Hero();
hero.name;//Refaelo

这种方式的好处在于创建个对象的时候可以传入参数

function Hero(name){
  this.name = name;
  this.whoAreYou = function(){
    return this.name;
  }
} 

var hi = new Hero('nicholas');
hi.whoAreYou();//nicholas

要注意的时候,不要丢点 new 操作符。。。
全局对象
上几节我们说过全局变量的事情,已经说过了我们要尽量避免使用全局变量,当我们学过对象的时候,我们在看看全局变量究竟怎么回事,其实全局变量就是全局对象一个属性了。如果主机的环境是web浏览器,全局变量就是window。
如果我们定义 var a = 1;
我们可以这么理解:
一个全局变量a,
做为window的一个属性a.我们可以这么调用window.a或者window['a']
再看看预定义函数的parseInt('123 m');我们可以写为window.parseInt('123 m');
 
constructor 属性
对象建立之后,后台有创建了个隐藏属性,constructor.

h2.constructor;//Hero(name)

因为constructor的属性是对函数的引用。如果你不关心h2对象是由什么创建的,而只关心创建一个新的对象和h2相似就用如下写法

var h3 = h2.constructor('Nicholas');
h3.name ;//Nicholas 

我们来看看如下写法的意思

var o = {};
o.constructor;//Object()
typeof o.constructor;//"functions"

其实就是隐藏了 new Object() ,更深的层次应用以后几个教程在说明。
 
instanceof 操作符
用instanceof来判断对象是否是指定的构造函数创建的。

function Hero(){
}
var h = new Hero();
var o = {};
h instanceof Hero;//true
h instanceof Object;//false
o instanceof Object;//true 

要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误

函数返回对象
可以用构造函数来创建个对象,也可以通过普通函数返回对象来创建对象

function factory(name){
  return {
   name:name
 };
}

用这个方法创建对象

var o = factory('one');
o.name

让我们接下来看看比较少见的构造函数返回对象的例子

function C(){
 this.a = 1;
 return {b:2};
} 

var c2 = new C();
typeof c2.a //undefined
c2.b; // 2

说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意
 
传递对象
如果传递一个对象到函数里,那么传递的是个引用。如果改变了这个引用,也就会改变原始的对象。
下面是个对象赋值的例子

var original = {name:'nicholas'};
var copy =original;
copy.name;//'nicholas';
copy.name = 'Jason';
original.name;// 'Jason';

修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中,也是同样的。

function modify(o){
  o.name ='Jason'
}
var original={name:'nicholas'};
modify(original);
original.name;//Jason

对象的比较
两个对象的比较如果是true的话,那么他们就是同一个对象的引用。

var fido ={breed:'dog'};
var benji ={breed:'dog'}; 

benji===fido; //false;
benji==fido; //false; 

以上的代码都不是同一引用,所以都是false

(0)

相关推荐

  • Jquery操作js数组及对象示例代码

    贴一段jQuery对js对象及数组的操作:增删改查的代码. 复制代码 代码如下: var WorkList = new Array();//数组对象 //下面是自己定义的实体 function WorkEx(depart, title, begintime, endtime) {     this.SId = 0;     this.Id = -(WorkList.length+1);     this.DepartmentName = depart;     this.Title = titl

  • JavaScript创建一个object对象并操作对象属性的用法

    本文实例讲述了JavaScript创建一个object对象并操作对象属性的用法.分享给大家供大家参考.具体分析如下: 下面的JS代码创建了一个myMovie对象,并给对象title和director属性赋值,通过Object定义对象,其属性可以不用定义,直接调用即可,非常简单. <script type="text/javascript"> var myMovie = new Object(); myMovie.title = "Aliens"; myM

  • javascript对象的相关操作小结

    我们知道浏览器对象模型(BOM)是javascript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象.其分层结构如下: window对象是整个BOM的核心其有document(文档对象).location(地址对象) 和history(历史对象组成) 调用对象属性的语法: 1.对象.属性名="属性值"; 2.对象["属性名称字符串"]="属性值"; 调用对象方法的语法: 1.对象的方法名(); 2.对象["方法名称字符串&qu

  • javascript对象的使用和属性操作示例详解

    JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined. 复制代码 代码如下: false.toString(); // 'false'[1, 2, 3].toString(); // '1,2,3' function Foo(){}Foo.bar = 1;Foo.bar; // 1 一个常见的误解是数字的字面值(literal)不是对象.这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分. 复制代码 代码如下: 2.

  • JavaScript对象属性检查、增加、删除、访问操作实例

    检查属性 var mouse = { "name": "betta", "age": 3, "varieties": "milaoshu" } mouse.hasOwnProperty("name"); // true mouse.hasOwnProperty("sex"); //false 增加属性 定义个对象 dog,然后赋予各种特性,再赋予 color特性,最后

  • js用Date对象的setDate()函数对日期进行加减操作

    想自己写一个日期的加减方法,但是涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,有些复杂,应用过程中总是出现问题,于是查了下资料,以在某个日期上加减天数来说,其实只要调用Date对象的setDate()函数就可以了,具体方法如下: function addDate(date,days){ var d=new Date(date); d.setDate(d.getDate()+days); var month=d.getMonth()+1; var day = d.getDate(

  • 浅析javascript操作 cookie对象

    Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据).Cookie文件夹中的用户数据信息(Cookie数据).Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取.(不允许进行跨域的访问) Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt javascript 写入Cookie 格式: documen

  • JavaScript基础语法、dom操作树及document对象

    第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为

  • javascript内置对象操作详解

    1.indexOf() 方法 -----这个方法比较常用 返回某个指定的字符串值在字符串中首次出现的位置 使用格式:stringObject.indexOf(substring, startpos) 举个例子:寻找第二个o所在的位子 var mystr="Hello World!" document.write(mystr.indexOf("o",mystr.indexOf("o")+1));--------结果是:7 mystr.indexOf

  • 解析JavaScript中delete操作符不能删除的对象

    ES3 中,delete在8.6.2.5及11.4.1有介绍,如下 有一些信息, 1.实现上delete操作符会调用引擎内部的[[Delete]]方法 2.[[Delete]]在8.6.2里定义 3.删除的属性有个DontDelete的特性,如果有,delete时直接返回false 搜索"DontDelete",会发现有很多,如下都不能delete 1, 激活对象的arguments对象 (10.1.6) 复制代码 代码如下: function func() {     delete

  • JavaScript操作XML/HTML比较常用的对象属性集锦

    节点对象属性 childNodes-返回节点到子节点的节点列表 firstChild-返回节点的首个子节点. lastChild-返回节点的最后一个子节点. nextSibling-返回节点之后紧跟的同级节点. nodeName-返回节点的名字,根据其类型. nodeType-返回节点的类型. nodeValue-设置或返回节点的值,根据其类型. ownerDocument-返回节点的根元素(document对象). parentNode-返回节点的父节点. previousSibling-返回

  • 详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

    问题描述: 使用JavaScript生成一个倒数7天的数组. 比如今天是10月1号,生成的数组是["9月25号","9月26号","9月27号","9月28号","9月29号","9月30号","10月1号"]. 这个难点就是需要判断这个月份(可能还需要上一个月份)是30天还是31天,而且还有瑞年的2月28天或者29天. 解答思路: 不需要那么复杂,在js中非常简单,

随机推荐