数组中的一些常用方法总结

  |  

includes

1
2
3
作用:表示某个数组是否包含给定的值
返回: boolean值
[1, 2, 3].includes(2); // true

push

1
2
3
4
5
6
7
8
作用:像数组的末尾添加一项或多项元素
参数:要添加的项
返回值:新数组的长度
是否改变原数组:改变
var ary = ['a','b','c'];
var res = ary.push('d','e');
console.log(ary); // ["a", "b", "c", "d", "e"]
console.log(res); // 5

pop

1
2
3
4
5
6
7
8
作用:删除数组的最后一项
参数:无
返回值:被删除的项
是否改变原数组:改变
var ary = ['1','2','3'];
var res = ary.pop();
console.log(ary); // ['1','2']
console.log(res); // 3

shift

1
2
3
4
5
6
7
8
作用:删除数组的首项
参数:无
返回值:被删除的项
是否改变原数组:改变
var ary = ['a','b','c'];
var res = ary.shift();
console.log(ary); // ['b','c']
console.log(res); // a

unshift

1
2
3
4
5
6
7
8
作用:向数组的开头添加一或多项
参数:要添加的项,多项用','隔开
返回值:新数组的长度
是否改变原数组:改变
var ary = ['a','b','c'];
var res = ary.unshift('d','e');
console.log(ary); // ["d", "e", "a", "b", "c"]
console.log(res); // 5

splice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
作用:增删改
参数:ary.splice(index,howmany,item1,.....,itemX)
返回值:删除的项
是否改变原数组:改变
增加的功能
ary.splice(n,0,x,......,y);
从数组的索引n开始,删除0项,在索引n的前边增加新的项,第三个参数开始都是用来填补删除的项目位置的

var ary = [1,2,3,4,5];
var res = ary.splice(1,0,6,7);
console.log(ary); // [1, 6, 7, 2, 3, 4, 5]
console.log(res); // [] 删除0项,返回一个空数组
删除的功能
ary.splice(n,m);
从数组的索引n开始,删除m项

var ary = [1,2,3,4,5];
var res = ary.splice(1,2);
console.log(ary); // [1,4,5]
console.log(res); // [2,3]
修改的功能
ary.splice(n,m,x);
从数组的索引n开始,删除m项,把x添加到索引n前边

var ary = [1,2,3,4,5];
var res = ary.splice(1,2,6,7);
console.log(ary); // [1, 6, 7, 4, 5]
console.log(res); // [2,3]
//模拟 push(尾部添加) 和push二者返回值不同
ary.splice(ary.length,0,新的项) //因为splice是在索引前添加,所以第一个参数为ary.length
//模拟 pop(尾部删除)
ary.splice(arr.length-1,1);
//模拟 shift(首项删除)
ary.splice(0,1)
//模拟 unshift(首项添加) 和unshilft二者返回值不同
ary.splice(0,0,新的项)
此外

ary.splice(n) // 表示从索引n开始删除到末尾
ary.splice(0) // 删除整个数组 有克隆数组的效果,利用返回值

slice

1
2
3
4
5
6
7
8
9
10
11
12
13
作用:截取数组(复制数组)
参数:array.slice(start, end)
返回值:返回一个新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5];
var res = ary.slice(1,3);
var res2 = ary.slice(-3,-1)
console.log(ary); // [1,2,3,4,5]
console.log(res); // [2,3]
console.log(res2) //[3,4] slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项

slice(n) //从索引n开始复制到最后一项
slice()、 slice(0) //复制整个数组

join

1
2
3
4
5
6
7
8
作用:用指定的分隔符将数组每一项拼接为字符串
参数:指定的分隔符,如果省略该参数,则使用逗号作为分隔符
返回值:拼接好的字符串
是否改变原数组:不改变
var ary = [1,2,3,4,5];
var res = ary.join('-');
console.log(ary); // [1, 2, 3, 4, 5]
console.log(res); // 1-2-3-4-5

concat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
作用:用于连接两个或多个数组
参数:参数可以是具体的值,也可以是数组对象。可以是任意多个
返回值:返回连接后的新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5];
var res = ary.concat(6,7);
var res2 = ary.concat(6,[7,8]);
var res3 = ary.concat(6,[7,[8,9]]);
var res4 = ary.concat();
console.log(ary); // [1, 2, 3, 4, 5]
console.log(res); // [1, 2, 3, 4, 5, 6, 7]
console.log(res2); //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(res3) // [1, 2, 3, 4, 5, 6, 7, [8,9]] concat() 如果操作的参数是数组,那么添加的是数组中的元素,而不是数组。 如果是二维(或以上)数组,concat只能'拆开'一层数组
console.log(res4) // [1, 2, 3, 4, 5] 如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的

sort

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
作用:对数组的元素进行排序 
参数:可选(函数) 规定排序规则 默认排序顺序为按字母升序
返回值:排好序的原数组
是否改变原数组:改变
var ary = [1,5,7,9,12,24,56,87,92];
var ary2 = [1,5,7,9,12,24,56,87,92];
var ary3 = [1,5,7,9,12,24,56,87,92];
var res = ary.sort();
var res2 = ary2.sort(function(a,b){
return a-b;
})
var res3 = ary3.sort(function(a,b){
return b-a;
})
// sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项
console.log(res); // [1, 12, 24, 5, 56, 7, 87, 9, 92]
console.log(res2); // [1, 5, 7, 9, 12, 24, 56, 87, 92]
console.log(res3); // [92, 87, 56, 24, 12, 9, 7, 5, 1]

reverse

1
2
3
4
5
6
7
8
作用:倒序数组
参数:无
返回值:倒序后的原数组
是否改变原数组:改变
var ary = [1,2,3,4,5];
var res = ary.reverse();
console.log(ary); // [5, 4, 3, 2, 1]
console.log(res); // [5, 4, 3, 2, 1]

indexOf

1
2
3
4
5
6
7
8
9
10
11
作用:查找指定元素的位置
参数:array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值:返回第一次查到的索引,未找到返回-1
是否改变原数组: 不改变
var ary = [1,2,3,4,5]
var res = ary.indexOf(3);
console.log(ary); // [1,2,3,4,5]
console.log(res); // 2
var ary = ['a','b','c','d','c'];
var res = ary.indexOf('c',3);
console.log(res) // 4

lastIndexOf

1
2
3
4
5
6
7
8
9
作用:查找指定元素最后出现的位置
参数:array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值:返回查到的元素的索引,未找到返回-1
是否改变原数组:不改变
var ary = ['a','b','c','d','c'];
var res = ary.lastIndexOf('c',3);
var res2 = ary.lastIndexOf('c',1);
console.log(res); // 2
console.log(res2); // -1

forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
作用:循环遍历数组每一项
参数:函数 ary.forEach(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:无
是否改变原数组: 不改变
var ary = ['a','b','c']
var res = ary.forEach(function(item,index,ary){
console.log(item,index,ary);
/* a 0 ["a", "b", "c"]
b 1 ["a", "b", "c"]
c 2 ["a", "b", "c"]
*/
return item;
})
console.log(res) // undefined 无返回值

map

1
2
3
4
5
6
7
8
9
作用:数组中的元素为原始数组元素调用函数处理后的值
参数:函数 ary.map(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:新数组
是否改变原数组:不改变
var ary = ['a','b','c']
var res = ary.map(function(item,index,ary){
return item+1;
})
console.log(res) // ["a1", "b1", "c1"]

filter

1
2
3
4
5
6
7
8
9
作用:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
参数:函数 ary.filter(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5,6]
var res = ary.filter(function(item){
return item<3;
})
console.log(res) // [1,2]

every

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
作用:检测数组所有元素是否都符合指定条件
参数:函数 ary.every(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:布尔值
是否改变原数组: 不改变
var ary = [1,2,3,4,5,6]
var res = ary.every(function(item){
return item<3;
})
var res2 = ary.every(function(item){
return item<7;
})
console.log(res) // false;
console.log(res2) // true;
1 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
2 如果所有元素都满足条件,则返回 true

some

1
2
3
4
5
6
7
8
9
10
11
作用:检测数组中的元素是否满足指定条件
参数:函数 ary.some(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:布尔值
是否改变原数组:不改变
var ary = [1,2,3,4,5,6]
var res = ary.some(function(item){
return item<3;
})
console.log(res) // true;
1 如果有一个元素满足条件,则表达式返回 true , 剩余的元素不会再执行检测。
2 如果没有满足条件的元素,则返回 false

find

1
2
3
4
5
6
7
8
9
作用:返回数组中满足callback函数的第一个元素的值,否则返回 undefined
let array1 = [5, 12, 8, 110, 88];

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

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

reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

参数:

参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。函数参数:
参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

例子:

1
2
3
4
5
6
7
8
9
(() => {
let a = [ 1, 2, 3 ];

let y = a.reduce(function(total, currentValue) {
return total + currentValue;
}, 0);

console.log(y); =>输出6
})();

借鉴 陈水水的个人博客

文章目录
  1. 1. includes
  2. 2. push
  3. 3. pop
  4. 4. shift
  5. 5. unshift
  6. 6. splice
  7. 7. slice
  8. 8. join
  9. 9. concat
  10. 10. sort
  11. 11. reverse
  12. 12. indexOf
  13. 13. lastIndexOf
  14. 14. forEach
  15. 15. map
  16. 16. filter
  17. 17. every
  18. 18. some
  19. 19. find
  20. 20. reduce