JavaScript-----引用类型之Object和Array类型

JavaScript-----引用类型

1)Object类型
2)Array类型
3)Date类型
4) RegExp类型
5) Function类型
6) 基本包装类型
7) 单体内置对象

再开始之前呢,这个引用类型,我们前面也是提到啦,ECMAScript有基本数据类型和引用类型,引用类型呢,用于将数据和功能组织在一起。其实说简单呢就是对象的来源。对象是某个特定引用类型的实例。

一、Object类型

我们现在,看到的大多数引用类型值都是Object类型的实力,而且它也是ECMAScript中使用最多的一个类型。
创建Object实例的方式有两种,如下
法一:

var people = new Object();
people.name= "hello";
people.age=24;

法二:
对象字面量表示法

var people = {
	name: "hello",
	age:24
};
var people = {}var people = new Object();是相同的

虽然可以使用前面介绍的两种方法来定义对象,但是开发人员更青睐对象字面量语法,因为这种语法要求的代码量少,给人封装数据的感觉。实际上,对象字面量也是i向函数传递大量可选参数的首选方式,如下
f

function displayInfo(args) {
    var output = "";
    if(typeof args.name== "String") {
        output+="name:" +args.name+"\n";
    }
    if(typeof args.age=="number") {
        output+="age"+args.age+"\n";
    }
    alert(output);
}
displayInfo({
    name:"xiaoming",
    age:29
});

当然,访问对象属性时使用的都是点表示法,如people.name
但是在javaScript也可以使用方括号表示法来访问对象的属性。

var people = {
	name: "hello",
	age:24
};
alert(people["name"]);

var pp="name";
alert(people[pp]);

一、Array类型

当你看到array,如果你学过其他语言的话,你可以很判断这个是数组了,它是仅次于Object,在ECMAScript最常用的类型了。但是ECMAScript数组的每一项可以保存任何类型的数据。比如说,数组的第一个位置用来保存字符串,第二位来保存数值,第三位来保存对象。而且它的数组大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据。

创建数组的两种基本方式
法一:
var people = new Array();//创建的过程中,new可以省略噢
如果预先知道了数组的长度,可以传入参数
var people= new Array(20); 该数量会自动变成length属性的值
当然,也可以传入值
var people = new Array(“1111”,“222”,“333”);

法二:
数组字面量表示法

var people = [122,"222","333"];
var num=[ ] ; 创建一个空数组
alert(people[0]);//输出第一项
alert(people.length);//获取数组的长度;

数组的length很有特点,可以通过设置这个属性,从数组的末尾移除项或向数组中添加新项,如下

var people = [122,"222","333"];
people.length =2;
alert(people[2]);   //underfined

将length设置为2就会移除最后一项,要注意,数组最后一项的索引始终是length-1,因此下一个位置就是length, 我们经常通过如下代码
people[people.length]=“2221”;来添加尾项

1.检测数组

ECMAScript5中新增了 Array.isArray()方法来判断这个某个值到底是不是数组,而不用去管它在哪个全局执行环境下创建的。
if(Array.isArray(value)) {
//判断是不是数组
}

2.转换方法

我们会发现,所有的对象都具有toLocaleString() 、toString() 和valueOf()方法。当然,数组也不例外
toString方法会返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串
valueOf返回还是数组
toLocaleString()方法经常也会返回与toString和valueOf()方法相同的值,但是也由特殊情况,它与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法

var person1={
    toLocaleString :function(){
        return "111";
    },
    toString : function(){
        return "222";
    }
}
var person2={
    toLocaleString :function(){
        return "333";
    },
    toString : function(){
        return "444";
    }
}
var people=[
    person1,
    person2
];
alert(people);  //222,444
alert(people.toString());// 222,444
alert(people.toLocaleString());//111, 333

最后呢,还有一个方法,join方法,这个方法重现了toString()方法的输出,如果给它传入不同的分隔符,他就会代替逗号作为分隔符。

var colors=["111","222","333"];
alert(colors.join("||"));//   111||222||333

3.栈方法

数组可以表现得就像栈一样,ECMAScript为数组专门提供了push()和pop()方法,以便实现类似栈的行为。

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

var colors= new Array();   //创建一个数组
var count= colors.push("aaa","bbb");  //插入两个
alert(count);    //2

count=colors.push("ccc");
alert(count);   //3

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

当然,下面的数组形式也可以用

var colors =[ "111","222"];
colors.push("333");
colors[3]="444";
alert(colors.length);    //4

var item=colors. pop();
alert(item);    //444

4.队列方法

上面的栈呢,push()其实就是插入到最后一项,并返回数组长度。在队列里面呢,也是可以用的。
当然,队列还多了移除第一项和插入第一项的函数 .shift()和unshift()

shift()是能够移除数组中的第一个项并返回该项,同时将数组长度减1

var colors= new Array();   //创建一个数组
var count= colors.push("aaa","bbb");  //插入两个
alert(count);    //2

var item=colors.shift();
alert(item);   //"aaa"

unshift()是能够在数组前端添加任意各项,并返回新数组的长度。因此和pop()联合,可以从相反反向来模拟队列。

var colors = new Array();
var count = colors.unshift("111","222");

alert(count);
count=colors.unshift("333");
alert(count);

当前数组为333,111,222

5.重排序方法

数组中已经存在两个可以直接用来重排序的方法:reverse()和sort(),
我们先从reverse()开始

var number=[1,2,3,5,4];
number.reverse();
alert(number); //  4,5,3,2,1

他能起到反转数组项的顺序

sort()方法按升序排列数组项,但是呢,sort()方法会调用每个数组项的toString()转型方法,得到字符串,通过字符串来比较大小,如果我们的是数字的话,他往往不能达到我们想要的结果

var number=[0,1,5,10,15];
number.sort();
alert(number);
结果是这个    0,1,10,15,5   

所以这时候需要一个比较函数compare()

function compare(value1,value2) {
		if(value1<value2) {
		return -1;
}
else if(value1>value2) {
	return 1;
}
else {
	return 0;
}
}
或者可以改写成
function compare(value1,value2) {
		return value1-value2;
}
这个比较函数可以使用于大多数数据类型,只要将其作为参数传递给sort()方法即可
var number=[0,1,5,10,15];
number.sort(compare);
alert(number);

结果就是    0151015

如果需要把数组降序呢,只要把比较函数里面的return 1取反就好了,如下

function compare(value1,value2) {
		if(value1<value2) {
		return 1;
}
else if(value1>value2) {
	return -1;
}
else {
	return 0;
}
}
或者改成
function compare(value1,value2) {
		return value2-value1;
}

6.操作方法

首先先介绍一个concat()方法,这个方法可以基于当前数组中的所有项创建一个新数组,将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

var colors=["111","222","333"];
var colors2=colors.concat("444",["555","666"]);
alert(colors2);

//111,222,333,444,555,666

第二个方法是slice()方法,他能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数,**只有一个参数的情况下,sliece()方法返回从该参数指定位置开始到当前数组末尾的所有项,如果两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。**注意,slice()方法不会影响原始数组。

var colors=["111","222","333","444","555"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2);
alert(colors3);

第三个方法是splice()方法,这个方法很强大
它主要用途是向数组的中部插入项,但是使用这种方法的方式有如下3种

删除 ,可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数,比如splice(0,2)会删除数组中的前两项
插入 ,可以向指定位置插入任意数量的项,只需提供3个参数,起始位置、要删除的项数,要插入的项。如果要插入多个项,可以再传入第四,第五。
比如,splice(2,0,“111”,“222”);会从当前数组的位置2开始插入111和222

替换 可以向指定位置插入任意数量的项,且同时删除任意数量的项。
splice(2,1,“111”,“222”); 会删除当前数组位置2的项,然后从位置2插入111和222

7.位置方法

ECMAScript5为数组实例添加了两个位置方法 indexOf()和lastIndexOf(),这两个方法都要接收两个参数:要查找的项和(可选可不选)查找起点位置的索引

var numbers=[1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));   //3
alert(numbers.lastIndexOf(4));//5
alert(numbers.indexOf(4,4));

最后一个呢,它是从4开始查找的,也就是从numbers[3]开始找,那就只有numbers[5]才有4了,因此结果是5

8.迭代方法

ECMAScript5为数组定义了5个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象—影响this的值。
every() 对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true
fiilter() 对数组中每一项运行给定函数,该函数会返回true,则返回true的项组成的数组
forEach() 对数组中每一项运行给定函数,没有返回值
map() 对数组中每一项运行给定函数,返回每次函数调用的结果组成的数组
some() 对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true

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

9.缩小方法

ECMAScript5新增了两个缩小数组的方法,reduce()和reduceRight()
前者从数组第一项开始,后者从数组最后一项开始

使用reduce()方法可以执行求数组中所有值之和

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

alert(sum);  ///15
发布了17 篇原创文章 · 获赞 25 · 访问量 2027

猜你喜欢

转载自blog.csdn.net/weixin_44142985/article/details/102926288