首页 > 代码库 > 【javascript 引用类型（一）】

【javascript 引用类型（一）】

2024-07-01 23:40:42   223人阅读

javascript 的引用类型大致分为：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型、基本包装类型和单体内置对象。这里我们着重介绍 Object 类型、Array 类型和 RegExp 类型。

【Object 类型】

创建 Object 实例的方式有两种，一种是使用 new 操作符后跟 Object 构造函数，代码如下：

var person = new Object();
person.name = ‘Nicholas‘;
person.age = 19;

另外一种是使用对象字面量表示法，代码如下：

var person = {
    name:‘Nicholas‘,   //注意：这里是逗号，而不是分号
    age:29
};   //注意：结尾处的分号不要丢失

在使用对象字面量法时，属性名也可以使用字符串，例如以下代码：

var person = {
    ‘name‘:‘Nicholas‘,   //注意：这里是逗号，而不是分号
    ‘age‘:29
};   //注意：结尾处的分号不要丢失

另外，使用对象字面量语法时，如果留空其花括号，则可以定义只包含默认属性和方法的对象，例如以下代码：

var person = {};  //与 new Object()相同
person.name = ‘Nicholas‘;
person.age = 29;

大多数的开发人员更加青睐于对象字面量的语法，因为这种语法要求的代码量少，而且能够给人封装数据的感觉。实际上，对象字面量也是向函数传递大量可选参数的首选方式，例如：

function disInfo(args){
    var msg = ‘‘;
    if(typeof args.name == ‘string‘){
        msg += (‘name:‘ + args.name + ‘ ‘); 
    }
    if(typeof args.age == ‘number‘){
        msg += (‘age:‘ + args.age);
    }
    console.log(msg);
}
disInfo({
    name:‘name1‘,
    age:12
});
disInfo({
    name:‘name2‘,
});
disInfo({
    age:13
});
disInfo({
});

在这里例子中，函数 displayInfo() 接受一个名为 args 的参数。这个参数可能带有一个名为 name 或 age 的属性，也可能这两个属性都有或者都没有。在这个函数的内部，我们通过 typeof 操作符来检测每个属性是否存在，然后再基于相应的属性来构建一条要显示的消息。然后我们调用了四次这个函数，虽然每次调用传递的参数不同，但是都能够正常执行。

在 javascript 中除了使用点表示法来访问对象属性之外，还可以使用方括号表示法来访问对象属性。在使用方括号语法时，应该将要访问的属性以字符串的形式方在方括号中，例如以下代码：

var person = {
    ‘name‘:‘Nicholas‘,   //注意：这里是逗号，而不是分号
    ‘age‘:29
};   //注意：结尾处的分号不要丢失
console.log(person[‘name‘]);   //Nicholas 
console.log(person.name);   //Nicholas

从功能上看，这两种访问对象属性的方法没有任何区别，但是方括号语法的主要优点是可以通过变量访问属性，例如：

var person = {
    ‘name‘:‘Nicholas‘,   //注意：这里是逗号，而不是分号
    ‘age‘:29
};   //注意：结尾处的分号不要丢失
var newPro = ‘name‘;
console.log(person[newPro]);   //Nicholas 
console.log(person.newPro);   //undefined

如果属性名中包含导致语法错误的字符，或者属性名使用的是关键字或保留字，也可以使用方括号表示法，例如：

var person = {
    ‘first name‘:‘Nicholas‘,   //注意：这里是逗号，而不是分号
    ‘age‘:29
};   //注意：结尾处的分号不要丢失
console.log(person[‘first name‘]);   //Nicholas

【Array 类型】

1.创建数组

创建数组的基本方式有两种，一种是使用 Array 构造函数，代码如下：

var arr = new Array();

在使用 Array 构造函数时也可以省略 new 操作符。例如：

var arr = Array();

创建数组的第二种方式是使用数组字面量表示法，例如：

var color = [‘red‘,‘blue‘,‘yellow‘];

2.读取和设置数组的值

在读取和设置数组的值时，要使用方括号并提供相应值的基于0的数字索引，例如以下代码：

var color = [‘red‘,‘blue‘,‘yellow‘];
console.log(color[0],color[1],color[2]);   // red blue yellow 
color[1] = ‘black‘;
console.log(color[0],color[1],color[2]);   //red black yellow

3.数组的 length 属性

使用数组的 length 属性可以返回数组的长度，数组的 length 属性不是只读的，可以通过这个属性从数组的末尾移除项或者添加新项。例如：

var color = [‘red‘,‘blue‘,‘yellow‘];
console.log(color[0],color[1],color[2]);   // red blue yellow 
color[1] = ‘black‘;
console.log(color[0],color[1],color[2]);   //red black yellow 
console.log(color.length);   // 3
color[5] = ‘white‘;
console.log(color.length);   // 6
var colors = ‘‘;
for(var i =0;i < color.length;i ++){
    colors += color[i] + ‘ ‘;
}
console.log(colors);   //red black yellow undefined undefined white

4.数组的转换方法

所有的对象都具有 toLocaleString()、toString()、valueOf()方法。其中，调用数组的 toString() 方法会返回由数组中的每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用 valueOf()方法返回的还是数组。实际上，为了创建这个字符串会调用数组每一项的 toString() 方法。例如以下代码：

var colors = [‘red‘,‘green‘,‘blue‘];
alert(colors.toLocaleString());  //red,green,blue 
alert(colors.toString());  //red,green,blue 
alert(colors.valueOf());  //red,green,blue 
alert(colors);  //red,green,blue

在这里，我们首先显示的调用了 toString() 和 valueOf()方法，以便返回数组的字符串表示，每个值的字符串表示拼接成了一个字符串，中间以逗号分隔。最后一行代码直接将数组传递给了 alert() ，由于 alert() 要接收字符串参数，所以它会在后台调用 toString() 方法，由此会得到与直接调用 toString() 方法相同的结果。

另外，toLocaleString() 方法经常也会返回与 toString() 方法和 valueOf() 方法相同的值，但是也不总是如此。当调用数组的 toLocaleString() 方法时，它也会穿件一个数组值的以逗号分隔的字符串，而与前面两种方法唯一的不同之处在于，这一次为了取得每一项的值，调用的是每一项的toLocaleString() 方法，例如以下代码：

var person1 = {
    toString:function(){
        return ‘person1ToString‘;
    },
    toLocaleString:function(){
        return ‘person1ToLocaleString‘;
    }
};
var person2 = {
    toString:function(){
        return ‘person2ToString‘;
    },
    toLocaleString:function(){
        return ‘person2ToLocaleString‘;
    }
};
var person = [person1,person2];
alert(person);   //person1ToString,person2ToString
alert(person.toLocaleString());  //person1ToLocaleString,person2ToLocaleString
alert(person.toString());    //person1ToString,person2ToString

5.栈方法

在ECMAScript 中，数组可以表现的就像栈一样，后者是一种可以限制插入和删除项的数据结构。栈是一种LIFO(Last-In-First-Out，先进后出)的数据结构，而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置 ——栈的顶部。ECMAScript 为数组专门提供了 push() 和 pop() 两种方法，一遍实现类似栈的行为。

push()方法可以接收任意数量的参数，把他们逐个添加到数组末端，并返回修改后数组的长度。例如以下代码：

var arr = new Array();
var item1 = arr.push(‘name1‘,‘name2‘,‘name3‘);
console.log(arr.toString());  //name1,name2,name3
console.log(arr.length);  //3
console.log(item1);   //3

而 pop() 方法则从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。例如以下代码：

var arr = new Array();
var item1 = arr.push(‘name1‘,‘name2‘,‘name3‘);
console.log(arr.toString());  //name1,name2,name3
console.log(arr.length);  //3
console.log(item1);   //3
var item2 = arr.pop();
console.log(arr.toString());   //name1,mame2
console.log(arr.length);   //2
console.log(item2);  //name3

【未完待续】


联系
我们