JavaScript-引用类型

在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起。尽管ECMAScript从技术上讲是一门面向对象的语言,但他不具备传统的面向对象语言所支持的类和接口等基本结构。

新对象是使用new操作符后跟一个构造函数来创建的,构造函数本身就是一个函数。

var person = new Object();

1.Obejct类型

我们看到的是大多数引用类型值都是Object类型的实例。而且,Object也是ECMAScript中使用最多的一个类型。

 

第一个种方法创建一个Obejct实例。
var person = new Obejct();
person.name = "Nicholas";
person.age = 29;
第二种方法创建一个Object实例。
<pre name="code" class="javascript">var person = {
      name : "Nicholas",
      age : 29
}

 

</pre><p><pre name="code" class="javascript">属性名也可以使用字符串
var person = {
      "name" : "Nicholas",
      "age" : 29,
       5 : true
}
使用对象字面量语法时,如果留空其花括号,则可以定义只包含默认属性和方法的对象。
var person = {};// 与new Object()相同
person.name = "Nicholas";
person.age = 29;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>对象字面量做函数参数</title>
        <script type="text/javascript">
            function displayInfo(args) {
                var output = " ",
                if (typeof args.name == "string") {
                    output += "Name:" + args.name + "\n";
                }

                if (typeof args.name == "number") {
                    output += "Age:" + args.age + "\n";
                }
                alert(output);
            }

            displayInfo ({
                name : "Nicholas",
                age : 29
            });

            displayInfo({
                name : "Gerg"
            });
        </script>
    </head>
    <body>
    </body>
</html>

使用方括号语法时:

 

 

alert(person["name"]);
alert(person.name);

 

 

2.Array类型

与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据。

 

创建数组的基本方式有两种,第一种是使用Array构造函数。
var colors = new Array();
如果传递的是数值,则会按照该数值创建包含给定项数的数组。
var colors = new Array(3);			// 创建一个包含3项的数组
var names = new Array("Greg");		// 创建一个包含1项,即字符串“Greg“的数组
可以省略new操作符
var colors = Array(3);
var names = Array("Greg");

 

var colors = ["red","blue","green"];//定义一个字符串数组
alert(colors[0]);//显示第一项
colors[2] = "black";//修改第三项
colors[3] = "brown";//新增第四项

 

检测数组

使用instance操作符

if (value instanceof Array) {

// 对数组执行某些操作

}

Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组

if (Array.isArray(value)) {

// 对数组执行某些操作

}

转换方法

var colors = ["red","blue","green"];// 创建一个包含3个字符串的数组

alert(colors.toString());// red,blue,green

alert(colors.valueOf());// red,blue,green

alert(colors);// red,blue,green

 

var person1 = {
      toLocaleString : function ()  {
           return "Nikolaos";
      }
      toString : function () {
           return "Nicholas";
      }
}

var person2 = {
      toLocaleString : function () {
          return "king";
      }
      toString : function(){
          return "k";
      }
}

var people = [person1,person2];
alert(people); //Nicholas,k
alert(people.toString());//Nicolas,k
alert(people.toLocaleString());//Nicholas,king

join()方法,接受一个参数用于分隔数组。

 

var colors = ["red","blue","green"];//

alert(colors.join(","));// red,green,blue

alert(colors.join("||"));//red||green||blue

push()方法,可以接受任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

 

var colors = new Array();// 创建一个数组
var count = colors.push("red","green");//推入两项
alert(count);//2

count = colors.push("black");//推入另一项
alert(count);//3

var item = colors.pop(); // 取得最后一项
alert(item);// "black"
alert(colors.length);//2


shift()方法和unshift()方法。

 

var item = colors.shift();//取得第一项

var count = colors.unshift("red","green");// 推入两项

重排序方法

var values = [1,2,3,4,5];

values.reverse();

alert(values);//5,4,3,2,1

sort()方法按升序排列数组项-即最小的值位于最前面,最大的值排在最后面。

var values = [0,1,5,10,15];

values.sort();

alert(values);//0,1,10,15,5

function compare(value1,value2) {

if (value1 < value2){

return -1;

}else if(value1 > value2) {

return 1;

}else {

return 0;

}

}

 

var values = [0,1,5,10,15];

values.sort(compare);

alert(values);//0,1,5,10,15

操作方法

ECMAScript为操作已经包含在数组中的项提供了很多方法,其中,concat()方法可以基于当前数组中的所有项创建一个新数组。

var colors = ["red","green","blue"];

var colors2 = colors.concat("yellow",["black","brown"]);

alert(colors);

alert(colors2);


slice(),它能够基于当前数组中的一个或多个项创建一个新数组。

slice()方法可以接受一或两个参数。纪要返回项的起始和结束位置。

var colors = ["red","green","blue","yellow","purple"];

var colors2 = colors.slice(1);

var colors3 = colors.slice(1,4);

splice()方法

删除:可以删除任意数量的项,只需指定2个参数,要删除的第一个项的位置和要删除的项数。splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需要提供3个参数:起始位置,0(要删除的项数),和要插入的项。如果要插入多个项,可以再传入第四,第五以致任意多个项。splice(2,0,"red","green").

替换:可以指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数,起始位置,要删除的项数,和要插入的任意数量的项。

 位置方法

ECMAScript 5为数组实例添加了两个位置方法,indexOf()和lastIndexOf()。要查找的项和(可选的)表示查找七点位置的索引。

var number = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4));//3

迭代方法

ECMAScript 5数组定义了5个迭代方法。

every():对数组中的每一项进行给定函数,如果该函数对每一项都返回true,则返回true.

filter():对象数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true.

 

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
      return (item>2);
})
alert(everyResult);// false

var someResult = numbers.some(function(item,index,array))
{
      return (item>2);
}
alert(someResult);//true


缩小方法

 

新增了两个缩小数组的方法:reduce()和reduceRight().

reduce()方法从数组的第一项开始。逐个遍历到最后,而reduceRight()则从数组的最后一项开始,向前遍历到第一项。

该函数接受4个参数:前一个值,当前值,项的索引和数组对象,这个函数返回的任何值都会作为第一个参数自动转给下一项。

 

var values = [1,2,3,4,5];
var sum = values.reduce(function(pre,cur,index,array){
    return pre + cur;
})
alert(sum);//15

 

 

3.Date类型

创建一个日期对象。

var now = new Date();

var someDate = new Date(Date.parse("May 25,2004"));

如果传入Date.parse()方法的字符串不能表示日期,那么他会返回NaN。

var someDate = new Date("May 25,2005");

Date.UTC()方法同样也返回表示日期的毫秒数。在这些参数中,只有两个参数(年和月)是必需的。

// GMT时间2000年1月1日午夜零时

var y2k = new Date(Date.UTC(2000,0));

// GMT时间2005年5月5日下午5:55:55

var allFive = new Date(Date.UTC(2005,4,5,17,55,55));

ECMAScript添加了Date.now()方法。返回表示调用这个方法是的日期和时间的毫秒数。

// 去的开始时间

var start = Date.now();

// 调用函数

doSomething();

// 取得停止时间

var stop = Date.now();

result = stop - start;

日期格式化方法

toDateString()-以特定于实现的格式显示星期几,月,日和年

toTimeString()-以特定于实现的格式显示时,分,秒和时区。

toLocalDateString()-以特定于地区的格式显示星期几,月,日和年。

toUTCString()-以特定于实现的格式完整的UTC日期。

4.RegExp类型

ECMAScript通过RegEx类型来支持正则表达式。

var expression = /pattern/flags;

其中的模式部分可以死任何简单或复杂的正则表达式,可以包含字符类,限定符,分组。

 

/*匹配字符串中所有at"的实例*/
var pattern = /at/g;
/*匹配第一个"bat"或"cat",不区分大小写*/
var pattern2 = /[bc]at/i;
/*匹配所有以"at"结尾的3个字符地组合,不区分大小写*/
var pattern3 = /.at/qi;

正则表达式中的元字符包括;

 

{[{\ ^ $ | } ? * + .}]}
 

/*匹配第一个“[bc]at”,不区分大小写*/

var pattern2 = /\[bc\]at/i;

/*匹配所有“.at”,不区分大小写*/

var pattern4 = /\.at/gi;

 

/*匹配第一个"bat"或"cat",不区分大小写*/
var pattern1 = /[bc]at/i;
/*与pattern1相同,只不过是使用构造函数创建的*
/
var pattern2 = new RegEx["[bc]at","i"];

RegEx实例属性

 

global:布尔值,表示是否设置了g标志

ignoreCase:布尔值,表示是否设置了i标志

lastIndex;整数,表示开始搜索下一个匹配的字符位置,从0算起。

multiline:布尔值,表示是否设置了m标志

source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。

var pattern1 = /\[bc\]at/i;

RegExp()实例方法,RegEx对象的主要方法是exec().该方法是专门为捕获组而设计的。exec()接受一个参数,即要应用模式的字符串。或者在没有匹配项的情况下返回null。返回的数组虽然是Array的实例,但包含两个额外的属性:index和input。其中,index表示匹配项在字符串中的位置,而input表示应用正则表达式的字符串。

 

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);
alert(matches.index);// 0 
alert(matches.input);// "mom and dad and baby"
alert(matches[0]);// "mom and dad and baby"
alert(matches[1]);// " and dad and baby"
alert(matches[2]);// " and baby"

对于exec()方法而言,即使在模式中设置了全局标志(g),它每次也只会返回一个匹配项。在不设置全局标志的情况下,在同一字符串上多次调用exec()将始终返回第一个匹配项的信息。

 

 

var text = "cat,bat,sat,fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
alert(matches.index);// 0
alert(matches[0]);//cat
alert(pattern1.lastIndex);//0

matches = pattern1.exec(text);
alert(matches.index);//0
alert(matches[0]);//cat
alert(pattern1.lastIndex);//0

var pattern2 = /.at/g;
var matches = pattern2.exec(text);
alert(matches.index);//0
alert(matches[0]);//cat
alert(pattern2.lastIndex);//0

matches = pattern2.exec(text);
alert(matches.index);//5
alert(matches[0]);//bat
alert(pattern2.lastIndex);//8

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 





 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值