js数组常用方法总结

Posted 2020-11-10 le220

最近工作中经常用到数组操作，每次都傻傻不知道怎么用，今天有时间整理了一下，希望对大家有帮助！这些基础的知识，要熟记于心。

1、 join()

功能：将数组中所有元素都转化为字符串并连接在一起。

输入： 分隔符，默认为逗号

输出：分隔符分割的字符串

1 var a = [1,2,3];
2 a.join(); // =>"1,2,3"
3 a.join(";");// =>"1;2;3"

2、 reverse()

功能：将数组中的元素颠倒顺序。

输入：无

输出：逆序的数组

1 var a = [1,2,3];
2 a.reverse().join()// =>"3,2,1"

3、sort() 
功能：将数组中的元素 
输入：比较函数或null。null时表示按照字母表顺序排序；传入带两个参数的比较函数时；第一个参数在前，则返回小于0的数值；第一个参数在后，则返回大于0的数组 
输出：排序后数组 
注意：改变了原数组 
举例：

1 var a = [22,33,11111,4444];
2 a.sort();// =>11111,22,33,4444
3 a.sort(function(a,b){
4     return a-b;
5 });// => 22,33,4444,11111
6 a.sort(function(a,b){return b-a})// =>11111,4444,33,22

4、concat() 
功能：数组拼接的功能 
输入：待拼接的元素；如果参数中有数组，则连接的是数组元素，而非数组本身；但是不支持递归，不修改调用的数组。 
输出：拼接后的新数组 
注意：新建的数组，原数组不改变。 

1 var a = [1,2,3];
2 a.concat(4,5) // =>[1,2,3,4,5]
3 a.concat([4,5]) // =>[1,2,3,4,5]
4 a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]

5、slice() 
功能：获取原数组的片段或子数组 
输入：片段的开始和结束 
输出：返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数，表示相对于数组中最后一个元素的位置。 
注意：新建的数组，原数组不改变。

1 var a = [1,2,3,4,5];
2 a.slice(0,3);// =>[1,2,3]
3 a.slice(3);// =>[4,5]
4 a.slice(1,-1)// =>[2,3,4]

6、splice() 
功能：从数组中删除元素、插入元素到数组中或者同事完成这两种操作。 
输入：第一个参数为指定插入或删除的起始位置，第二个参数为要删除的个数。之后的参数表示需要插入到数组中的元素 
输出：返回一个由删除元素组成的数组。 
注意：新建了一个数组，并修改了原数组 

1 var a = [1,2,3,4,5,6,7,8];
2 a.splice(4) // =>[5,6,7,8];a [1,2,3,4]
3 a.splice(2,0,‘a‘,‘b‘) // =>[];a [1,2,a,b,3,4]

7、push()和pop() 
功能：push从数组尾部添加一个或多个元素，并返回数组新的长度；pop返回最后一个元素 
输入：push输入为插入的元素；pop输入为空 
输出：push为新长度；pop为返回的数组元素 

1 var stack = [];
2 stack.push(1,2);// =>stack:[1,2],返回2
3 stack.pop;// => stack: [1],返回2

8、unshift()和shift 
功能：类似push和pop，不同是从头部插入和删除，而非尾部

9、toString()和toLocaleString() 
功能：将数组的每个元素转化为字符串，并且输入用逗号分隔的字符串列表。功能类似join(); 
输入：无 
输出：字符串 

1 [1,2,3].toString() // =>‘1,2,3‘

10、forEach() 
功能：从头至尾遍历数组，为每个元素调用指定函数 
输入：输入为一个待遍历函数，函数的参数依次为：数组元素、元素的索引、数组本身 
输出：只是执行了遍历函数，无特定返回 

1 var data = [1,2,3,4,5];
2 data.forEach(function(v,i,a){a[i] = v + 1;});
3 data // =>[2,3,4,5,6]

11、map() 
功能：调用的数组的每一个元素传递给指定的函数，并返回一个新数组 
输入：和forEach一样 
输出：执行完函数的新数组 
注意：返回新数组，不修改原数组 

1 a = [1,2,3];
2 b = a.map(function(x){return x*x;}); // =>[1,4,9]

12、filter() 
功能：将数组元素执行特定函数，而返回一个子集。 
输入：执行逻辑判断的函数，该函数返回true或false，参数类似forEach和map() 
输出：如果执行输入函数返回值为true，则传递给判定函数的元素是这个子集的成员 

1 a = [5,4,3,2,1];
2 smallvalues = a.filter(function(x){return x<3});// =>[2,1]

13、every()和some() 
功能：对数组元素进行指定函数的逻辑判断。 
输入：特定函数 
输出：true 或者false 

1 var a = [1,2,3,4,5];
2 a.every(function(x){return x<10;}) // =>true

14、reduce()和reduceRight() 
功能：使用指定的函数将数组元素进行组合，生成单个值。 
输入：两个参数，第一个是执行化简操作的函数。第二个（可选）的参数是一个传递给函数的初始值。 
注意：执行化简的函数的第一个参数为目前为止化简操作累积的结果。 
15、indexOf()和lastIndexOf() 
功能：搜索整个数组中具有给定值得元素，返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。 
输入：元素的值。 
输入：索引值

16、Array.from() 
功能：将两类对象转为真正的数组：类似数组的对象和可遍历的对象 
输入：待转换的对象，第二个参数可选，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。 
输入：数组 

1 let arrayLike = {
2        ‘0‘:‘a‘,
3        ‘1‘:‘b‘,
4        ‘2‘:‘c‘,
5        length:3
6 };
7 let arr2 = Array.from(arrayLike);// =>[‘a‘,‘b‘,‘c‘]

17、Array.of() 
功能：将一组值，转换为数组。 
输入：数组元素 
输出：数组 

1 Array.of(2,11,3)// =>[2,11,3]
2 Array.of(3)// =>[3]

18、copyWithin() 
功能：在当前数组内部，将指定位置的成员复制到其他位置，返回当前数组。 
输入：第一个参数（从该位置开始替换数据）；第二个参数可选（从该位置开始读取数据，默认为0，负值表示倒数）；第三个参数（到该位置前停止读取，默认为数组长度） 
输出：返回当前替换后的数组。 
注意：改变了当前数组 

1 [1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5]

19、find()和findIndex() 
功能：找到第一个符合条件的数组成员。 
输入：回调函数，所有数组成员依次执行该函数，直到找到第一个返回值为true的成员。回调函数可以接受三个参数，依次为值，位置，原数组。 
输出：find()返回找到的成员；findIndex()返回成员的位置。 

1 [1,5,10,15].find(function(value,index,arr){
2     return value > 9;
3 })// =>10

20、fill() 
功能：使用给定的值，填充一个数组。 
输入：第一个参数为待填充的值，第二和第三参数可选，分别表示填充的起始和结束位置(不包括)。 
输出：填充后的数组 

1 [‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2)
2 // =>[‘a‘, 7, ‘c‘]

21、entries()、keys()、values() 
功能：用于遍历数组，可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。 
输入：无 
输出：遍历器对象 

 1 for (let index of [‘a‘, ‘b‘].keys()) {
 2   console.log(index);
 3 }
 4 // =>0
 5 // =>1
 6 
 7 for (let elem of [‘a‘, ‘b‘].values()) {
 8   console.log(elem);
 9 }
10 // =>‘a‘
11 // =>‘b‘
12 
13 for (let [index, elem] of [‘a‘, ‘b‘].entries()) {
14   console.log(index, elem);
15 }
16 // =>0 "a"
17 // =>1 "b"

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

22、includes() 
功能：表示某个数组是否包含给定的值 
输入：第一个参数必选（待检查的给定值），第二个参数可选，表示搜索的起始位置，默认为0，负数表示倒数的位置。 
输出：一个布尔值。 
注意：和indexOf的区别，indexOf进行了运算符的强比对，会导致对NaN误判。

1 [1, 2, 3].includes(2);     // true
2 [1, 2, 3].includes(4);     // false
3 [1, 2, NaN].includes(NaN); // true