总结JS中常用的数组方法

JS中常用的数组方法总结

---

数组(Array)是一种复杂的数据类型，它属于Object(对象)类型，用来将一组数组合在一起，通过一个变量就可以访问一组数据。在使用数组时，经常会搭配循环语句使用，从而很方便地对一组数据进行处理。

---

一，JS中创建数组的方式：

在JavaScript中创建数组有两种常见的方式，一种是使用“new Array()”创建数组，另一种是使用“[]” 字面量来创建数组。示例代码如下。

//使用new Array() 创建数组
var arr1 = new Array();     // 空数组
var arr2 = new Array('苹果', '橘子', '香蕉', '桃子'); // 含有4个元素
//使用字面量来创建数组
var arr1 = [];             //  空数组
var arr2 = ['苹果', '橘子', '香蕉', '桃子'];          // 含有4个元素

（1）使用Array构造函数

var color = new Array();
注意：括号里面的参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个(多个)
非数字表示的是传递数组中应该包含的值

（2）使用数组字面量

var Array = [];

（3）如何访问数组中的元素
在数组中，每个元素都有索引(或称为下标)，数组中的元素使用索引来进行访问。数组中的索引是-一个数字， 从0开始，如图所示。

访问数组元素的语法为“数组名[索引]”，示例代码如下。

var arr=['苹果','橘子','香蕉','桃子'];
console.log(arr[0]);       //输出结果:苹果
console.log(arr[1]);       //输出结果:橘子
console.log(arr[2]);       //输出结果:香蕉
console.log(arr[3]);       //输出结果:桃子
console.log(arr[4]);       //输出结果: undefined(数组元素不存在)

---

二，数组的长度

var arr = [1,2,3,[5,6]];
console.log(arr.length);  // 4

三，数组的方法有数组原型方法，也有从Object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有：

注意：这里仅为JS中常用的数组方法简单概览
1，join（）
将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认逗号为分隔符，该方法只接收一个参数：即分隔符
push（）和pop（）
2，push（）可以接收任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后的长度
3，pop（）数组末尾移除最后一项，减少数组的length值，然后返回移除项
shift（）和unshift（）
4， shift()删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined
5， unshift()将参数添加到原数组的开头，并返回数组到长度。
这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾
6，sort（）
sort:按升序排列数组项，即最小的值位于最前面，最大的值排在最后面
在排序时，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序
即使数组中的每一项都是数值，sort（）方法比较的是也是字符串，因此会出现以下的几种情况
7，reverse（）
反转数组项的顺序
8，concat（）
concat():将参数添加到原数组，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
在没有concat（）方法，传递参数的情况下，它只是复制当前数组并返回副本。
9，slice（）
slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，
slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
10，splice（）
很强大的数组方法，它有很多种用法，可以实现删除，插入和替换。
（1）. 删除:可以删除任意数量的项，只需指定2个参数，要删除的第一项的位置和要删除的项数
例如:splice(0,2)会删除数组中的前两项
（2）. 插入:可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数:起始位置，要删除的项数和要插入任意数量的项，
插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
（3）. 替换:可以向指定位置插入任意数量的项，且同时删除任意数量的项
只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
注意:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组
11，indexOf（）和lastindexOf（）（ES5新增）
indexof():接收两个参数:要查找的项和（可选的）表示查找起点位置的索引，其中，从数组的开头（位置0）开始向后查找(从前往后找)
12，lastindexof():接收两个参数:要查找的项个(可选的)表示查找起点位置的索引，其中，从数组的末尾开始向前查找（从后往前找）
此两种方法都返回要查找的项在数组中的位置，或者再没有找到的情况下返回-1，在比较第一个参数与数组中的没有项时，会使用全等操作符。
数组迭代方法：
13，forEach（）（ES5新增）
对数组的每一项运行给定函数，该方法没有返回值
14，map（）（ES5新增）
对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组
15，filter（）（ES5新增）
对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组
16，every（）（ES5新增）
对数组中的每一项运行都给定函数，如果该函数对每一项都返回true，则返回true
17，some（）（ES5新增）
对数组中的每一项运行给定函数，如果该函数对任意一项返回，则返回true
18，reduce（）和reduceRight（ES5新增）
这两个方法都会迭代数组所有的项，然后构建一个最终的值返回

1.join（）

将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认逗号为分隔符，该方法只接收一个参数：即分隔符

代码如下（示例）：

  /*** 1,join（）方法：将数组的元素组起一个字符串，以separator为分隔符，省略的话则默认用逗号为* 分隔符，该方法只接收一个参数：即分隔符* */  var arr = [1,2,3];console.log(arr.join());    // 1,2,3console.log(arr.join('-')); // 1-2-3console.log(arr); // 原数组不变// 通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下:function repeatString(str,n) {return new Array(n+1).join(str)}console.log(repeatString('abc',3));  //abcabcabcconsole.log(repeatString('abc',3).length); // 9

2.push（）和pop（）

push（）可以接收任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后的长度
pop（）数组末尾移除最后一项，减少数组的length值，然后返回移除项（pop里面没有参数，即使有参数，也是删除最后一项）

代码如下（示例）：

/*** 2.push()和pop（）* push（）可以接收任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后的长度* pop（）数组末尾移除最后一项，减少数组的length值，然后返回移除项*/var arr =['a','b','c'];var count = arr.push('d','e')console.log(arr);  // ['a', 'b', 'c', 'd', 'e']console.log(count);//   5var item = arr.pop()console.log(item); // econsole.log(arr);  // ['a', 'b', 'c', 'd']var item2 = arr.pop('c','d');console.log(item2); // dconsole.log(arr);   // ['a', 'b', 'c']//  注意: pop()里面没有参数，即使有参数，也是删除最后一项

3.shift（）和unshift（）

shift()删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined
unshift将参数添加到原数组的开头，并返回数组的长度。
这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

代码如下（示例）：

   /*** 3.shift（）和unshift（）* shift()删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined* unshift将参数添加到原数组的开头，并返回数组到长度。* 这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组 的结尾*/var arr = ['c','d','e']var count = arr.unshift('a','b');console.log(arr);   // ['a', 'b', 'c', 'd', 'e']console.log(count); // 5var item = arr.shift();console.log(item);  //  aconsole.log(arr);   //  ['b', 'c', 'd', 'e']

4.sort（）

sort:按升序排列数组项，即最小的值位于最前面，最大的值排在最后面
在排序时，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序
即使数组中的每一项都是数值，sort（）方法比较的是也是字符串，因此会出现以下的几种情况

代码如下（示例）：

   var arr1 = ['d','b','a','c'];console.log(arr1.sort()); // ['a', 'b', 'c', 'd']arr2 = [13,24,51,3];console.log(arr2.sort()); // [13,24,3,51]console.log(arr2);  // [13,24,3,51] (原数组被改变)// 为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便于我们指定那个值位于哪个值的前面// 比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，// 如果第一个参数应该位于第二个之后则返回一个正数，以下就是一个简单的比较函数。function compare(value1,value2) {return value1-value2;}var arr = [13,54,3,10,87];console.log(arr.sort(compare)); // [3,10,13,54,87]

5.reverse（）

反转数组项的顺序

代码如下（示例）：

 var arr = [13,54,3,10,87];console.log(arr.reverse()); // [87, 10, 3, 54, 13]console.log(arr);   //  [87, 10, 3, 54, 13] 原数组改变 */

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 arr2 = [1,3,5,7];var arrCopy2 = arr2.concat([9,[11,13]]);console.log(arrCopy2);  // [1, 3, 5, 7, 9, Array(2)]console.log(arrCopy2[5]);  // [11, 13] */
//上述代码中，arrCopy2数组的第五项是一个包含两项的数组，也就是说concat方法只能将传入数组中的
//每一项添加到数组中，
// 如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中

7.slice（）

slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，
slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

代码如下（示例）：

  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,-2);console.log(arr);     // [1,3,5,7,9,11] console.log(arrCopy);
// [3,5,7,9,11] arrCopy只设置了一个参数，也就是起始下标为1，所以返回的数组为下标1（包括下标1）开始到数组最后。console.log(arrCopy2); // [3,5,7]  arrCopy2设置了两个参数，返回起始下标（包括1）开始到终止下标（不包括4）的子数组。    console.log(arrCopy3); // [3,5,7] arrCopy3设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值（6）来替换该位置的数，因此就是从1开始到4（不包括）的子数组。
console.log(arrCopy4); // [5,7,9] arrCopy4中两个参数都是负数，所以都加上数组长度6转换成正数，因此相当于slice(2,5)。

8.splice（）

很强大的数组方法，它有很多种用法，可以实现删除，插入和替换。

1. 删除:可以删除任意数量的项，只需指定2个参数，要删除的第一项的位置和要删除的项数
   例如:splice(0,2)会删除数组中的前两项
2. 插入（参数：起止，删除，增加）:可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数:起始位置，要删除的项数和要插入任意数量的项，
   插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
3. 替换（参数：起止，删除，替换）:可以向指定位置插入任意数量的项，且同时删除任意数量的项
   只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
   例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
   注意:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组>代码如下（示例）：

// 删除:可以删除任意数量的项,传入2个参数,要删除的第一项的位置和要删除的项数,
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);  // (0,2)表示删除前两项
console.log(arr); // [5,7,9,11];
console.log(arrRemoved); // [1,3]; // 返回从原始数组中删除的项，若没有删除任何项，则返回空数组// 插入:可以向指定位置插入任意数量的项,传3个参数，第一个为起始位置，第二个为要删除的项，第三个为要插入的项
var arrRemoved2 = arr.splice(2,0,4,6);
// 例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
console.log(arr); //[5,7,4,6,9,11]
console.log(arrRemoved2);  // []// 替换:可以向指定位置插入任意数量的项，且同时删除任意数量的项,传入3个参数,第一个为起始位置，第二个要删除的项数，第三为要插入的任意数量的项,插入的项数不必与删除的项数相等
var arrRemoved3 = arr.splice(1,1,2,4);
// 例如，splice (1,1,2,4)会删除当前数组位置 2 的项，然后再从位置 2 开始插入2和4。
console.log(arr);// [5,2,4,4,6,9,11]
console.log(arrRemoved3);// [7]

9.indexOf 和 lastindexOf（）

indexof():接收两个参数:要查找的项和（可选的）表示查找起点位置的索引，其中，从数组的开头（位置0）开始向后查找(从前往后找)
lastindexof():接收两个参数:要查找的项个(可选的)表示查找起点位置的索引，其中，从数组的末尾开始向前查找（从后往前找）
此两种方法都返回要查找的项在数组中的位置，或者再没有找到的情况下返回-1，在比较第一个参数与数组中的没有项时，会使用全等操作符。

代码如下（示例）：

     var  arr  = [1,3,5,7,7,5,3,1];console.log(arr.indexOf(5));      // 2console.log(arr.lastIndexOf(5));  // 5console.log(arr.indexOf(5,2));    // 2console.log(arr.lastIndexOf(5,4));// 2console.log(arr.indexOf('5'));    // -1

四，数组的遍历

 var arr = [1,2,3,4,5]for(var i=0;i<arr.length;i++){console.log(arr[i]);  // 分别打印出 1,2,3,4,5}for( var j in arr) {console.log(arr[j]);  // 分别打印出 1,2,3,4,5}

五，数组的迭代方法

ECMAScript为数组定义了五个迭代方法，每个方法都接收两个参数
要在每一项上面运行的函数和运行该函数的作用域——影响this的值。传入这些方法的函数会接收三个参数（数组项的值，索引，数组本身）

1.foreach（）对数组的每一项运行给定函数，该方法没有返回值

代码如下（示例）：

  var arr = [1,2,3,4,5];arr.forEach(function(item,index,arr) {console.log(item+'-'+index+'-'+arr);// 1-0-1,2,3,4,5// 2-1-1,2,3,4,5// 3-2-1,2,3,4,5// 4-3-1,2,3,4,5// 5-4-1,2,3,4,5})console.log(arr); //[1,2,3,4,5]

1.some（）对数组中的每一项运行给定函数，如果该函数对任意一项返回，则返回true

代码如下（示例）：

  var arr = [1,2,3,4,5];var b = arr.some(function (value) {return value > 3;})console.log(b);  // true ，因为4,5大于3，因此也返回truelet c = arr.some(function(value,index,arr) {return value > 2 && value > 2})console.log(c);console.log(arr);

3.every（）对数组中的每一项运行都给定函数，如果该函数对每一项都返回true，则返回true

代码如下（示例）：

 var arr = [1,2,3,4,5];var b = arr.every(function(value) {return value >  3;})console.log(b);     // false console.log(arr);   // [1,2,3,4,5]```

4.filter（） 对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组，对数组的变化不会影响到原数组

代码如下（示例）：

 var arr = [1,2,3,4,5];var a = arr.filter(function (value) {return value > 3;})console.log(a);  //[4,5]console.log(arr);//[1,2,3,4,5]//  对新数组变化不会影响原数组的改变a[1] = 100;console.log(a);   // [4,100]console.log(arr); // [1,2,3,4,5]

5.map（）对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组，对数组的变化不会影响到原数组

代码如下（示例）：

  var arr  = [1,2,3,4,5];var a = arr.map(function (value) {return value * 3;});console.log(a);   // [3, 6, 9, 12, 15] a[1] = 100console.log(a);   // [3, 100, 9, 12, 15]console.log(arr); // [1, 2, 3, 4, 5] *///  之后生成的数组不会影响原数组

六，迭代方法

ES6新增了两个归并数组的方法: reduce() 和 reduceRight() 这两个方法都会迭代数组所有的项，然后构建一个最终的值返回
这两个方法都接收了两个参数:一个在每一项上面调用的函数和（可选）作为归并基础的初始值
给reduce()和reduceright()这两个方法的函数都接收四个参数值:前一个值，当前值，索引，数组对象
这个函数返回的任何值都会作为第一个参数自动传给下一项，第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项

代码如下（示例）：

   (1) 第一次执行回调函数的时候,pre为1，cur为2，第二次pre为3（1+2的结果）cur为3(数组的第三项)，依次类推，直到将数组的每一项都有访问一遍，最后返回结果var value = [1,2,3,4,5];var sum  = value.reduce(function(pre,cur,index,array){return pre + cur;})console.log(sum);// reduceRight() 与 reduce() 使用一样,只不过是从后往前遍历

---

七，数组的变异

提示：数组的变异：顾名思义，会改变这些方法调用的原始数组
非变异方法： filer（），concat（），slice（）深拷贝等这些不会改变原始数组，但总是返回一个新数组，可用新数组替换旧数组。
变异： push()和pop()，shift() 和 unshift()，sort()，splice()
非变异： join()，concat()，slice()，indexOf()和 lastIndexOf() （ES5新增），forEach() （ES5新增），some() （ES5新增）,fliter() (ES5新增)，map() （ES5新增），every() （ES5新增），reduce()和 reduceRight() （ES5新增）

总结JS中常用的数组的方法大全相关推荐

1. js中常用的数组和字符串方法

   一:js中常用的数组方法 <script>//函数声明式中的方法const arr=[1,3,6,9,15,19,16];//函数的所有方法 map(),reduce(),filter() ...

2. js中改变原数组的方法以及解决改变原数组的方法

   js中改变原数组的方法以及解决改变原数组的方法 参考文章: (1)js中改变原数组的方法以及解决改变原数组的方法 (2)https://www.cnblogs.com/Ingots/p/1151701 ...

3. JS中常用的函数求和方法总结【五种方法】

   本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, ...

4. js中常用的Math函数方法

    1.Math.abs():  返回绝对值 console.log(Math.abs(-1));//1 console.log(Math.abs('1.2'));//1.2,对于字符串会先转换成num ...

5. js中 map 遍历数组

   forEach()和map()都是遍历数组的方法,用法类似,但是还是有很大区别: 相同点: 1.都是循环遍历数组中的每一项: 2.在遍历中执行匿名函数都可以接收三个参数,分别为:遍历过程的每一项.遍历 ...

6. js中常用的对象—String的属性和方法

   今天说一下,js中常用的内置对象--String对象 它有以下几个常用的属性: length prototype 有以下几个常用的方法: parseInt()转换为数字 parseFloat()转换为 ...

7. js中text方法是啥意识_一盏茶的时间，快速捕获JS中常用的方法（细心整理，持续更新ing）...

   不知不觉上班一周辽-趁着大好周末,小编挣扎着从床上爬起来,决定对前端日常编程中常用到的一些方法做一个系统的整合. 有些人或许会觉得忘了百度就完事儿,no no no!这事儿小编真的亲践过好多次,百度一 ...

8. 数组中常用的高阶方法

   一.操作方法 1.concat 如果传递的参数是一个数组或者多个数组,那么会将多个数组的每一个项都添加到原来的数组后面,然后返回这个数组,原数组不变. 例如: 2.slice slice方法接受两个参 ...

9. js中实现截取数组的后几个元素作为一个新数组的方法

   js中实现截取数组的后几个元素作为一个新数组的方法 有时候我们会遇到这种需求,截取数组中后5个元素作为一个新数组,且顺序不能变.数组中的slice()方法和splice()方法都可以实现这样的操作. ...

最新文章

1. CodeForces - 1110E-Magic Stones（差分+思维）
2. js 调用父窗口的方法
3. ribbon和feign的区别
4. 【SSL】java keytool工具创建自己的(localhost)(JKS)证书库
5. apache shiro_Apache Shiro第3部分–密码学
6. 【Python + Selenium】之JS定位总结
7. Atmel跑Linux的arm芯片,Linux已被移植到Atmel的ATmega微控制器
8. gsensor 车辆碰撞算法_AEB安全模型（一）——基于碰撞时间的安全模型
9. Google Protobuf 开发指南
10. Spark MLlib中的协同过滤
11. 微型计算机主机箱内的所有部件均由,计算机应用基础模拟题
12. JAVA设计模式（08）：结构化-飞锤（Flyweight）
13. 5-21 求前缀表达式的值（25分）
14. java batik_batik详解2
15. 证件照换背景-----ps
16. mac下安装photoshop
17. 使用枚举实现英文转盲文
18. vue怎么给pc端浏览器设置一个最小屏幕_vue项目实现移动端适配的案例
19. 64位Win7 安装配置 64位Oracle11g + 32位InstantClient + PLSQL10
20. 《How to be nubility for coder》

热门文章

1. Word修改作者公司主题标题编辑时间创建时间等一些属性工具软件
2. W ndows7蓝屏0x00000024,Windows7系统蓝屏代码大全
3. 【C++·Qt】Qt透明无边框窗口以及拖动
4. SPSS27破解安装后，出现应用程序无法正常启动(0xc000007b)
5. 极空间私有云首秀即C位！Z2上线遭疯抢售罄，旗舰机型Z4开启京东预售
6. OBS黑屏win10解决方法
7. 怪物猎人世界pc服务器在哪个文件夹,怪物猎人世界存档位置在哪 怪物猎人世界冰原存档位置一览...
8. access 报表隔行底纹_请问高手:如何快速实现工作表的隔行底纹设置 – 手机爱问...
9. 为什么我在抖音上发的视频第一次不火，重新发一次就火了？
10. 找不到或者无法加载主类