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


Posted in Javascript onNovember 16, 2015

从数组到对象

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 相关文章推荐
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
实例代码详解jquery.slides.js
Nov 16 #Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 #Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
常用javascript表单验证汇总
Jul 20 #Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 #Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python 字典的打印实现
2019/09/26 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python代码实现猜拳小游戏
2020/11/30 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
干部选拔任用方案
2014/05/26 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
公司租房协议书
2014/10/14 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL