js数组方法小总结

由于最近刷题踩坑多，于是将js数组方法拿来总结一下，主要总结一下几点：

1. 对原数组的操作
2. ES6新增数组方法
3. 判断数组类型

数组的改变

在使用数组方法时，很多时候没有注意原数组的改变，导致分析问题出错，下面罗列的是比较常见的方法，顺便也把语法复习一波

改变原来数组

• push()/pop()

把数组当作栈使用，在数组尾部添加/删除若干个元素，push()返回数组新的长度，pop()返回删除的元素。直接修改并替换原数组

• shift()/unshift()

在头部操作数组，类似pop()和push()方法，但是这个方法每次都要移动整个数组，如果只插入一个参素感觉还挺费劲，但是如果传递多个参数会一次性插入，所以插入顺序和参数列表一致

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

• splice(startIndex,num,insert)

在数组中插入或删除元素,startIndex指定要删除的起始索引，第二个参数num指定删除个数，后面的参数insert从startIndex位置开始插入，返回的结果是删除元素组成的数组。注意！如果插入的元素是数组，会插入数组本身

• sort()

将元素排序，并返回排序后的数组，默认以字母表顺序排序。一般我们会给sort传入一个比较函数，决定排序规则，比较函数参数a,b如果a要在前面，就返回负数，反之正数，相等返回0

var a=[33,4,1111,222];
a.sort(); //1111 222 33 4
a.sort(function(a,b){
	return a-b;  //4 33 222 1111
})

• reverse()

将数组元素逆序，返回逆序后的数组

另外，slice和splice长得很像，有时容易弄混，我就找了个方法，如果和我一样的可以试试😊：
splice和split前缀一样，我们很熟悉split是用于分割字符串的，这样我们可以联想到splice有‘分’这层意思，即在特定位置-插入删除,而slice意思是‘片’,就像在一个整体中取出一部分

不改变原来数组

• concat()

创建并返回一个新数组，即连接后的数组，包括原始数组和cancat的参数，如果参数中连接的是数组的元素，而非数组本身，但是不会递归扁平化数组的数组

var a=[1,2,3]
a.concat(4,[5,6]] //返回 [1,2,3,4,5,6];
a.concat(4,[[5,6]]) //返回 [1,2,3,4,[5,6]]

• slice(start,end)

返回指定数组的一个片段或子数组，包含起始start，不包含结束end如果为负数，则是相对最后一个元素的位置，不修改原来数组

• 补充：扁平化数组:数组扁平化是指将多维数组转为一维数组

[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

ES6新增数组方法

大多数方法第一个参数接收一个函数，并对数组每个元素调用一次该函数，并提供参数item、index表示数组元素和索引，ES6数组方法都不会修改原始数组，当然，调用函数时可以修改

forEach()

从头到尾遍历数组，为每个元素调用指定函数，可以使用item、index、arr作为函数参数，无法再遍历完成前终止，除非把forEach()方法放入try块中，抛出异常foreach.break

function foreach(a,f,t){
	try{ a.forEach(f,t) }
	catch(e){
	if(e.foreach.break) return;
	}
}
foreach.break=new Error('Stop')

map()

将数组每一个元素传入参数的函数中，返回函数结果的数组,可以对数组每一个元素进行操作，返回结果数组

a=[1,2,3];
b=a.map(function(x) {
return x*x;
}); //[1,4,9]

filter()

filter为过滤的意思，用于过滤出数组中满足条件的子数组，如果返回值为true，返回满足条件的子数组

a=[5,4,3,2,1]
a.filter(function(x){
	return x<3}
	); //[2,1]

every()和some()

every()对数组中所有元素进行判断， 所有元素都满足条件时，才返回true；some() 当数组中 存在有一个元素满足条件时，就返回true；当他们确定返回值时，就会终止遍历

reduce()

将数组元素进行组合，把多个值化简为一个值，其实就是累加器，第一个参数为化简函数，第二个参数为累加器的初始值(可选)，和之前的方法不同，该方法会把化简后的值作为下一次累加的初始值

```
var a=[1,2,3]
a.reduce(function(x,y){
return x+y},0);  //数组求和
```

indexOf()

找到数组中特定值的索引，没有找到就返回-1，不接受函数作为参数，第二个参数代表开始搜索的位置(可选)

判定数组类型

我们都知道，数组时有特殊行为的对象，给定一个未知对象，判定其是否为数组非常有用，

typeof

我们常用typeof做数据类型判定，让我们先看一下typeof的返回值有哪些:

undefined、number、boolean、object、function、string、symbol

没有array~,包含再object之内了，所以我们不能使用typeof判定数组了

instanceof

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。这个操作符只能用于简单的情形

[] instanceof Array //true
({}) instanceof Array  //false

在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。比如，表达式 [] instanceof window.frames[0].Array 会返回 false，因为 Array.prototype !== window.frames[0].Array.prototype，并且数组从前者继承

这表示instanceof操作符不能作为可靠的数组检测方法。

Array.isArray()√

使用对象的类属性进行判断最为可靠，对数组而言该属性的值总是’Array’

Array.isArray([]); //true
Array.isArray({}) //false

本文分享暂时这么多，如有不同意见的小伙伴欢迎一起交流学习，加油💪