js数组常用方法总结

半指温柔乐

发布于 2018-09-11 09:22:02

5K0

发布于 2018-09-11 09:22:02

文章被收录于专栏：前端知识分享

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

1、 join()

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

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

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

1  //  join(separator) 不传参,默认用逗号拼接
2    var arr = [1,2,3];
3    var arr2 = [1,2,3];
4    arr = arr.join();
5    console.log(arr); // 1,2,3
6 
7    arr2 = arr2.join(";");
8    console.log(arr2); // 1;2;3

2、 reverse()

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

输入：无

输出：逆序的数组

1 // reverse() 将数组中的元素逆序输出
2    var arr = [1,2,3];
3    arr = arr.reverse().join();
4    console.log(arr); //3,2,1

3、sort()

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

 1 // sort()  数组排序 默认按第一个字符排序
 2    var  arr = [1111,333,22,666,5555];
 3    arr = arr.sort();
 4    console.log(arr); //  [1111, 22, 333, 5555, 666]
 5    // 按数值大小排序 从小到大
 6    arr = arr.sort(function(a,b){
 7       return a-b;
 8    });
 9    console.log(arr);  //  [22, 333, 666, 1111, 5555]
10 
11 //   // 按数值大小排序 从大到小
12    arr = arr.sort(function(a,b){
13       return b-a;
14    });
15    console.log(arr);  //  [5555, 1111, 666, 333, 22]

4、concat()

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

1 //   concat() 数组拼接 如果参数中有数组，则连接的是数组元素，而非数组本身；但是不支持递归，不修改调用的数组
2      var arr = [1,3,5,8,9];
3      console.log(arr.concat(4,7)); // [1, 3, 5, 8, 9, 4, 7]
4      console.log(arr.concat([2,0])); // [1, 3, 5, 8, 9, 2, 0]
5      console.log(arr.concat(2,[7,[0,4]])); // [1, 3, 5, 8, 9, 2, 7, [0,4]]

5、slice()

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

1 //   slice() 截取数组 返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数，表示相对于数组中最后一个元素的位置。如果只有一个参数，表示到数组末尾
2    var arr = [1,8,5,6,3];
3    console.log(arr.slice(1,3)); // [8, 5]
4    console.log(arr.slice(1,-1)); // [8, 5, 6]
5    console.log(arr.slice(1)); // [8, 5, 6, 3]
6    console.log(arr.slice(-1)); // [3]

6、splice()

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

1 //   splice() 删除或插入数组元素 第一个参数为指定插入或删除的起始位置，第二个参数为要删除的个数。如果只有一个参数默认删除后面所有的。返回删除后的数组。
2    var arr = [3,2,6,5,9];
3    console.log(arr.splice(1,3)); // [2,6,5]
4    console.log(arr); // [3,9]
5    console.log(arr.splice(1)); // [2,6,5,9]
6    console.log(arr); // [3]
7 
8    console.log(arr.splice(2,0,'a','b')); // 3个参数表示添加元素， [] 返回删除元素的数组
9    console.log(arr); //[3, 2, "a", "b", 6, 5, 9]  将a,b添加到数组中

7、push()和pop()

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

1 // push() 在数组末尾添加一个或多个元素，并返回新数组长度
2    // pop() 从数组末尾删除1个元素(删且只删除1个), 并返回 被删除的元素
3    var arr = [2,4,9];
4    console.log(arr.push(5,3)); // 5
5    console.log(arr); // [2, 4, 9, 5, 3]
6    console.log(arr.pop()); // 3
7    console.log(arr); // [2, 4, 9, 5]

8、unshift()和shift

功能：类似push和pop，不同是从头部插入和删除，而非尾部

1 //   shift() 在数组开始添加一个或多个元素，并返回新数组长度
2 //   unshift() 在数组开始删除一个元素(删且只删除1个),并返回 被删除的元素
3    var arr = [8,3,5,6];
4    console.log(arr.unshift(9,2)); // 6
5    console.log(arr); //[9, 2, 8, 3, 5, 6]
6    console.log(arr.shift()); //9
7    console.log(arr); // [2, 8, 3, 5, 6]

9、toString()和toLocaleString()

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

1 //   toString()和toLocaleString() 将数组的每个元素转化为字符串
2    var arr = ['a','b','c','d','e'];
3    console.log(arr.toString()); // a,b,c,d,e
4    console.log(arr.toLocaleString()); // a,b,c,d,e

10、forEach()

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

1 //   forEach() 函数的参数依次为：数组元素、元素的索引、数组本身, 无返回
2    var arr = [1,2,3,4,5];
3    arr.forEach(function(v , i , arr){
4       arr[i] = v+1;
5    });
6    console.log(arr); //  [2, 3, 4, 5, 6]

11、map()

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

1 //   map() 调用的数组的每一个元素传递给指定的函数，并返回一个新数组 ,不修改原数组
2    var arr = [2,3,4,5,6];
3    var result = arr.map(function(x){
4       return x*x;
5    });
6    console.log(result); // [4, 9, 16, 25, 36]

12、filter()

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

1  //   filter() 过滤功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
2    var arr = [1,3,5,6,8];
3    var result = arr.filter(function(x){
4       return x%2 || x>6;
5    });
6    console.log(result); // [1,3,5,8]

13、every()和some()

功能：对数组元素进行指定函数的逻辑判断。输入：特定函数输出：true 或者false

 1  //   every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
 2    var arr = [3,7,9,1,5];
 3    var result = arr.every(function(x){
 4       return x > 3 ;
 5    });
 6    console.log(result); // false
 7 
 8    //   some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
 9    var arr = [5,2,3,8,9];
10    var result = arr.some(function(x){
11       return x < 5;
12    });
13    console.log(result); // true

14、reduce()和reduceRight()

功能：使用指定的函数将数组元素进行组合，生成单个值。输入：两个参数，第一个是执行化简操作的函数。第二个（可选）的参数是一个传递给函数的初始值。注意：执行化简的函数的第一个参数为目前为止化简操作累积的结果。

1 //   reduce() 两个参数：函数和递归的初始值。从数组的第一项开始，逐个遍历到最后
2    // reduceRight() 从数组的最后一项开始，向前遍历到第一项
3 
4    var arr = [1,3,4,6,8,9];
5    var result = arr.reduce(function(prev,cur,index,arr){ //前一个值、当前值、项的索引和数组对象
6       return prev + cur;
7    },10);
8    console.log(result); // 41

15、indexOf()和lastIndexOf()

功能：搜索整个数组中具有给定值得元素，返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。输入：元素的值。输出：索引值

1 //   indexOf() 两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。没找到返回-1. 返回查找项的索引值
2    // lastIndexOf() 从数组的末尾开始向前查找。返回查找项的索引值(索引值永远是正序的索引值),没找到返回-1
3    var arr = [3,4,6,9,8];
4    console.log(arr.indexOf(6,1)); //2
5    console.log(arr.indexOf(5)); // -1
6    console.log(arr.lastIndexOf(4)); // 1

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-06-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度