JavaScript中的数组方法总结+详解

LD2721

已于 2024-08-30 18:36:10 修改

阅读量664

点赞数

文章标签： javascript 前端

于 2024-08-30 18:34:29 首次发布

原文链接：https://blog.csdn.net/qq_43223007/article/details/110201463

版权

在JS中,数组方法是非常重要且常用的方法.

JavaScript 数组的力量隐藏在数组方法中。

1. javaScript常用数组方法

顺序	方法名	功能	返回值	是否改变原数组	版本
1	push()	(在结尾)向数组添加一或多个元素	返回新数组长度	Y	ES5-
2	unshift()	（在开头)向数组添加一或多个元素	返回新数组长度	Y	ES5-
3	pop()	删除数组的最后一位	返回被删除的数据	Y	ES5-
4	shift()	移除数组的第一项	返回被删除的数据	Y	ES5-
5	reverse()	反转数组中的元素	返回反转后数组	Y	ES5-
6	sort()	以字母顺序(字符串Unicode码点)对数组进行排序	返回新数组	Y	ES5-
7	splice()	在指定位置删除指定个数元素再增加任意个数元素（实现数组任意位置的增删改)	返回删除的数据所组成的数组	Y	ES5-
8	concat()	通过合并（连接）现有数组来创建一个新数组	返回合并之后的数组	N	ES5-
9	join()	用特定的字符,将数组拼接形成字符串 (默认",")	返回拼接后的字符串	N	ES5-
10	slice()	裁切指定位置的数组	被裁切的元素形成的数组	N	ES5-
11	toString()	将数组转换为字符串	字符串	N	ES5-
12	valueOf()	查询数组原始值	数组的原始值	N	ES5-
13	indexOf()	查询某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在返回 -1	N	ES5-
14	lastIndexOf()	反向查询数组某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在返回 -1	N	ES5-
15	forEach()	(迭代) 遍历数组,每次循环中执行传入的回调函数	无/(undefined)	N	ES5-
16	map()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组	有/自定义	N	ES5-
17	filter()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中	满足条件的元素组成的新数组	N	ES5-
18	every()	(迭代) 判断数组中所有的元素是否满足某个条件	全都满足返回true 只要有一个不满足返回false	N	ES5-
19	some()	(迭代) 判断数组中是否存在,满足某个条件的元素	只要有一个元素满足条件就返回true,都不满足返回false	N	ES5-
20	reduce()	(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	最终操作的结果	N	ES5-
21	reduceRight()	(归并)用法同reduce,只不过是从右向左	同reduce	N	ES5-
22	includes()	判断一个数组是否包含一个指定的值.	是返回 true，否则false	N	ES6
23	Array.from()	接收伪数组,返回对应的真数组	对应的真数组	N	ES6
24	find()	遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined	满足条件第一个元素/否则返回undefined	N	ES6
25	findIndex()	遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1	满足条件第一个元素下标,不存在=>-1	N	ES6
26	fill()	用给定值填充一个数组	新数组	Y	ES6
27	flat()	用于将嵌套的数组“拉平”，变成一维的数组。	返回一个新数组	N	ES6
28	flatMap()	flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )	返回新数组	N	ES6

2.方法详解

1.push();

功能: 在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

2.unshift();

功能: 在数组第一位添加一个或多个元素，并返回新数组的长度，改变原数组。(添加多个元素用逗号隔开)


var arr1 = ['asd','zxc','qw'];
var count = arr1.push('blue','qaz');
console.log(count);   // 5   (数组长度)
console.log(arr1);   // ['asd','zxc','qw','blue','qaz']


var arr2 = ['a','b'];
var count = arr2.unshift('c','d');
console.log(arr2);   // ['c','d','a','b']

3.pop();

功能：删除数组的最后一位，并且返回删除的数据，会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)

4.shift();

功能：删除数组的第一位数据，并且返回被删除的数据，会改变原来的数组。(该方法同pop()；一样不接受参数,且每次只能删除数组第一个)

var arr = [1, 2, "c"];
var rel = arr.pop();
console.log(arr); // [1, 2]
console.log(rel); // c



var arr1 = ["a","b", "c"];
var rel1 = arr1.shift();
console.log(arr1); // ['b', "c"]
console.log(rel1); // a

5.reverse();

功能：将数组的数据进行反转，并且返回反转后的数组，会改变原数组

var arr = [1, 2, 3, "a", "b", "c"];
var rel = arr.reverse();
console.log(arr); //    ["c", "b", "a", 3, 2, 1]
console.log(rel); //    ["c", "b", "a", 3, 2, 1]

6.sort();

sort(); 方法用于对数组的元素进行排序,并返回数组。
默认情况下是将数组元素转换成字符串，然后按照ASC码进行排序

array.sort(sortby)；参数sortby可选。规定排序顺序，必须是函数。
具体用法：

如果 function(a, b) {return: a - b;} ，=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
如果 function(a, b) {return: b - a;} ，=> b - a > 0 那么b会被排列到 a 之前； (从大到小排序)

var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d'] 排序了

let arr2 = [23,12,1,34,116,8,18,37,56,50]
arr2.sort()
console.log(arr2) // [1, 116, 12, 18, 23, 34, 37, 50, 56, 8] 没有排序


// 如果需要通过比较函数产生降序排序的结果，只要交后比较函数返回的值即可
var arr3 = [13,24,51,3];
console.log(arr3.sort((a, b) => (a - b))); // [3,13,24,51]


var arr4 = [10, 1, 5, 2, 3];
arr4.sort(function (a, b) {
   return a - b;
});
console.log(arr4); // [1,2,3,5,10]

元素为对象时（可按其中某个属性来排序）：

  var arr1 = [
      { name: "老八", age: "38" },
      { name: "赵日天", age: "28" },
      { name: "龙傲天", age: "48" },
    ];
    arr1.sort(function (a, b) {
      console.log(a, b);
      return b.age - a.age;
    });
    console.log(arr1);

打印结果：（按 age 排序（大到小））

7.splice();

功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素所组成的数组。可以实现数组的增删改；

用法：arrayObject.splice(index,howmany,item1,…,itemX)

//替换
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');  
//a=['a','e','f','c'],b=['b']


//删除
var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1);   // [5,7,9,11]
console.log(arrRemoved);   // [1,3]


// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1);   // [22,12,35,3,31,12]

8.concat();

功能：数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组
如果拼接的是数组则将数组展开,之后将数组中的每一个元素放到新数组中.
如果是其他类型, 直接放到新数组中
另外，如果不给该方法任何参数，将返回一个和原数组一样的数组（复制数组）

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["A", "B", "C"];
    var rel = arr1.concat(arr2, arr3);
    console.log(arr1); //原数组  [1,2,3]
    console.log(rel); //新数组   [1,2,3,'a','b','c','A','B','C']

9.join();

功能：用特定的字符,将数组拼接形成字符串 (默认",")

   var list = ["a", "b", "c", "d"]; // "a-b-c-d"
    var result = list.join("-");     //"a-b-c-d"
    var result = list.join("/");     //"a/b/c/d"
    var result = list.join("");      //"abcd"
    var result = list.join();        //  a,b,c,d
    console.log(result);

10.slice();

裁切指定位置的数组，返回值为被裁切的元素形成的新数组，不改变原数组
同concat() 方法 slice() 如果不传参数,会使用默认值,得到一个与原数组元素相同的新数组 (复制数组)

  var list = ["a", "b", "c", "d"];
  var result = list.slice(1, 3);
  console.log(result);  // ["b", "c"]

11.toString();

功能: 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join();方法不添加任何参数相同.

 var list = ["a", "b", "c", "d"];
 var rel = list.toString();
 console.log(rel);   // a,b,c,d   (字符串类型)

12.valueOf();

功能: 返回数组的原始值（一般情况下其实就是数组自身）

13.indexOf();

功能: 查询某个元素在数组中第一次出现的位置存在该元素,返回下标,不存在返回 -1 (可以通过返回值变相的判断是否存在该元素)

14.lastIndexOf();

功能: 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在返回 -1 (可以通过返回值变相的判断是否存在该元素)

   var list = [1, 2, 3, 4];
   var rel = list.valueOf();
   console.log(list); // [1, 2, 3, 4]
   console.log(rel); // [1, 2, 3, 4]




 var list = [1, 2, 3, 4];
    var index = list.indexOf(4); //3
    var index = list.indexOf("4"); //-1
    console.log(index);



    var list = [1, 2, 3, 4];
    var index = list.lastIndexOf(4); //3
    var index = list.lastIndexOf("4"); //-1
    console.log(index);

15.forEach();

功能: 遍历数组,每次循环中执行传入的回调函数。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.

 var list = [32, 93, 77, 53, 38, 87];
    var res = list.forEach(function (item, index, array) {
      console.log(item, index, array);
    });
    console.log(res);

    var list = [32, 93, 77, 53, 38, 87];
    var sum = 0;
    list.forEach(function (item) {
      console.log(item);
      sum += item;
    });
    console.log(sum);


 //  32  93  77  53  38  87  
 //  380

16.map();

功能: 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 ,
同forEach() 方法,但是map()方法有返回值,可以return出来;

    var list = [32, 93, 77, 53, 38, 87];
    var res = list.map(function (item, index, array) {
      return item + 5 * 2;
    });
    console.log("原数组", list);
    console.log("新数组", res);

// 原数组  [32,93,77,53,38,87]
// 新数组  [42,103,87,63,48,97]

17.filter();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中.

   var list = [32, 93, 77, 53, 38, 87];
    var resList = list.filter(function (item, index, array) {
      return item >= 60; // true || false
    });
    console.log(resList);

//  [93,77,87]

18.every();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足返回false => 判断数组中所有的元素是否满足某个条件

 var list = [32, 93, 77, 53, 38, 87];
    var result = list.every(function (item, index, array) {
      console.log(item, index, array);
      return item >= 50;
    });
    console.log(result);  //  false

19.some();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false => 判断数组中是否存在,满足某个条件的元素

    var list = [32, 93, 77, 53, 38, 87];
    var result = list.some(function (item, index, array) {
      return item >= 50;
    });
    console.log(result); // true

原文链接：https://blog.csdn.net/qq_43223007/article/details/110201463