搜索
首页web前端js教程举例讲解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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)