数组方法的总结 js es6

处理数组方法的总结

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

改变原数组的方法

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)。

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]

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]

reverse：数组翻转

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

fill：元素填充

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

a.rr.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]

splice方法：会改变数组

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

格式：

array.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"。以数组的格式返回删除的元素

不改原数组的方法

• concat
• slice
• join

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]

slice方法

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

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

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'

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)); // -1
console.log(arr.lastIndexOf(2)); // 3 从数组的末尾开始向前查找，返回正序下标
console.log(arr.lastIndexOf(2,2)); // 1 从数组的末尾开始向前查找，返回正序下标

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

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]

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]

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

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

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]

includes方法

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

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

toString

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

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

静态方法

Array.from()

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

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

Array.isArray

判断是否是数组

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

小结

javascript的数组方法中

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