首页 > 代码库 > JavaScript_引用类型①

JavaScript_引用类型①

【Object类型】

引用类型的值是引用类型的一个实例,在JavaScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,引用类型有时也被称为对象定义,因此它是描述一类对象所具有的属性和方法

对象是某个特定类型的实例,新对象是用new操作符 后面跟构造函数创建的

【Object类型】

Object类型是JavaScript中使用最多的一个类型,创建Object类型有两种方法

一:使用构造函数创建

   1:  var person=new Object();
   2:  person.name="Jack";
   3:  person.age=29;
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>
二:使用对象字面量创建
   1:  var person={
   2:      name:"Jack",
   3:      age:29
   4:  };
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style><style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

对象字面量定义法是一种简写形式,用于简化创建大量属性的对象;在使用字面量表示法创建Object对象时,属性名可以使用字符串

定义带有默认属性和方法的Object对象

   1:  var person={};
   2:  person.name="Jack";
   3:  person.age=29;
需要注意的是当我们使用对象字面量表示法创建对象的时候,是不会调用Object构造函数的。大多数开发人员使用这种方法来创建Object对象
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

【利用对象字面量向函数传递参数】

   1:  function displayInfo(args){   //函数接收一个参数
   2:      var output="";
   3:      if(typeof args.name=="string"){
   4:          output+="Name:"+args.name+"\n";
   5:      }
   6:      if(typeof args.age=="number"){
   7:          output+="Age:"+args.age+"\n";
   8:      }
   9:      alert(output);
  10:  }
  11:   
  12:  //向函数传入对象字面量
  13:  displayInfo({
  14:      name:"Jack",
  15:      age:30
  16:   
  17:  });
  18:   
  19:  displayInfo({
  20:      name:"Tom"
  21:  });
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

【访问对象的属性】

在JavaScript中可以用两种方法,访问对象的属性:

一: 与C++、Java、C#类似,可以通过 点号 来访问对象属性

二: 通过使用方括号 来访问对象属性 ,这时需要将属性以字符串的形式放在 方括号

   1:  alert(person["name"]);
   2:  alert(person["age"]);
   3:  alert(person.name);
   4:  alert(person.age);
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

【利用变量来访问属性】

var propertyName="name";  //定义变量且赋值
alert(person[propertyName]); //通过变量名来访问属性
另外使用方括号表示法,还可以避免某些容易导致语法错误的,不过习惯还是使用 点号 来访问属性
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

【Array类型】

在JavaScript中的数组与其他语言的数组,有着很大区别;最大区别是JavaScript数组中的每一项都可以保存任何类型的数据,比如第一项字符串,第二项数值,第三项对象等等。这是由于JavaScript是松散数据类型决定的

【创建数组】

与创建Object对象一样,创建数组类型也可以使用构造函数和字面量两种方法创建

一: 使用Array构造函数

   1:  var myArray=new Array();
   2:  var myArray=new Array(100); //初始化数组大小
   3:  var myArray=new Array("21",1,"jack")  //初始化数组
   4:  var myArray=Array("21",1,"jack")  //省略new操作符 创建数组
   5:  //向数组传入单个值
   6:  var myArray=new Array(6);
   7:  var names=new Array("Tom");
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style><style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>
需要注意的是在向数组传入单个值的时候,如果传入的是数值,就会造成给length 赋值

【使用字面量创建数组】

   1:  var myArray=[10,20,30,40,50];
   2:  var myArray=[]; //创建空数组
与Object类型一样,使用字面量标识法,不会调用Array构造函数
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

 

【利用length属性给数组添加新项】

   1:  var colors=["red","blue","green"]
   2:  colors[99]="yellow";
   3:  alert(colors.length);
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>