您的位置:首页 > Web前端 > JavaScript

JavaScript之数组方法(Array对象属性)

2017-03-30 23:24 711 查看

栈方法

JavaScript数组也提供了一种让 数组的行为 像其它数据结构的方法,数组也可以像栈一样,栈是一种限制插入和删除的数据结构
栈是一种后进先出的数据结构,最新添加的内容最早移除。

栈中的操作分别是插入和移除,只发生在栈的顶部,push()方法(插入)和pop()方法(移除)

push()方法可以接收任意多的参数,从末尾插入数据,把它们逐个添加个数组的末尾,并返回修改后数组的 长度

pop()方法从数组末尾移除最后一项,减少length值,返回移除的项

var colors = new Array();
var count = colors.push("red", "blue"); //为数组依次插入两个值red,blue
alert(count); //返回count的长度为2

count = colors.push("black"); //再在数组末尾插入一个项black
alert(count); //返回count的长度为3

var item = colors.pop(); //从数组末尾移除一个项
alert(item); //移除的项是black,返回black
alert(colors.length); // 此时数组的长度为2


也可以将栈与其它数组一起使用:

var colosrs = ["red", "blue"];
colors.push("yellow");
alert(colors); //red,blue,yellow
colors[3] = "orange";
alert(colors.length); //返回4
alert(colors); //red,blue,yellow,orange

var item = colors.pop(); //移除数组末尾的项
alert(item); //返回orange
alert(colors); //red,blue,yellow


队列方法

栈方法是 后进先出 的数据结构,而队列方法则是 先进先出 的数据结构队列在列表的末端添加项,在列表的前端移除项

push()方法是从末端添加项并返回数组长度,而shift()则是移除列表的第一项并返回该项。

var colors = new Array();
var count = colors.push("red", "blue"); //向数组末端依次添加两个项。
alert(count); //返回red,blue
alert(colors); //返回 red,blue
alert(colors.length); //返回2

colors[2] = "yellow"; //向数组添加一项yellow
alert(colors.length); //返回3
alert(colors); //返回 red,blue,yellow

var item = colors.shift(); //移除数组前端的第一项
alert(item); //返回移除的项red
alert(colors.length); //返回2
alert(colors); //blue yellow


前端第一项移除数据用shift()方法,那么从前端插入数据则用unshift()方法pop()方法从末尾移除数据

push()和shift()是正向队列方法,unshift()和pop()是反向队列方法。


栈方法与队列方法的区别:

栈只有一个进口或出口,后进先出的数据结构,最后一个进去,第一个出来。有push()方法(插入数据)和pop()方法(移除数据)。

队列各有一个进口和出口,先进先出的数据结构,第一个进去,第一个出来,

push()和shift()正向队列方法,unshift()和pop()反向队列方法。

重新排序方法

数组中已经存在两个可以用来排序的方法:reverse()和sort()

reverse()方法反向显示数组的排列顺序:

var values = [1, 2, 3, 4]; //数组元素的原顺序
values.reverse(); //数组反向排序
alert(values); //返回4,3,2,1
但这个方法不灵活。
sort()方法默认是升序排序的,即最小值在最前端,最大值在最后端。

为了实现真正意义上的排序,sort()可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面

比较函数接收两个参数,如果第一个参数应位于第二个参数前面,则返回负值,如果第一个参数与第二个参数相等,则返回0,如果第一个参数位于第二个参数后面,则返回1,这是升序排序。如果是降序,则相反。

比较函数为:升序排序

function bjhs(value1,value2) {
if(value1 < value2) {
return -1; //返回负数,value1在value2前面
} else if(value1 > value2) {
return 1; //返回1,value1在value2后面
} else {
return 0; //返回0,value1与value2相等
}

}


完整sort()y方法排序代码:

function bjhs(value1,value2) {
if(value1 < value2) {
return -1; //返回负数,value1在value2前面
} else if(value1 > value2) {
return 1; //返回1,value1在value2后面
} else {
return 0; //返回0,value1与value2相等
}

}

var values = [0, 1, 3, 4, 2, 5]; //这个随机的顺序
values.sort(bjhs); //将比较函数作为参数传入sort()方法。

alert(values);//返回 0,1,2,3,4,5 升序排列


降序比较函数:

function bjhs(value1,value2) {
if(value1 < value2) {
return 1; //返回1,value1在value2后面,为降序
} else if(value1 > value2) {
return -1; //返回-1,value1在value2前面
} else {
return 0; //返回0,value1与value2相等
}

}


如果只是想反向显示数组元素,用reverse()方法即可,如果想将数组元素按升序或者降序排序的话,用sort()并将比较函数作为参数传入sort()方法。

操作方法

concat()方法

concat()方法可以基于当前数组的 所有项 创建一个副本,也就是说这个方法会先创建当前数组的一个副本,然后将接收到的内容添加到这个副本的末尾。

concat()的参数可以是一个值,或是一个数组,也可以没有参数,在没有参数的情况下,只是将当前的数组创建一个副本。


注:concat()不会影响到原数组

var colors = ["red", "blue", "yellow"]; //定义一个数组
var colors1 = colors.concat("orange", ["black", "white"]); //创建一个colors的副本,并把参数添加到colors的末尾

alert(colors); //red,blue,yellow 这是原数组,concat()方法不会改变原数组。
alert(colors1); //red,blue,yellow,orange,black,white 将concat()接收到的参数添加到副本末尾。

var colors2 = colors.concat(); //concat()不接收任何参数,表示只是创建一个colors的副本。

alert(colors2); //red,blue,yellow 只是一个副本


创建一个数组副本,根据所传入到concat()方法的参数添加到副本的末尾,参数可以是一个值,也可以是一个数组,甚至可以没有参数,没有参数的情况下,就只是一个副本。

slice()方法

slice()方法能够基于当前数组中的 一个或多个项 创建一个新数组,slice()可以接收两个参数,分别表示起始位置的索引结束位置的索引

接收一个参数时,slice()方法返回从该参数指定的位置(索引)到当前数组末尾的所有项

当接收两个参数时,slice()方法返回起始位置和结束位置之间的项--但不包含结束位置的项

注:slice()方法不会影响原数组。

var colors = ["red", "blue", "green", "yellow", "purple"];
var colors1 = colors.slice(2); //一个参数,返回从索引为2的位置到当前数组末尾的所有项
var colors2 = colors.slice(1,4); //两个参数,返回从索引1和索引4之间的项,但不包含索引4位置的项

alert(colors1); //green,yellow,purple
alert(colors2); //blue,green,yellow

alert(colors); //red,blue,green,yellow,purple  不会影响原数组


注:如果结束位置索引小于起始位置索引,则返回 空数组。

splice()方法

数组可以通过splice()方法来进行插入、删除、替换操作。

删除:可以删除任意数量的项。接收两个参数:要删除的第一项的位置(索引)和要删除的项数。如果只有一个参数,则表示 删除从该索引位置到数组末尾之间的所有项。
插入:可以插入任意数量的项。接收三个参数:起始位置(索引)、0(要删除的项数)、插入的项。可以插入多个项。从起始位置插入。
替换:可以替换任意数量的项。接收三个参数:起始位置(索引)、要删除的项数、要插入的任意数量的项。替换就是删除与插入的组合。

删除数组项:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>

<script>

var arr = [1, 2, 3, 4, 5];
var a = arr.splice(1, 3); //从索引1开始,删除3项
console.log(arr); //1,5

//此时数组中还有[1, 5]
var b = arr.splice(0); //从索引0开始,删除所有项
console.log(arr); //[] 空数组

</script>
</body>
</html>


插入数组项和替换数组项:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScrip
ce79
t</title>
</head>
<body>

<script>

var arr = [1, 2, 3, 4, 5];
var a = arr.splice(1, 0, 6, 7); //插入数组项
console.log(arr); //1,6,7,2,3,4,5

var b = arr.splice(2, 0);
console.log(arr); //1,6,7,2,3,4,5

var c = arr.splice(2, 6, 7); //替换
console.log(arr); //1,6,7

</script>
</body>
</html>


位置方法(查找方法)

位置方法:indexOf()lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点的索引。查找到第一个为止。第二个参数只是作为一个起点。

indexOf()表示从数组开头开始查找,返回 指定字符 第一次出现的索引。

lastIndexOf()表示从数组末尾开始查找,返回 指定字符 最后一次出现的位置索引。

当只有一个参数时,表示要查找的项,且从数组开头(索引0)开始查找或数组末尾查找。

返回查找项的位置,没有查找则返回-1,在查找过程中,是第一个参数与数组中的项逐一比较,使用的是全等操作符,也就是说,比较的过程中,是要求类型和值都是相等的。

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

console.log(arr.indexOf(3)); //返回2
console.log(arr.indexOf(3, 1)); //返回2

console.log(arr.indexOf(2)); //返回1
console.log(arr.indexOf(2, 0)); //返回1
console.log(arr.indexOf(2, 2)); //返回5 查找起点变成了索引为2的位置,往后查找2的位置为索引5


第二个参数只是作为查找的起点。

迭代方法

迭代方法可以接收两个参数:要在第一项上运行的函数运行函数的作用域对象-影响this值。

传入方法的函数有三个参数:数组项的值该项在数组中的位置数组对象本身

常见的4个迭代方法:检查数组的每个元素是否符合条件

1、every(): 对数组中每一项运行 给定函数,如果该函数对 每一项 都返回true,则该方法返回true

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

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

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

5、forEach():没有返回值,主要用于遍历数组、迭代数组。

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

//对每一项运行 给定函数 ,判断是否每一项都大于2,若每一项都大于2,返回true。
var everyResult = arr.every(function(item, index, array) {return (item > 2);});
console.log(everyResult); //返回false 显然不是每一项都大于2

//对每一项运行 给定函数,判断是否任一项有大于2的,若有至少一项大于2,返回true
var someResult = arr.some(function(item, index, array) {return (itme > 2);});
console.log(someResult); //返回true 显然有大于2的项

//对每一项运行 给定函数, 返回 由大于2的项 组成的数组
var filterResult = arr.filter(funcntion(item, idnex, arry) {return (item > 2)});
console.log(filterResult); //返回3,4,5,4,3 这些都大于2的项

//返回 每次 函数调用结果组成的数组
var mapResult = arr.map(function(item, index, array) {return (item + 2)});
console.log(mapResult); //返回3,2,5,6,7,6,5,4 这些都是每次函数调用的结果组成的数组


用forEach()方法遍历数组

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

arr.forEach(function (item, index, array) {
console.log(item); //1,2,3,4,5
});

并归方法

reduce()reduceRight()这个两个方法会迭代数组的所有项,然后构建一个最终返回的值。

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

reduce()和reducyRight()接收两个参数:参数每一项上调用的函数和(可选)缩小基础的初始值。

每一项调用的函数接收四个参数:前一个值,当前值,当前项的索引,数组对象

第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项

这个函数返回的任何值都会作为第一个参数自动传给下一项。
如:用reduce()方法执行数组中所有值之和的操作:

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

//求数组中所有值的和,
var sum = values.reduce(function(prev, cur, index, array){return prev + cur;});

console.log(sum);// 15


第一次执行构造函数,prev是1,cur是2。第一次迭代发生在数组的第二项上即cur是2,

第二次prev是3(1加2的结果,将返回的值作为第一个参数),cur是3(第三项)。

这个过程会把数组中的所有项遍历完,最后返回结果即15。

fill()方法

fill()方法的作用是用一个固定值填充(替换)数组中的每一项。固定值作为fill()参数传入,用双引号括起来。

格式:arr.fill("abc");

var arr = ["red", "blue", "yellow", "black"];

console.log(arr); //red,blue,yellow,black

console.log(arr.fill("orange")); //orange,orange,orange,orange


以上用‘orange’全部替换了arr数组中所有的元素。
注:使用fill()方法时,原数组必须有元素,或者空元素也行,但不能为空数组。

当数组为空数组时:

var arr = [];

console.log(arr.fill("good")); //输出为空,什么也没有


当数组中有空元素时:

var arr = [""];

console.log(arr.fill("good")); //输出good


当有两个或以上的空元素时,输出有两个或以上的"good"。

find()方法

find()方法返回 传入一个函数作为参数 且 第一个符合函数条件 元素值。(因为可能有很多都符合某个函数,这里只返回第一个符合条件的元素值)

find()的参数为一个函数。

var arr = [1, 2, 4, 10, 20, 30];

function Bj(age) {
return age >=9; //返回大于等于9的数值
}

console.log(arr.find(Bj)); //返回10,在arr数组中,符合大于等于9的数有10,20,30,find()方法返回第一个符合条件的元素值,所以是10

在arr数组中,符合大于等于9的数有10,20,30,find()方法返回 第一个 符合条件的元素值,所以是10
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: