数组常用的15个方法
学习数组中的常用方法我们需要从四个方面去探讨
- 方法的作用
- 需要传哪些参数<
- 是否有返回值，返回值是什么
- 通过此方法是否对原有数组产生了改变
1. ary.push()方法 向数组的末尾增加新的内容
var ary = [11,12,13，14];
var res = ary.push(100，“ok”);
console.log(res,ary);
结果为 6 [11, 12, 13, 14, 100, "ok"]
- 通过以上结果可知：需要传递的是->想增加什么就传递什么，而且可以传递多个值。 返回值->新数组的长度。对原有数组->产生了改变
此方法的拓展 ary.length新增一项
var ary = [11,12,13,14];
res = ary[ary.length] = 101;
console.log(res,ary);
结果为 101 [11, 12, 13, 14, 101]
> 用arylength也可达到其差不多的目的
2. ary.pop()方法 删除数组中的最后一项
var ary = [11,12,13,14];
var res = ary.pop();
console.log(res,ary);
结果为 14 [11, 12, 13]
- 通过以上结果可知：需要传递的是->无。 返回值->数组中被删除的那一项。对原有数组->产生了改变
此方法的拓展 ary.length--删除数组最后一项
var ary = [11,12,13,14];
ary.length--;
console.log(ary);
结果为 [11, 12, 13]
用arylength--也可达到其差不多的目的
3. ary.shift()方法 删除数组中的第一项
var ary = [11,12,13,14];
var res = ary.shift();
console.log(res,ary);
结果为 11 [12, 13, 14]
- 通过以上结果可知：需要传递的是->无。 返回值->数组中被删除的那一项。对原有数组->产生了改变
4. ary.unshift()方法 增加数组中的第一项
var ary = [11,12,13,14];
var res = ary.unshift(10);
console.log(res,ary);
结果为 5 [10, 11, 12, 13, 14]
- 通过以上结果可知：需要传递的是->需要增加什么就传什么。 返回值->新数组长度。对原有数组->产生了改变
5. ary.splice()方法(重要的方法)，能实现增加，删除，修改->基本方法是删除，增加和修改是从删除上引申出来的
以下为删除
- ary.aplice(n,m)从索引n开始删除m个元素，把删除的内容以一个新数组的方式返回即返回值，原来的数组发生改变
var ary = [11,12,13,14,15,16,17,18];
var res = ary.splice(1,3); //从索引1开始即12,删除3个，即删掉了12，13，14
console.log(res,ary);
结果为 [12, 13, 14] [11, 15, 16, 17, 18]
我们再看另一种写法
var ary = [11,12,13,14,15,16,17,18];
var res = ary.splice(1); //从索引1开始即12,删除到最后,即删除掉
了12，13，14，15，16，17，18
console.log(res,ary);
结果为 [12, 13, 14, 15, 16, 17, 18] [11]
有两种奇特的写法：
ary.splice(0) //此种写法是删除掉所有项，原数组为空，返回值(即新数组)为原数
组(即删除掉的所有项)，此种写法用于克隆，只不过原有数组发生了改变，变为了空数组
结果为[11,12,13,14,15,16,17,18][]
ary.splice() //此种写法是什么也没干，什么也没有删除，返回的是一个空数组
结果为 [] [11,12,13,14,15,16,17,18]
以下为修改
- ary.aplice(n,m，x)从索引n开始删除m个元素，用X替换掉删除的部分，把删除的内容以一个新数组的方式返回即返回值，原来的数组发生改变
var ary = [11,12,13,14,15,16,17,18];
var res = ary.splice(1,3,1000); //从索引1开始(12开始)，删除3个元素(删除
掉了12，13，14)，用1000替换这三项，把删除的内容即12，13，14以新数组的方式返回
(返回值)，原来的数组发生了改变
console.log(res,ary);
结果为 [12, 13, 14] [11, 1000, 15, 16, 17, 18]
以下为增加
- ary.splice(n,0,x)从索引开始，删除0个(一个都不删除)，用x替换掉删除的部分(没有删除即为增加)，此处注意( x增加的内容是放在了n索引内容的前面)返回值为空数组(因为一个都没删除)，原来的数组发生了改变
var ary = [11,12,13,14,15,16,17,18];
var res = ary.splice(1,0,1000);
console.log(res,ary);
结果为 [] [11, 1000, 12, 13, 14, 15, 16, 17, 18]
- 通过以上结果可知：需要传递的是->看具体需求两个或者三个参数。 返回值->删除的内容。对原有数组->产生了改变
6. ary.slice()方法，能实现查，对数组的内容的查取
- ary.slice(n,m) 从索引n开始，查取到索引m(不包含m),返回值(新数组)为查取的部分，原来的数组不变
ar ary = [11,12,13,14,15,16,17,18];
var res = ary.slice(1,4); //从索引1(12)开始，查取到索
引4(15),不包含索引4(15),返回值为12,13,14
console.log(res,ary);
结果为 [12, 13, 14] [11, 12, 13, 14, 15, 16, 17, 18]
> 有两种奇特的写法：
ary.slice(n) 从索引n开始，查取到数组末尾<br/>
ary.slice(0)/ary.slice() 从索引0开始，查取到数组末尾，括号里可以写0或者什么都不写，通常用做数组克隆
var ary = [11,12,13,14,15,16,17,18];
var res = ary.slice(1); //此种写法是从索引1开始，查取到数组末尾，返回
值(即新数组)为查取到的数组
console.log(res,ary);
结果为[12,13,14,15,16,17,18][11,12,13,14,15,16,17,18]
var ary = [11,12,13,14,15,16,17,18];
var res = ary.slice(); //此种写法是从索引0开始，查取到数组末尾，返回
值(即新数组)为原数组
console.log(res,ary)
结果为 [11,12,13,14,15,16,17,18] [11,12,13,14,15,16,17,18]
- 通过以上结果可知：需要传递的是->看具体需求两个或者1个，或者不传。 返回值->查取的内容。对原有数组->没有产生改变
7. ary.concat()方法，把两个数组拼接到一起，原来的数组不变
- var ary3 = ary1.concat(ary2) 数组1和数组2进行拼接，形成新数组3
var ary1 = [1,2,3];
var ary2 = [4,5,6];
var ary3 = ary1.concat(ary2);
console.log(ary3,ary1,ary2);
结果为 [1, 2, 3, 4, 5, 6] [1, 2, 3] [4, 5, 6]
有一种奇特的写法：
var ary1 = [1,2,3];
var ary2 = [4,5,6];
var ary3 = ary1.concat(); //此处不传参数，即什么不和任何数组拼接，
即ary1赋值给ary3,这样可以克隆
console.log(ary3,ary1,ary2);
结果为 [1, 2, 3] [1, 2, 3] [4, 5, 6]
- 通过以上结果可知：需要传递的是->传递一个数组。 返回值->拼接成功的新数组。对原有数组->没有产生改变
8. ary.toString()方法，把数组转化为字符串,对原有数组不产生改变
var ary = [10,11,12];
var res = ary.toString();
console.log(res,ary);
结果为 “10,11,12” [10, 11, 12]
- 通过以上结果可知：需要传递的是->无。 返回值->转换成的字符串。对原有数组->没有产生改变
9. ary.join()方法，按照一个分隔符，把数组中的内容用符号连接，拼接一个字符串,对原有数组不产生改变
var ary = [10,11,12];
var res = ary.join("@");
console.log(res,ary);
结果为 “10@11@12” [10, 11, 12]
拓展
> 此方法的拓展 eval() eval()把字符串变为JS表达式来执行的一个方法 ->字符串的方法
例如
console.log(eval("1+2+3"));
结果为6
通过以上方法的学习，我们可以做一道题目来练练手
题：对数组进行求和，var ary = [1,2,3,4,5];<br/>
答：
var ary = [1,2,3,4,5];
var val = ary.join("+");//此处变为用加号分隔的字符串
var res = eval(val);//将字符串转化为JS表达式，即可求出和
console.log(val,res,ary);
结果为 1+2+3+4+5 15 [1, 2, 3, 4, 5] 所以答案为15
- 通过以上结果可知：需要传递的是->分隔成字符串的东东，不传默认是逗号。 返回值->转换成的字符串。对原有数组->没有产生改变
10. ary.reverse()方法，将原有数组，倒叙排列，对原有数组产生影响
var ary = [1,2,3,4,5];
var res = ary.reverse();
console.log(res,ary);
结果为 [5, 4, 3, 2, 1] [5, 4, 3, 2, 1]
- 通过以上结果可知：需要传递的是->无。 返回值->倒叙排列的新数组。对原有数组->产生改变
11. ary.sort)方法，给数组进行排序(小->大，大->小),原有的数组会发生改变
- ary,sort();默认是处理一位数，给数组的第一位进行排序 比如18,38,28 排成结果为18，28，38，只能处理10以内的进行排序，按照unicode编码值进行排序的，因此我们排序一般都是按照以下的例子进行排序的
var ary = [34,56,23,19,18,26];
var res = ary.sort(function (n, m) {
return n-m; //从小到大，若从大到小，后面的减前面的即可
});
console.log(res,ary);
结果为 [18, 19, 23, 26, 34, 56] [18, 19, 23, 26, 34, 56]
- 通过以上结果可知：需要传递的是->无。 返回值->排完序的新数组。对原有数组->产生改变
12. ary.indexOf()方法，当前元素在数组中第一次出现的索引，如果数组中有这一项，则返回当前位置的索引，如果没有则返回-1，原来的数组不变
var ary = [1,2,3,4,5];
var res1 = ary.indexOf(1);
var res2 = ary.indexOf(6);
console.log(res1,res2);
结果为 0 -1；
> 注意：此方法在标准浏览器下才兼容，IE6~8不兼容(字符串中也有此方法，但是在字符串中是兼容的)，同时，也存在ary.lastIndexOf()这个方法，和ary.indexOf一样，但是该方法是检测当前元素在数组中最后一次出现的索引
- 通过以上结果可知：需要传递的是->需要检测的元素。 返回值->当前元素的索引或-1。对原有数组->不会产生改变
13. ary.lastIndexOf()方法，当前元素在数组中最后一次出现的索引，如果数组中有这一项，则返回当前位置的索引，如果没有则返回-1，原来的数组不变
var ary = [1,2,3,4,5,1];
var res1 = ary.lastIndexOf(1);
var res2 = ary.lastIndexOf(6);
console.log(res1,res2);
结果为 5 -1
>注意：此方法在标准浏览器下才兼容，IE6~8不兼容(字符串中也有此方法，但是在字符串中是兼容的)，
- 通过以上结果可知：需要传递的是->需要检测的元素。 返回值->当前元素的索引或-1。对原有数组->不会产生改变
14. ary.forEach()方法，遍历数组中的每一项，原来的数组不变
var ary = [1,2,3,4,5];
var res = ary.forEach(function (item, index, input) {
console.log(item,index,input);
});
console.log(ary);
结果为
1 0 [1, 2, 3, 4, 5]<br/>
2 1 [1, 2, 3, 4, 5]<br/>
3 2 [1, 2, 3, 4, 5]<br/>
4 3 [1, 2, 3, 4, 5]<br/>
5 4 [1, 2, 3, 4, 5]<br/>
[1, 2, 3, 4, 5]
- 在以上函数中的参数，item代表数组中的每一项，index代表索引值，input代表原数组，此函数中，不需要写返回值。除此之外，我们还可以看出该方法执行的次数，和数组的长度一样，也就是说，数组有多长，该方法执行几次
> 注意：此方法在标准浏览器下才兼容，IE6~8不兼容
- 通过以上结果可知：需要传递的是->函数中传参，传递参数的内容按照具体需求决定。 返回值->函数没有返回值。对原有数组->不会产生改变
15. ary.map()方法，映射数组中的每一项，原来的数组不变，此方法和forEach的语法是一样的，但是比forEach()把原来的内容进行替换的功能
var ary = [1,2,3,4,5];
var res = ary.map(function (item, index, input) {
return item*10;
});
console.log(res,ary);
结果为 [10, 20, 30, 40, 50] [1, 2, 3, 4, 5]
> 我们可以从结果中看出，map必须有返回值，而且修改了每一项，因此我们可以总结，forEach主要是用来遍历每一项，而map是用来修改每一项的值。
- 通过以上结果可知：需要传递的是->函数中传参，传递参数的内容按照具体需求决定。 返回值->函数必须有返回值，也就是说必须写return。对原有数组->不会产生改变
网友评论