JavaScript数组常用方法

数组方法的分类

根据是否会改变原数组进行分类

改变原数组的方法

push/pop方法

push: 在数组尾部添加元素，会增加数组的长度，返回值 是新数组长度
pop: 在数组尾部取出元素，会减少数组的长度，返回值 是被删除的数据

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

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

unshift/shift方法

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, 3, 4, 5]

sort排序

对数组进行排序，会影响数组元素，返回值是 新数组

var arr = [21, 10, 31, 42, 5]
arr.sort()
console.log(arr); // [10, 21, 31, 42, 5] 只排一次
arr.sort((a, b) => a-b);
console.log(arr); // [5, 10, 21, 31, 42] a-b正序 b-a倒序

reverse数组翻转

返回值： 返回反转后数组

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

fill元素填充

ES6为Array增加了fill()方法，用一个固定值填充一个数组中从开始索引到终止索引。不包括终止索引
返回值： 填充后的新数组

格式： arr.fill( value [, start [, end ] ] )
参数：

• value 填充值
• start 可选， 起始索引， 默认值为0
• end 可选， 终止索引， 默认值为this.length

var arr = [1, 2, 3, 4, 5];
arr.fill(7, 1, 4); // 用7填充数组中索引为[1, 4)的全部元素
console.log(arr); // [1, 7, 7, 7, 5]

splice方法

通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组的形式返回被修改的内容。他是功能最强大的一个方法。
格式： array.splice(start [ , deleteCount [ , item1 [ item2 [ , [ , …] ] ] ] ] )

• start
  指定修改的开始位置（从0计数）。如果超出了数组的长度，则从 数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
• deleteCount 可选
  整数，表示要移除的数组元素的个数。
  如果 deleteCount 大于 start之后的元素的总数，则从 start 后面的元素都将被删除（含第start位 )。
  如果 deleteCount 被忽略了， 或者它的值大于等于array.lenth - 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方法

实现拼接数组，不会改变原数组，会返回一个拼接后的新数组

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

slice方法

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

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 4)); // [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(item, index, arr) {
	console.log( item, index, 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(item) {
	return item * 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // [2, 4, 6, 4, 10]

filter方法

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

var arr = [1, 2, 3, 2, 5];
// 参数为： 遍历的数组内容， 内容对应的数组索引，数组本身
var arr1 = arr.filter(function(item){
	// 返回满足过滤条件的数据
	return item > 2;
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // [3, 5]

every方法

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

var arr = [1, 2, 3, 2, 5];
// 参数同上
var arr1 = arr.every(function(item) {
	return item > 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // false

some方法

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

var arr = [1, 2, 3, 2, 5];
// 参数同上
var arr1 = arr.some(function(item) {
	return item > 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // true

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); // [1, 2, 3, 2, 5]
console.log(sum); // 23
// 参数二10为基础值，如果不写数组第一项则为基础值

reduceRight

用法同reduce,只不过是从右向左。

find/findIndex

不会改变原数组，返回数组中满足提供的测试函数的第一个元素的值/下标
findIndex找不到返回-1
find找不到返回undefined

var arr = [1, 2, 3, 2, 5];
var arr1 = arr.find(item => item >= 2);
console.log(arr1); // 2
console.log(arr); // [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

toLocaleString方法

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

var arr = [1111111, 2222222];
console.log(arr.toLocaleString()); // "1,111,111,2,222,222"
console.log(arr); // [1111111, 2222222]

toString

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

var arr = [1, 2, 3];
console.log(arr.toString()); // "11,111,111,2,222,222"
console.log(arr); // [1, 2, 3]

静态方法

Array.from()

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

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

// 第三个参数用法
let diObj = {
  handle: function(n){
    return n + 2
  }
}

console.log('%s', Array.from(
  [1, 2, 3, 4, 5], 
  function (x){
    return this.handle(x)
  }, 
  diObj)) // 3,4,5,6,7

快速生成数组方法Array(10)

10是长度，生成的是伪数组

const arr = Array.from(Array(10), (val,index) => index+1)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.isArray

判断是否是数组

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

小结

javascript的数组的方法中

• 会改变原数组的有：push, pop, unshift, shift, sort, reverse, splice, fill
• 返回值是布尔值的有：isArray, every, some, includes
• 参数可以是函数的有：map, forEach, filter, every, some, find, findIndex, sort, reduce,reduceRight