从数组到对象

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

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

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  7. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  8. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  9. ios – 内存泄漏与UIWebView和Javascript

    清楚地包含一个Javascript文件到我的HTML是使UIWebView泄漏内存.当我重复使用相同的UIWebView对象时,或者每当我有内容实例化一个新的漏洞时,会出现泄漏的事实,导致我认为必须有一些JavaScript文件被loadHTMLString处理,导致泄漏.有人知道如何解决这个问题吗?

  10. iOS应用程序的UI自动化测试如何与乐器和Javascript

    从WWDC2010视频会议中了解iOS应用程序的自动化UI测试,但没有实践.从代码项目project,我们可以有一个例子.这个问题在这里听到有涉及这个的人.任何限制?解决方法我建议从AlexWollmer开始使用thisblogpost.他创建了一个非常有用的JavaScript库:tuneup_jswithtest()函数,它允许测试分离和有用的帮助者以及为自动化仪器编写测试的断言.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部