当前位置：首页 > 资讯 > 技术文档

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

时间：2022-02-17 08:01 编辑：来源：阅读：
扫一扫，手机访问

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

[b]从数组到对象[/b]

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};

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

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

name就是属性(property),run本身是个函数，在这个对象中，我们叫方法(method)。 [b]访问对象的属性 [/b]有两种方式访问对象的属性。用数组的形式如：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

[b]调用对象的方法[/b]

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

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

var hero={};

hero是个空的对象。

typeof hero.breed;//undefined

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

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

[b] 调用方法 [/b]

 hero.sayName();//Leonardo

[b] 删除属性 [/b]

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

[b]This[/b]

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

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

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 操作符。。。 [b]全局对象 [/b]上几节我们说过全局变量的事情，已经说过了我们要尽量避免使用全局变量，当我们学过对象的时候，我们在看看全局变量究竟怎么回事，其实全局变量就是全局对象一个属性了。如果主机的环境是web浏览器，全局变量就是window。如果我们定义 var a = 1; 我们可以这么理解：一个全局变量a，做为window的一个属性a.我们可以这么调用window.a或者window['a'] 再看看预定义函数的parseInt('123 m');我们可以写为window.parseInt('123 m'); [b]constructor 属性 [/b]对象建立之后，后台有创建了个隐藏属性，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() ,更深的层次应用以后几个教程在说明。 [b]instanceof 操作符 [/b]用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();//错误 [b]函数返回对象 [/b]可以用构造函数来创建个对象，也可以通过普通函数返回对象来创建对象

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}。。这点要注意 [b] 传递对象 [/b]如果传递一个对象到函数里，那么传递的是个引用。如果改变了这个引用，也就会改变原始的对象。下面是个对象赋值的例子

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

[b]对象的比较 [/b]两个对象的比较如果是true的话，那么他们就是同一个对象的引用。

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

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

全部评论(0)

上一篇：JavaScript中利用各种循环进行遍历的方式总结
下一篇：javascript几个易错点记录

资讯排行榜
更多>>