JavaScript常用的数组方法（数组新特性）

方法名	描述
concat	连接2个或者更多数组，并返回结果
every	对数组中的每一项运行给定函数，如果该函数对每一项都但返回true,则返回true
filter	对数组中度过每一项运行给定函数，返回该函数会返回true的项组成分数组
forEach	对数组中更多每一项运行给定函数，这个方法没有返回值
join	将所有的数组元素连接成一个字符串
indexOf	返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1
lastIndexOf	返回在数组中搜索到的与给定参数相等的元素的索引里最大的值
map	对数组中的每一项运行给定函数，返回每次函数调用结果组成的数组
reverse	颠倒数组中的元素的顺序，原先第一个元素现在变成了最后一个，同样原先的最后一个元素变成了现在的第一个
slice	传入索引值，将数组里对应索引范围内的元素作为新数组返回
some	对数组中每一项运行给定函数，如果任一项返回true,则返回true
sort	按照字母的顺序对数组排序，支持传入指定排序方法的函数作为参数
toString	将数组作为字符串返回
valueOf	和 toString 相似，将数组作为字符串返回
reduce	将数组整合

判断一个对象是否是数组

let a = [1,3,4];
a.constructor === Array;//true

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

let a = [1,2,3]
Array.isArray(a);//true

1.join()  将数组转成字符串

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join()===arr.toString()); // true
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组）

延伸-----字符串转数组

let str = 'hello world'
let arr = str.split(' ')
let arr2 = str.split()
console.log(arr)  // ['hello','world']
console.log(arr2) // ['hello world']

2.push()和pop()  -----会改变原数组长度

push()给数组末尾添加一组或多组数据

pop()删除数组最后一项

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

3.shift()和unshift()  -----会改变原数组长度

shift()：删除原数组第一项，并返回删除元素的值。 
unshift():将参数添加到原数组开头，并返回数组的长度 。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4.sort() 排序（改变原数组）

sort是通过判断字符串来排序的，sort的第一个参数是一个方法，如果是数字通过返回正数或者负数来决定是升序或者降序

var arr1 = ["a", "d", "c", "b"];
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](元数组被改变)
console.log(arr2.sort( ()=> a-b))  // [3,13,24,51]

5.reverse() 数组反转（改变原数组）

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

6.concat() 合并数组 (原数组不改变)

var arr = [1,2,3,4];
var arrCopy = arr.concat(5,6,7);
console.log(arrCopy); //[1, 2, 3, 4, 5, 6, 7]
console.log(arr); // [1, 2, 3, 4](原数组未被修改)

7.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,-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]

8.splice() 删除，插入，替换数组（改变原数组）

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

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
 

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

9.indexof()和lastindexof()

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

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

10.foreach() 数组遍历

var arr = [11, 22, 33, 44, 55];
arr.forEach(function(x, index){
console.log( x, index);
});
// 输出为：
// 11,0
// 22,1
// 33,2
// 44,3
// 55,4

11.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]

12.filter() 数组过滤返回满足条件的新的数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((x, index)=> {
return (x+index) > 10
}); 
console.log(arr2); //[6, 7, 8, 9, 10]

13.every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

14.some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

15.reduce()：将数组整合。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

let num = [1, 2, 3, 4]
console.log(num.reduce(function(v1, v2){return v1 + v2})) // 10
console.log(num.reduce(function(v1, v2){return v1 * v2})) // 24

 

es数组扩展

Array.from()

任何有 length 属性的对象，都可以通过 from 方法转为数组。

Array.from('hello') // [ 'h', 'e', 'l', 'l', 'o' ]
 
Array.from([1, 2, 3]) // [ 1, 2, 3 ]
 
Array.from(new Set(['a', 'b'])) // [ 'a', 'b' ]
 
Array.from({ 0: 'a', 1: 'b', 2: 'c' }) // []
 
// 将对象转成数组
Array.from({ 0: 'a', 1: 'b', 2: 'c', length: 3 }) // [ 'a', 'b', 'c' ]
 

Array.ptototype.copyWithin()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

• target（必需）：从该位置开始替换数据。
• start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
  这三个参数都应该是数值，如果不是，会自动转为数值。

// 从0号位开始粘贴  复制从3号位开始复制  第三个参数没有默认复制到结尾
[1, 2, 3, 4, 5].copyWithin(0, 3) // [ 4, 5, 3, 4, 5 ]

// 从0号位开始粘贴  复制从3号位开始复制  复制到4号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [ 4, 2, 3, 4, 5 ]

Array.prototype.find()

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0) // -5

[1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10

Array.prototype.findIndex()

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

Array.prototype.fill()

fill 方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(1) // [1, 1, 1]

new Array(3).fill(1) // [1, 1, 1]

// fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。

let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('react存在');
}

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flat()方法最基本的作用就是数组降维

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较。

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]