JS-数据类型之数组（Array）方法总结

总是想要总结下数组方法，平常用时slice、splice总是记混有时还跟字符串方法substring、substr、slice、replace傻傻分不清，这几个单词高度相似，对我这个英语不好的，真是不友好，今天咱们就一次解决下

第一步：分门别类

凡事先分类，这样后面就好记了

1、添加元素类：push、unshift、fill
2、删除元素类：pop、shift、splice
3、数组转字符串类：toString、join
4、遍历类：forEach、reduce、reduceRight、map、filter、some、every、find、findIndex、entries、keys、values
5、排序：sort
6、拼接：concat
7、索引：indexOf、lastIndexOf
8、翻转：reverse
9、浅拷贝：slice
10、数组片平化：flat、flatMap
11、还有三个数组的私有方法 Array.from()、Array.isArray()、Array.of()

11是数组的私有方法，那1 - 10呢，我们看图，都是数组的原型方法

有了上面的简单介绍，相信大家已经有了比较清晰的思路了，接下来咱们一个个的来看下具体定义。

1、push()和 pop()

push() 方法从数组末尾向数组添加元素，可以添加一个或多个元素。
pop() 方法用于删除数组的最后一个元素并返回删除的元素。

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

2、shift() 和 unshift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

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

3、fill() es6 新增

fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组。

let arr = [1, 2, 3,  4 , 5];
arr.fill(1);
console.log(arr); //[1, 1, 1 ,1, 1];

如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）3 个参数： 填充数值，起始位置参数，结束位置参数（不包括结束位置的那个元素）

let arr = [1, 2, 3,  2 , 5];
arr.fill(1, 2);
console.log(arr); //[1, 2, 1, 1, 1]
arr.fill(0, 1, 3);
console.log(arr); //[1, 0, 0, 1, 1];

4、splice- 删除、插入和替换，异常强大

splice(index, count, item1, item2…)
第一个参数是下标，第二个是删除的个数，后面是要插入的数值

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

let arr = [1, 3, 5, 7, 9, 11];
let arrRemove = arr.splice(0, 2);
console.log(arr);   //[5, 7, 9, 11]
console.log(arrRemove);   //[1, 3]

向指定索引处添加元素

let array = [22, 3, 31, 12];
array.splice(1, 0, 12, 35); // []
console.log(array1); // [22, 12, 35, 3, 31, 12]

替换指定索引位置的元素

const array1 = [2, 3, 31, 1];
array1.splice(1, 1, 8);   //[3]
console.log(array1);  // [2, 8, 31, 1]

5、toString

该方法返回数组中每个元素被逗号分割的字符串。

let arr = [1,2,3]
console.log(arr.toString())  //  "1,2,3"

6、join

该方法将数组转化成指定分割的字符串，默认用逗号‘，’分割

let arr = ['hello', 'world']
arr.join()       // "hello,wrold"
arr.join('-')    // "hello-world"

7、forEach、Map

forEach该方法对数组进行遍历，就不举例说明了，参数就是callback(value, index, arr)
与for循环遍历类似，这个方法没有返回值。
Map方法和forEach一样都是遍历数组，不同之处只是map方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

8、reduce、reduceRight

这两个方法都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值。
reduce()方法从数组的第一项开始，逐个遍历到最后。
reduceRight()则从数组的最后一项开始，向前遍历到第一项。
4 个参数：前一个值、当前值、项的索引和数组对象

let values = [1,2,3,4,5];
let sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);   // 数组一开始加了一个初始值10,可以不设默认0
console.log(sum);  //25

这个方法也是很强大，我有一篇专门讲这个可以查看这个链接
reduce详解

9、filter

Array,filter(callback(value,index, arr))
该方法过滤条件符合的元素

let arr = [1,2,3,6,7,8]
let tempArr = arr.filter(item => item % 2 === 0)
console.log(tempArr) //     [2,6,8]

10、some、every

some：该方法与every()方法意思相反，如果一个元素或者多个元素通过测试则返回true，否则返回false。常用于检测数组中是否存在某个元素值。
every：该方法检测数组所有元素是否通过测试，如有一个不通过则返回false，全部通过返回true。
arr.every(callback(value,index,arr))

let fn = (value, index, array) => {
  return value > 10;
}
console.log([2, 5, 8, 1, 4].some(fn));  // false
console.log([5, 12, 8, 1, 4].some(fn)); // true
let aa = [12, 5, 8, 130, 44].every(fn);  // false
let bb = [12, 54, 18, 130, 44].every(fn);  // true

11、find、findIndex

这两个方法一起讲，是因为这两个是配套的方法，find方法返回条件符合的值，否则返回undefined，而findIndex方法返回符合条件的索引，否则返回-1。从名字看就很容易区分。
参数都是callback(item, index, arr)

let arr = [1,2,3,6,7,8]
let tempArr = arr.find(item => item > 7)
let tempArrs = arr.findIndex(item => item > 7)
console.log(tempArr)    //  8
console.log(tempArrs)  //  5

12、entries、keys、values

这三个也比较类似放在一起解释
keys 返回数组的Iterator对象，返回的是组数的索引
values 返回数组的Iterator对象，返回的是数组的值
entries该方法集合了keys()、values() 的优点，返回key和value。
将数组返回得到迭代器Iterator对象，该迭代器对象原型有个next()方法，可遍历迭代器得到

let arr = [1,2,3]
console.log(arr.keys())  //  Array Iterator {}
console.log([...arr.keys()])  //  [0, 1, 2]
console.log(Object.keys(arr))  //  ['0', '1', '2']
console.log(arr.values())  //  Array Iterator {}
console.log(Object.values(arr))  //  [1, 2, 3]

let arr = ["a", "b", "c"]; 
let iterator = arr.entries();
for(let i = 0; i < 3; i++){
    console.log(iterator.next().value)
}
[0, "a"]
[1, "b"]
[2, "c"]

13、sort，该方法会改变原数组

Array.sort()方法主要用于对数组进行排序，如果没有指定方法，则会按照字符串Unicode码点进行排序

let arr = ['a', 'c', 'd', 'e', 'b']
console.log(arr.sort()) //  ['a', 'b', 'c', 'd', 'e']

这个方法的主要用处还是指定callback() 对数组进行排序，参数：callback(a,b)
返回三种结果：如果返回的值大于零，b在a之前，如果返回的值小于零，则a在b之前，如果返回零，a,b位置保持不变。
所以，对于数字型数组，可以巧妙的使用该方法：a-b(升序)，b-a(降序)

let arr = [2,4,6,34,6,34,56,88,32]
arr.sort((a,b) => a - b)
console.log(arr) // [2, 4, 6, 6, 32, 34, 34, 56, 88]
arr.sort((a,b) => b - a)
console.log(arr) // [88, 56, 34, 34, 32, 6, 6, 4, 2]

14、concat

该方法用于合并两个或多个数组，属于浅拷贝，不改变原有数组，形成新的数组。

let arr1 = [1,2,3]
let arr2 = [1,2,3]
let arr = arr1.concat(arr2)
console.log(arr)  //[1, 2, 3, 1, 2, 3]
等同于 [...arr1, ...arr2]

15、indexOf、lastIndexOf

都是查找数组中指定元素的索引值，没有返回 -1

indexOf() – 从前向后搜索

方法可返回某个指定的字符串值在字符串中首次出现的位置，如果指定第二个参数 start，
则在一个字符串中的指定位置从前向后搜索

lastIndexOf() – 从后向前搜索

方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，
则在一个字符串中的指定位置从后向前搜索。
注意： 该方法将从后向前检索字符串，但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。

16、[].slice() 和 ‘’.slice()

这两个方法相同，都是截取对应数组或者字符串，都不会改变原数组
参数：[start, end)，取值包括开始start，不包括结束end。
同时支持参数为负数，即从末尾开始算，-1表示末尾元素。

17、flat、flatMap

flat

该方法对数组递归遍历合并成一个新数组

let arr = [1,2,3,[6,[7,8]]]
let newArr = arr.flat(1)       //      [1, 2, 3, 6, [7, 8]]
let newArr = arr.flat(Infinity) //     [1, 2, 3, 6, 7, 8]

flatMap

flatMap 和 map 方法类似，但是map()方法不会对返回的指定元素降层处理，而flatMap()则会对返回数组的元素进行一次降层

let arr = [1,2,3]
let tempArr = arr.map(item => [item*2])
let tempArrs = arr.flatMap(item => [item*2])
console.log(tempArr)    //  [[2],[4],[6]]
console.log(tempArrs)   //[2, 4, 6]

18、Array.from()

方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo'));
//  ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
//  [2, 4, 6]

19、Array.isArray()

用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

20、Array.of()

方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]