引用类型(数组常用方法)

引用类型的值(对象)是引用类型的一个实例。在ECMAScript中,引用类型是一种数据结构,用于把数据和功能组织在一起。Javascript中的数组与其他语言的数组都是数据的有序列表,但是又与其他语言的数组有着很大的区别,举个例子Java中数组里面只能存储相同的数据类型,而在ECMAScript中,数组可以存储不同类型的数据。数组的大小也可以动态的调整。随着数据的增加自动增长以容纳新数据。

创建数组的基本方式有两种:

(1)使用Array构造函数

         var array=new Array();//一个空数组

如果预先知道要保存的项目数量,也可以给构造函数传递该数量,该数量会自动变成length属性的值。例如:

       var arrays=new Array(10);//创建一个长度为10的数组,每个元素的值是undefined

当向构造函数中传递多个数值参数时:(和传递多个字符串的效果一样,参数变成数组中包含的项)

var a=new Array(10,20);

也可以向数组的构造函数中传递数组中包含的项

      var colors=new Array("red","green","white",2);


 另外还可以去掉new,和有new的效果一样。

(2)第二种方式:(数组字面量的方式)由一对包含数组项的方括号表示,数组项之间可以用逗号分隔如下;

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

var names=[];//创建一个空数组

var values=[1,2,]//不建议,创建一个包含2项或3项的数组,在IE8版本之前会创建三项(1,2,undefined),其他浏览器会创建一个包含2项的数组,值为(1,2)。

var opotions=[,,,,,,]//不建议,创建一个包含6项或7项的数组, 浏览器支持如上。

读取和设置数组值时,要使用方括号对提供相应值的基于0的数字索引,如下:

  var colors=new Array("red","green","white");

console.log(colors[0]);//red

console.log(colors[1]);//green

console.log(colors[2]);//white

console.log(colors[3]);//undefined

设置也可以使用colors[索引]=‘值’的形式:

colors[3]='';

console.log(colors);

console.log(colors);

数组的项数保存在其length属性中,length始终会返回0或者更大的值,length很有特点,不是只读的,因此可以设置这个属性从数组的末尾移除项,或者向数组中添加新项。(注意数组的最后一个元素的索引是length-1)。

数组最多可以包含4294967295个项,几乎可以满足任何编程需求了,超出这个上限会发生异常,而创建一个初始大小与这个上限接近的数组,则可能会导致运行时间超长的脚本错误。

接下来我们看下数组的常用方法:

(1)检测数组:instanceof操作符,检测某个对象是不是XXX的实例(如下检查colors对象是不是Array的实例,是返回true,不是返回false)

var colors=["green","red","white"]

console.log(colors instanceof Array);//true

console.log(colors instanceof Object);//true

instanceof操作符存在的问题在于假定只有一个全局执行环境,如果网页中包含多个框架,那么实际上就存在两个以上的不同的执行环境,也就存在两个以上不同版本的Array构造函数,如果你从一个框架向另外一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。为了解决这个问题ECMAScript5新增加了Array.isArray()方法,这个方法的最终目的是确定某个值到底是不是数组,而不管在那个全局环境中创建的。

if(Array.isArray(colors )){

//要执行的操作

}

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array

(2)转换方法

所有对象都具有toLocaleString() toString() valueOf()方法。

valueOf()返回数组的原始值,也就是数组本身。

toString()把数组转换成字符串并返回结果。比如我们alert(colors)的时候就默认的调用了数组的toString();

console.log(colors.toString())

如果数组的元素是对象:

toLocaleString()

 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

toString()和toLocaleString()区别:

 

使用join()方法可以重现上述的方法的输出,join()接下来细讲。

如果数组中有一项是undefined或者是null,该值在join(),toString(),toLocaleString(),valueOf()方法返回的结果都是空字符串。

(3)栈方法 

ECMAScript5提供了push()和pop()方法,以便实现类似栈的行为。栈是一种后进先出的数据结构。(操作的是数组的末尾)

push()方法将一个或多个元素添加到数组的末尾(也可是对象或数组形式),并返回该数组的新长度。修改的是原数组。

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度,

元素如果是对象就返回对象

(4) 队列(通道)

队列访问的数据结构是先进先出,(也就是操作的数组的开头)

shift()删除并返回数组的第一个元素,改变的是原数组

和push结合使用可以像使用对列一样使用数组。

unshift()向数组的开头添加一个或更多元素,并返回新的长度 ,改变原数组。

使用unshift()和pop()也可以从相反方向实现对列。

(5)重排序方法

数组中的sort()和reverse()是只可以用来重排序的方法。

reverse()方法颠倒数组中元素的位置,并返回该数组的引用。操作的是原数组如下:

var array1=[1,2,"red",8,6,9];
array1.reverse();
console.log(array1);

sort() 方法对数组的元素进行排序,操作的是原数组,是按照元素字符串顺序排列如下:

var arrrr1=[1,2,20,10];
arrrr1.sort();
arrrr1

因此sort()方法可以传入一个比较器函数,这个函数有两个参数如下:

function compare(value1,value2){

if(value1<value2){

return -1;

}else if(value1<value2)){

return 1;

}else{

return 0;

}

},

如果其中一个元素时对象,写比较器函数的时候按对象的某个属性排序即可如:

function compare(value1,alue2){

return value1.age - value2.age

}

(6)操作方法

concat()连接两个或更多的数组,并返回新数组。不改变原数组

 slice()从某个已有的数组返回选定的元素,可以接受两个参数,既要返回项的起始和结束位置。只有一个参数的情况下,返回从该参数指定的位置到数组末尾的所有项。如果有两个参数,返回起始位置和结束位置之间的项,不包括结束位置的项(含头不含尾),不影响原数组,返回新的数组是数组截取的方法。如下:

var colors=['red',"green","white","purper","pink"];
var b=colors.slice(2);
console.log(colors);

console.log(b)

两个参数时:

 var colors=['red',"green","white","purper","pink"];
var b=colors.slice(2,4);
console.log(colors);

console.log(b);

splice() 数组中功能强大的方法。splice()方法改变原数组。

删除:两个参数,开始位置和要删除的项数

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

var removeEle=colors.splice(1,2);
console.log(colors);

console.log(removeEle);

插入:三个参数,起始位置,0(要删除的项数),要插入的项.注意从1的索引位置开始,原来1索引位置的元素向后移。

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

var add=colors.splice(1,0,"yellow","lightGreen");
console.log(colors);

console.log(add);

替换:三个参数,起始位置,要删除的项数,要插入的项

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

var remove=colors.splice(1,3,"yellow","lightGreen");

console.log(colors);

console.log(remove);

join()数组拼接,把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。不改变原数组,如果元素时对象,就是

[Object Object]

var array=["red","green","bule"];

array.join("||");
console.log(array);

使用join()把数组变成字符串"redgreenbule"

var array1=["red","green","bule"];
var c =array1.join("");
console.log(c);

(7)位置方法

indexOf()和lastIndexOf()这两个方法都接收两个参数,要查找的项和查找起点位置的索引(可选),indexOf()从数组的开头查找,lastIndexOf()从数组的结尾向前开始查找。都会返回查找想在数组中的位置,没找到的情况返回-1,在比较都一个参数与数组的每一项会使用全等操作符,也就是说查找的项必须严格相等(使用===)。

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

console.log(numbers.indexOf(4));//3

console.log(numbers.lastIndexOf(4));//5

console.log(numbers.lastIndexOf(4,4));//3

find() 和findIndex()

 find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

(8)迭代方法

every(),filter(),forEach(),some(),map()

every()对数组运行的每一项给定函数,如果该函数对每一项都返回true,则返回true;

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

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

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

some()对数组运行的每一项给定函数,如果该函数对任意一项返回true就会返回true。

方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值

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

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));

every()和some()都是用于查询数组中的项是否满足某个条件,对every()来说,传入的函数必须不许对每一项都返回true,这个方法才返回true,否则他就返回false,而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)

})

console.log(everyresult);//false

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

var everyresult=numbers.some(function(item,index,array){

return (item>2)

})

console.log(everyresult);//true

filter()函数,他利用指定的函数确定是否在返回的数组中包含某一项,例如要返回所有数组都大于2的数组

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

var everyresult=numbers.filter(function(item,index,array){

return (item>2)

})

console.log(everyresult);

map()函数也返回一个数组,而这个数组的每一项都在原数组中的对应项上运行传入函数的结果,例如要给数组的每一项乘以二,返回这些乘积组成的数组。

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

var everyresult=numbers.map(function(item,index,array){

return item*2

})

console.log(everyresult);

forEach()对数组的每一项运行传入的函数,返回值是undefinde。

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

numbers.forEach(function(item,index,array){

alert(item+2);

})

(9)归并方法

reduce(),reduceRight()这两个方法都会迭代数组的所有项,然后构建一个最终返回的值,reduce()从数组的第一项开始,逐个遍历到最后,reduceRight()是从数组的最后一项开始,向前遍历到第一项。这两个方法都接收两个参数:一个在每一项上调用的函数,和(可选)作为归并基础的初始值。传给reduce(),reduceRight()的函数接收四个参数:前一个值,当前值,项的索引和数组对象这个函数返回的任何值都会作为第一个参数传递给下一项。第一次迭代发生在数组的第二项上,因此第一个参数时数组的第一项,第二个参数是数组的第二项。

一般用这个方法可以做数组所有元素求和:

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

var everyresult=numbers.reduce(function(pre,curr,index,array){

return pre+curr;

})

console.log(everyresult);

 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值