本文是自己的学习总结,供初学者参考使用。大神请忽略。。。。知识总结自JS高级编程^ _ ^
首先,JS中的Array类型的每一项可以保存任意类型的数据。而且数组的大小是可以动态调整的,它是随着数据的添加自动增长的。
* 创建数组的方式
第一种是使用Array构造函数。
var names=new Array(); var names=Array(); //可以省略new 操作符 。 var names=new Array(20); var names=new Array("Merry","Jack","Lily");
第二种是使用数组字面量表示法。项之间用逗号隔开。
var names=["Mary","Rose"]; var names=[]; //空数组 var numbers=[4,5,]; //这样会创建一个包含2项或者3项的数组,不要这么做。 var options=[,,,,]; //这样会创建一个包含4项或者5项的数组。不要这样做。
在读取或者设置数组的值时,要使用方括号并提供索引。索引的值的不同可以改变数组的结构。
var numbers=[4,5,9,10,11,12]; console.log(numbers[1]); // 5 numbers[6]=13 ; //直接把值13加入到数组中。此时数组的长度为7 numbers[99]=99; //此时数组的长度变为100。其他的值都是undefined var colors=["Red","Green","Orange"]; colors.length=2; console.log(colors[2]); // undefined
*转换方法
所有对象都具有toLocalString()、toString()、valueOf()方法。
var names=["Merry","Lily","Tom"]; console.log(names.toString()) ; //Merry,Lily,Tom console.log(names,valueOf()) ; // ["Merry", "Lily", "Tom"] console.log(names); // ["Merry", "Lily", "Tom"]
toLocalString()方法经常也会返回与前两个方法相同的值,但也不总是如此。请看下面的例子。
var person1={ toLocaleString:function(){ return "Nikolaos"; }, toString:function(){return "Niko";} } var person2={ toLocaleString:function(){ return "Grigorios"; }, toString:function(){return "Greg";} } var people=[person1,person2]; console.log(people); //[object,object] in chrome console.log(people); /*[Object { toLocaleString=function(), toString=function()}, Object { toLocaleString=function(), toString=function()}] in firefox */ alert(people); //Nikp,Greg console.log(people.toString()); //Nikp,Greg console.log(people.toLocaleString()); //Nikolaos,Grigorios
*栈方法与队列方法
数组可以表现的像栈和队列一样,栈是一种后进先出的数据结构,就像一个只允许一人通过的死胡同,你先进去的你就只能最后出来。而队列则是先进先出的数据结构。听名字就知道像排队一样,谁先来得谁最先接受服务,最先离开。JS专门给数组提供了一些方法,以便它可以实现栈和队列那样的行为。
主要用到的方法就是push() ; pop() ; shift() ; unshift() ;
push() 方法是可以接收任意数量的参数,把它们逐个加入到数组的末尾,返回的修改后的当前数组的长度。
pop()方法则是从数组中移除末尾最后一项,返回移除的项。
shift()移除数组中的第一个项,返回该项。
unshift()在数组前端添加任意项,返回数组的长度。
var colors=new Array(); var count=colors.push("red","green"); console.log(count) // 2 count=colors.push("black"); console.log(count) // 3 var item=colors.pop(); console.log(item); //black console.log(colors.length) //2 console.log(colors.shift()); // red console.log(colors.unshift("Yellow","CCCC")) // 3 Yellow,CCC,green
*重排序方法
最直接的方法是sort()|默认是按照升序排列数组|和reverse()|反转数组|方法。
var number=[0,1,5,10,15]; console.log(number.reverse()) // [15, 10, 5, 1, 0] console.log(number.sort()) //[0, 1, 10, 15, 5]
可以看到reverse()方法将数组反转了,,可是sort()方法却并没有得到我们想要的效果。这是因为后者先会调用数组的toString()方法,然后比较得到的字符串,虽然数值10大于5但是转为字符串后却到了5的前面。因此我们一般不会直接让数值数组利用sort()进行排序,而是会给sort()一个排序方法。
var number=[0,1,10,5,15]; function compare(value1,value2){ if(value1 < value2) { return 1;} else if(value1>value2) { return -1;} else { return 0;} } number.sort(compare); console.log(number); // [15, 10, 5, 1, 0]
*操作方法
concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建一个副本,然后将接收到的参数添加到副本的末尾,返回这个新的副本数组。
var names=["May","Alisa"]; var newnames=names.concat("Jacky",["Mark","Mohan"]); console.log(newnames[3]); //Mark console.log(newnames) // ["May", "Alisa", "Jacky", "Mark", "Mohan"]
slice()方法是基于当前数组的一个或者多个item创建新的数组。当接受一个参数时,会返回从该参数位置开始到末尾的所有项。当接受两个参数时,返回起始到结束但不包括结束位置的所有项。
var names=["May","Alisa"]; var newnames=names.concat("Jacky",["Mark","Mohan"]) var newnames2=newnames.slice(1); var newnames3=newnames.slice(2,4); var newnames4=newnames.slice(-1,-3); var newnames5=newnames.slice(-2,-1); //当参数为负数时,会加上数组的长度来确定位置 console.log(newnames2) // ["Alisa", "Jacky", "Mark", "Mohan"] console.log(newnames3) // ["Jacky", "Mark"] console.log(newnames4) //[] console.log(newnames5) //["Mark"]
splice()方法算是最强大的数组方法了,它有很多种用法。主要用途是向数组中部插入项。使用方式有3种。
*删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如splice(0,2)则会删除前两项。
*插入:可以向指定位置插入任意数量的项,需提供3个参数:起始位置,0(要删除的项数),要插入的项。例如splice(2,0,"AAA","BBB")从位置2开始插入两项。
*替换:插入项的同时删除原来位置的项,相当于替换。需提供3个参数:起始位置,要删除的项数,要插入的项。例如splice(2,1,"AAA","BBB")从位置2开始先把原来的删除,再插入新的两项。
var names=["Novia","Alisa","May"]; var removednames=names.splice(0,1); console.log(names) //["Alisa", "May"] console.log(removednames) //["Novia"] removednames=names.splice(1,0,"Jacky","Melody"); console.log(names); // ["Alisa", "Jacky", "Melody", "May"] console.log(removednames) // [] removednames=names.splice(1,1,"Cherry","Tom") console.log(names) // ["Alisa", "Cherry", "Tom", "Melody", "May"] console.log(removednames) // ["Jacky"]
*位置方法
数组实例有两个位置方法 indexOf()和 lastIndexOf()。两者都接收两个参数:要查找的项和(可选)表示查找起点位置的索引。前者是从前向后查找,后者是从后向前查找。
var number=[1,2,3,4,4,5,6]; console.log(number.indexOf(4)) //3 console.log(number.lastIndexOf(4)) //4 console.log(number.indexOf(4,4)) //4 console.log(number.lastIndexOf(4,4)) //4
*迭代方法
数组有5个迭代方法。每个方法都要接收2个参数:要在每一项上运行的函数和(可选)作用域对象。根据使用方法的不同,这个函数执行后的返回值可能会也可能不会影响返回值。
*every(): 对数组的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true.
*filter(): 对数组的每一项运行给定的函数,返回该函数会返回true的项组成的数组。
*forEach(): 对数组的每一项运行给定的函数,没有返回值。
*map(): 对数组的每一项运行给定的函数,返回每次调用的结果组成的数组。
*some(): 对数组的每一项运行给定的函数,如果该函数对任意一项返回true.则函数返回true.
注意的是:所有的方法都不会影响数组的值。
其中every()和some()是最相似的。都用于查询数组的项是否满足某一条件。如果全部满足,返回true.则every()才会返回true.只要有一项返回true。some()就会返回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); var someResult=numbers.some(function(item,index,array){return item>2}) console.log(someResult) var filterResult=numbers.filter(function(item,index,array){return item>2}) console.log(filterResult) var mapResult=numbers.map(function(item,index,array){return item*2}) console.log(mapResult) //forEach 方法没有返回值。可以利用数组的每一项执行一些操作 numbers.forEach(function(item,index,array){ if(item>3) console.log(‘this number is > 3.‘) else if(item<3) console.log(‘this number is < 3.‘) else console.log(‘this number is = 3.‘) })
得到的结果为:
*归并数组
ECMAScript 5 新增了两个归并方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终的返回值。reduce()从数组第一项开始逐个遍历到最后。而reduceRight()是从最后一项开始向前遍历。
var numbers=[1,2,3,4,5,4,3,2,1]; var sum=numbers.reduce(function(pre,cur,index,array){return pre+cur}) console.log(sum); //25 var sum2=numbers.reduceRight(function(pre,cur,index,array){return pre+cur}) console.log(sum2) //25
使用这两个方法,主要取决于要从哪头遍历数组,除此之外,它们完全相同。