数组方法小结

数组方法小结

数组是一种常见的数据结构，数组操作也是前端工程师必知必会的技能。本文针对js中的数组操作进行总结，归类，建议收藏。

1 简介

本文总结了js中数组的方法，并做了一些分类。属于基本功能，所有与js打交道的人都可以阅读。

2 主要内容

•数组的方法从哪里来•数组的方法分类•几个数组的使用技巧

3 数组的方法从哪里来

当我们定义一个数组之后，我们就可以直接使用它的方法。例如：

var arr = [];arr.push(100);

为什么我们可以使用push方法呢？因为arr是通过Array构造器产生的，它相当于是:

var arr = new Array();app.push(100);

而按照原型链的规则，app是可以使用Array.prototype上的属性和方法的。也就是说数组对象具有的方法是从Array.prototype上继承而来的。

我们可以在浏览器开发者工具中去检查一下：

4 数组方法的分类

按是否会修改原数组分成两大类。

4.1 改变原数组的方法

4.1.1 push/pop方法

push:在数组尾部添加元素，会增加数组的长度
pop:在数组尾部取出元素，会减少数组的长度​​​​​​​

var arr = [1, 2, 3, 4, 5];arr.push(6);console.log(arr); //  [1, 2, 3, 4, 5, 6]let b = arr.pop();console.log(arr); //  [1, 2, 3, 4, 5]console.log(b); // 6

值得注意的是push()是可以一次添多个元素的，例如arr.push(1,2,3)。

4.1.2 shift/unshift方法

unshift: 在头部添加元素，会增加数组的长度
shift:在头部删除元素

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

4.1.3 sort：排序

对数组进行排序，会影响数组元素​​​​​​​

var arr = [21, 1, 3, 45, 2];arr.sort();console.log(arr); // (5) [1, 2, 21, 3, 45]arr.sort((a, b)=>a-b); console.log(arr); // (5) [1, 2, 3, 21, 45]

4.1.4 reverse：数组翻转​​​​​​​

var arr = [1，2，3];arr.reverse();console.log(arr); // [3，2，1]

4.1.5 fill：元素填充

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
格式

arr.fill(value[, start[, end]])

参数:

•value用来填充数组元素的值。•start 可选 . 起始索引，默认值为0。•end 可选. 终止索引，默认值为 this.length。​​​​​​​

var arr = [1, 2, 3, 2, 5];arr.fill(1,2,4); // 用1填充数组中从起始索引到终止索引内的全部元素console.log(arr); // (5) [1, 2, 1, 1, 5]

4.1.6 splice方法：会改变数组

它通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。它是功能最强大的一个方法。

格式：

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

•start
指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。•deleteCount 可选
整数，表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。•item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

所以它可以实现：

•添加功能•删除功能•修改功能​​​​​​​

var arr = [1, 2, 3];arr.splice(0,0,'a','b'); // 向数据的头部添加元素'a', 'b'arr.splice(0,3); // 从下标为0的元素开始，删除3个元素。以数组的格式返回删除的元素arr.splice(2,1,"a");// 从下标为2的元素开始，删除1个，并插入a。相当于arr[2] = "a"。以数组的格式返回删除的元素

4.2 不改原数组的方法

•concat•slice•join

4.2.1 concat

作用：实现拼接数组。它不会改变原数组，会返回一个拼接后的新数组​​​​​​​

var arr1 = [1,2,3];var arr2 = [3,4];arr1.concat(arr2);console.log(arr1.length); // 3。arr1不会变化。console.log(arr1.concat(arr2)) // [1, 2, 3, 3, 4]

4.2.2 slice方法

作用：从数组中截取出一部分，并以数组的格式返回，不会改变原数组
格式：slice(下标起点，下标终点）​​​​​​​

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

4.2.3 join方法

作用：返回一个字符串。不会改变原数组。​​​​​​​

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

4.2.4 indexOf/lastIndexOf方法

在数组中查找元素所在的下标。不会改变数组，返回指定数值的数组下标​​​​​​​

var arr = [1, 2, 3, 2, 5];console.log(arr.indexOf(2)); // 1 返回值为2的数组的下标console.log(arr.indexOf(2,2)); // 3 第一个参数表示要查找的数，第二个参数表示查找起点位置的索引console.log(arr.indexOf(6)); // -1console.log(arr.lastIndexOf(2)); // 3 从数组的末尾开始向前查找，返回正序下标console.log(arr.lastIndexOf(2,2)); // 1 从数组的末尾开始向前查找，返回正序下标

4.2.5 forEach方法

最常见的遍历操作，它不会改变数组且方法没有返回值​​​​​​​

  var arr = [1, 2, 3, 2, 5];  arr.forEach(function(a, index, array) {     // 循环遍历,对每一项运行给定函数,这个方法没有返回值    // 参数分别为：遍历的数组内容,内容对应的数组索引,数组本身  console.log(a, index, array === arr);    // 1 0 true    // 2 1 true    // 3 2 true    // 2 3 true    // 5 4 true  })  console.log(arr); // [1, 2, 3, 2, 5]  var arr1 = arr.forEach(function(a) { // forEach方法没有返回值    return a * 2;  })  console.log(arr1); // undefined

4.2.6 map方法

返回一个新数组，这个新数组中的每一项是对原数组中每一项调用某个函数而得到的。​​​​​​​

var arr = [1, 2, 3, 2, 5];var arr1 = arr.map(function(a) {    // 对每一项运行给定函数，返回每次函数调用的结果组成的数组   return a * 2;})console.log(arr); // (5) [1, 2, 3, 2, 5]console.log(arr1); // (5) [2, 4, 6, 4, 10]

4.2.7 filter方法

不会改变原数组，且返回一个新数组，新数组中的项是从原数组中选出来的某些项组成。​​​​​​​

  var arr = [1, 2, 3, 2, 5];  var arr1 = arr.filter(function(a) {       // 返回满足过滤条件组成的数组    return a > 2;  })  console.log(arr); // (5) [1, 2, 3, 2, 5]  console.log(arr1); // (2) [3, 5]

4.2.8 every方法

不会改变原数组，且返回一个布尔值 。
判断数组中每一项都是否满足条件，所有项都满足条件才会返回true

​​​​​​​

  var arr = [1, 2, 3, 2, 5];  var arr1 = arr.every(function(a) {     // 判断数组中每一项都是否满足条件，所有项都满足条件才会返回true    return a > 2;  })  console.log(arr); // (5) [1, 2, 3, 2, 5]  console.log(arr1); // false

4.2.9 some方法

不会改变原数组，且返回一个布尔值**​​​​​​​

  var arr = [1, 2, 3, 2, 5];  var arr1 = arr.some(function(a) {       // 判断数组中每一项都是否满足条件，只要有一项满足条件就会返回true    return a > 2;  })  console.log(arr); // (5) [1, 2, 3, 2, 5]  console.log(arr1); // true

4.2.10 reduce方法

不会改变原数组，迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，逐个遍历到最后。​​​​​​​

  var arr = [1, 2, 3, 2, 5];  // reduce方法有两个参数：在每一项上调用的函数和（可选的）作为归并基础的初始值  // reduce方法的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象  // 这个函数返回的任何值都会作为第一个参数自动传给下一项  // 第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项  var sum = arr.reduce(function(pre, cur, index, array) {     return pre + cur;  }, 10)  console.log(arr); // (5) [1, 2, 3, 2, 5]  console.log(sum); // 23

4.2.11 reduceRight

不会改变原数组，迭代数组的所有项，从数组的最后一项开始，向前遍历到第一项​​​​​​​

  var arr = [1, 2, 3, 2, 5];  var sum = arr.reduceRight(function(pre, cur, index, array) {     return pre + cur;  }, 10)  console.log(arr); // (5) [1, 2, 3, 2, 5]  console.log(sum); // 23

4.2.12 find/findIndex：

不会改变原数组，返回数组中满足提供的测试函数的第一个元素的值/下标​​​​​​​

  var arr = [1, 2, 3, 2, 5];  var arr1 = arr.find(ele=>ele>=2); // 返回数组中满足提供的测试函数的第一个元素的值  console.log(arr1); // 2   console.log(arr); // (5) [1, 2, 3, 2, 5]

4.2.13 includes方法

用来判断一个数组是否包含一个指定的值，返回 true或 false​​​​​​​

  var arr = [1, 2, 3, 2, 5];  console.log(arr.includes(2)); // true  console.log(arr.includes(6)); // false

4.2.14 toLocaleString

不会改变原数组，返回一个字符串表示数组中的元素，数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开​​​​​​​

  var arr = [11111111, 2222222];  console.log(arr.toLocaleString()); // 11,111,111,2,222,222  console.log(arr); // (2) [11111111, 2222222]

4.2.15 toString

不会改变原数组，返回一个字符串，表示指定的数组及其元素​​​​​​​

  var arr = [1,2,3];  arr.toString();  console.log(arr.toString()); // '1,2,3'  console.log(arr); // (3) [1, 2, 3]

4.3 静态方法

4.3.1 Array.from()

将伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象​​​​​​​

// arrayLike：想要转换成数组的伪数组对象或可迭代对象// mapFn (可选参数)：如果指定了该参数，新数组中的每个元素会执行该回调函数// thisArg (可选参数)：可选参数，执行回调函数 mapFn 时 this 对象// 返回值：一个新的数组实例Array.from(arrayLike, mapFn, thisArg)

4.3.2 Array.isArray

判断是否是数组​​​​​​​

var obj = {}console.log(Array.isArray(obj) ） // false

5 小结

javascript的数组方法中

•会改变原数组的方法有：unshift,shift,pop,push,sort,reverse,splice, fill•返回值是布尔值的方法有：Array.isArray , includes, some, every•参数可以是函数的是方法有：sort,map,forEach,filter,some,every,reduce,find,findIndex•功能最强大的是splice