JS----JavaScript数组方法及总结

JavaScript中创建数组有两种方式

(一)使用 Array 构造函数:

var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组

(二)var 创建数组

var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组

一、JavaScript 常用数组方法

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

二、 方法详解

1、push()和pop()

push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。

pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

var arr = [“Lily”,“lucy”,“Tom”];
var count = arr.push(“Jack”,“Sean”);
console.log(count); // 5
console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”, “Sean”]

var item = arr.pop();
console.log(item); // Sean
console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”]

2、shift() 和 unshift()

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined

unshift:将参数添加到原数组开头,并返回数组的长度 。

这组方法和上面的push()pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。

 var arr = [1, 2, "c"];
 var rel = arr.unshift("A", "B");
 console.log(arr); // [ "A", "B",1, 2, "c"]
 console.log(rel); //  5  (数组长度)
 
 var rel = arr.shift();
 console.log(arr); // [2, "c"]
 console.log(rel); // 1

3、reverse()

reverse():反转数组项的顺序。

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //3, 51, 24, 13

4、sort()

sort() 方法是最强大的数组方法之一。
sort(); 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。

例1:

  var arr1 = [10, 1, 5, 2, 3];
    arr1.sort();
    console.log(arr1);

打印结果:

在这里插入图片描述

结果并不是我们想要的排序结果,因为它是根据unicode编码来排序的,这也显示了其不稳定性。

语法arr.sort(function(a,b))

参数function可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。

具体用法:

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

那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:

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

打印结果:

在这里插入图片描述

元素为对象时(可按其中某个属性来排序):

 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 排序(大到小))
在这里插入图片描述

5、splice()

功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。可以实现数组的增删改;

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

参数

参数描述
index必需。整数,规定添加/删除项目的位置(元素下标),使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX可选。向数组添加的新项目。

例,删除arr()中第三个元素并添加 "add1", "add2"元素

var arr = ["a", "b", "c", 2, 3, 6];
var rel = arr.splice(2, 1, "add1", "add2");
console.log(arr);   //原数组
console.log(rel);	//新数组 

打印结果:
在这里插入图片描述

6、concat()

concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

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

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // 1, 3, 5, 7

从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢?

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代码中,arrCopy2数组的第五项是一个包含两项的数组,也就是说concat方法只能将传入数组中的每一项添加到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy2中。

7、join()

通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串

函数如下:

function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString(“abc”, 3)); // abcabcabc
console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi

8、slice()

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

slice():方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,

slice():方法返回从该参数指定位置开始到当前数组末尾的所有项。

如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项

语法arr[].slice(startIndex,endIndex)

参数

参数描述
startIndex起始下标 默认值 0
endIndex终止下标 默认值 length,可以接收负数,(倒着数)

注意!起始下标和终止下标的区间是 左闭右开 [ a ,b) 能取到起始,取不到终止

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //1, 3, 5, 7, 9, 11
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

arrCopy:只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。

arrCopy2:设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。

arrCopy3:设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。

arrCopy4:中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)

9、toString()

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

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

10、valueOf()

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

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

11、indexOf()和 lastIndexOf()

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

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

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

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

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

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

12、forEach()

forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

语法:

arr[].forEach(function(value,index,array){
   //do something
})

参数:

参数描述
item每次循环的当前元素
index当前项的索引
array原始数组

数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

实例1.

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

打印结果:

在这里插入图片描述
实例2: 数组中元素的和

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

打印结果:
在这里插入图片描述

13、map();

map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

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

语法:

arr[].map(function(item,index,array){
  //do something
  return XXX
})

参数

参数描述
item每次循环的当前元素
index当前项的索引
array原始数组

示例:

下面代码利用map方法实现数组中每个数求平方。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
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);

打印结果:
在这里插入图片描述

14、filter()

filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

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

语法:

arr[].filter(function(item,index,array){
  //do something
  return XXX //条件
})

参数

参数描述
item每次循环的当前元素
index当前项的索引
array原始数组

示例:

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

打印结果:
在这里插入图片描述

15、every()

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

功能:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回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

16、some()

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回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

17、reduce()和 reduceRight()

这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

reduce()

功能::遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果;

语法arr.reduce(function(prev,item,index,array){})

参数:

参数描述
prev初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历
item每次循环的当前元素
index每次循环的当前下标
array原数组

实例1: 不设置初始值的累加

  var arr = [2, 3, 4, 5];
  var sum = arr.reduce(function (prev, item, index, array) {
      console.log(prev, item, index, array);
      return prev + item;
  });
  console.log(arr, sum);

打印结果:
在这里插入图片描述
解析:

第一次循环:

prev = 2 ; item(当前循环元素) = 3 ; index(当前循环元素下标) = 1;原数组 =array;

因为没有给prev设置初始值,所以prev 的值为数组中第一个元素,遍历从第二个元素开始

第二次循环:

prev = 5; item(当前循环元素) = 4 ; index(当前循环元素下标) = 2;原数组 =array;
prev = 2+3(上次循环的元素) = 5 ;

最终prev = 14 ; arr中有四个元素 共循环三次;(因为没设置初始值跳过第一次循环prev默认等于第一个值)

实例2 设置初始值的累加

var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
  console.log(prev, item, index, array);
  return prev + item;
}, 0);
console.log(arr, sum);

打印结果:
在这里插入图片描述
解析:

可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始.

reduceRight();

功能: 用法同reduce,只不过是从右向左

18、includes()

功能: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false

实例

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

19、Array.from()

功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组

注意: 将一个类数组对象转换为一个真正的数组,必须具备以下条件:

  1. 该 伪数组 / 类数组 对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
  2. 该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字

代码演示:

 var all = {
      0: "张飞",
      1: "28",
      2: "男",
      3: ["率土", "鸿图", "三战"],
      length: 4,
    };
    var list = Array.from(all);
    console.log(all);
    console.log(list, Array.isArray(list));

打印结果:
在这里插入图片描述

20、find()

功能: 遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined

参数

参数选项描述
item必选循环当前元素
index可选循环当前下标
array可选当前元素所属的数组对象

实例:

  var list = [55, 66, 77, 88, 99, 100];
  var index = list.find(function (item, index, array) {
      console.log(item, index, array);
      return item > 60;
  });
  console.log(index); //66

打印结果
为66,每次循环判断当前元素是否满足条件,如果满足直接跳出循环,返回第一个满足条件的元素

21、findIndex()

功能 :遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在则返回-1

参数

参数选项描述
item必选循环当前元素
index可选循环当前下标
array可选当前元素所属的数组对象

注意
findIndex();和indexOf();不同 (刚接触时乍一看和indexOf()怎么一模一样,仔细看了下才发现大有不同)

indexOf是传入一个值.找到了也是返回索引,没有找到也是返回-1 ,属于ES5

findIndex是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1. 属于ES6

实例:

 var list = [55, 66, 77, 88, 99, 100];
 var index = list.findIndex(function (item, index, array) {
      console.log(item, index, array);
      return item > 60;
  });
 console.log(index); // 1

打印结果

为1, 循环步骤和find()方法一样,但是它返回的是下标,find()返回的是满足条件的元素

22、fill()

功能: 用给定值填充一个数组

参数

参数选项描述
value必选填充的值。
start可选开始填充位置
end可选停止填充位置 (默认为 array.length)

实例

var result = ["a", "b", "c"].fill("填充", 1, 2);

打印结果:
在这里插入图片描述

23、flat()

功能: 用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。

注意: 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity

  var list = [1, 2, [3, 4, [5]]];
  var arr = list.flat(); // 默认拉平一次
  console.log("拉平一次", arr);

  var arr = list.flat(2); // 拉平2次
  console.log("拉平两次", arr);

打印结果:
在这里插入图片描述

24、flatMap()

功能flat()map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )

 var list = [55, 66, 77, 88, 99, 100];
 var newArr = list.map(function (item, index) {
      return [item, index];
 });
 console.log("Map方法:", newArr);

 var newArr = list.flatMap(function (item, index) {
      return [item, index];
 });
 console.log("flatMap方法:", newArr);

打印结果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值