数组操作——判断、去重、合并、展开

在前端获取到后端传来的数据，或者将前端的数据传到后端的时候，往往都少不了对数组的操作，本篇文章就总结一些对数组的常规操作。

（1）判断是否为数组

当我们拿到一个数据的时候，在还不能确定该数据到底是不是数组的时候，我们首先要做的就是对该数据进行判断，判断其是不是数组。这里提供了五种判断方法，如下所示：

    <script type="text/javascript">
			let arr = [1,2,3];
			
			/**第一种：instanceof */
			console.log(arr instanceof Array);
			
			/**第二种：constructor */
			console.log(arr.constructor === Array);
			
			/**第三种：判断对象是否有push等数组的一些方法 */
			console.log(!!arr.push && !!arr.concat);
			
			/**第四种：toString */
			console.log(Object.prototype.toString.call(arr) === '[object Array]');
			
			/**第五种：Array.isArray */
			console.log(Array.isArray(arr));
    </script>

第一种方法：instanceof 

instanceof用于判断一个变量是否是某个对象的实例。但是instanceof 会存在一个问题，它的问题是只能断定只有一个全局执行的环境。

第二种方法：constructor

通过实例的构造函数属性constructor指向构造函数。该方法会和第一种方法产生同样的弊端。

第三种方法：!!arr.push && !!arr.concat

判断对象是否含有push等数组的一些方法，该方法简单易用，但是存在兼容性问题。

第四种方法：Object.prototype.toString.call()

Object.prototype.toString().call()可以获取到对象的不同类型。它的强大不仅仅可以检验是否为数组，还能检验是否为函数，是否为数字等等。

第五种方法：Array.isArray()

Array.isArray() 用于确定传递的值是否是一个数组，返回一个布尔值。该方法简单好用，兼容性好，还是应该考虑使用该方法。

（2）数组去重

数组去重也是对数组的一个重要操作。如下所示：

<script type="text/javascript">
			//普通箱
			let arr = [1, 2, 3, 2, 33, 55, 66, 3, 55];
			/* 第一种 遍历去重 */
			let newArr = [];
			arr.forEach(item => {
				if (!newArr.includes(item)) {
					newArr.push(item)
				}
			})
			console.log("newArr: " + newArr);
			/* 第二种 巧用Set */
			let newArr2 = [...new Set(arr)]
			console.log("newArr2: " + newArr2);
            /* 结果
                 newArr:[1, 2, 3, 33, 55, 66]
                 newArr2:[1, 2, 3, 33, 55, 66]
             */

			//对象项
			let Oarr = [{
					id: 1,
					name: 'aa'
				},
				{
					id: 2,
					name: 'cc'
				},
				{
					id:3,
					name:'前端开发',
				},
				{
					id:1,
					name:'web前端'
				}
			]
			/* 方法一 */
			const mp = new Map(Oarr.map(item => [item['id'],item]))
			console.log([...mp.values()])
			
			/* 方法二 */
			const unique = (Oarr,key)=>{
				return [...new Map(Oarr.map(item=>[item[key],item])).values()]
			}
			console.log(unique(Oarr,'id'));
			/* 输出的结果，后面的覆盖掉前面的
			 0: {id: 1, name: "web前端"}
			 1: {id: 2, name: "cc"}
			 2: {id: 3, name: "前端开发"}
			 */
		</script>

这里对于普通数组和对象数组，分别提供了两种去重的方法，都是简单实用，兼容性较好的方法，给大家提供参考。

（3）数组合并

这里提供事四种常用的数组合并方式，如下所示：

<script type="text/javascript">
			let arr1 = ['a', 'b']
			let arr2 = ['c', 'd']
			let arr3 = ['e', 'f']
			
			/* 方法一 原数组不会改变*/
			let res1 = arr1.concat(arr2);
			console.log(res1);
			
			/* 方式二 原数组会改变*/
			arr3.push.apply(arr3, arr2);
			console.log(arr3);
			
			/* 方法三 */
			let res3 = [...arr1,...arr2];
			console.log(res3);
			
			/* 方法四 unshift循环*/
			for(let i = arr1.length-1;i >= 0;i--) {
			    arr2.unshift(arr1[i]);
			}
			console.log(arr2);
		</script>

在上述方法中，我们需要注意的是，该方法提供的合并是否对原数组产生了改变，要根据具体的需求选择合适的合并方法。

（4）数组展开

在我们对数组进行去重、合并的操作后，当然也少不了对数组进行展开的操作，下面提供了五种数组展开的方法，如下所示：

<script type="text/javascript">
			let arr = [1,2,[3,4],[5,6,[7,8,9]]]
			
			/* 方式一 flat */
			let res1 = arr.flat(Infinity);
			console.log(res1);
			
			/* 方式二 join+split */
			let res2 = arr.join().split(',').map(Number);
			console.log(res2)
			
			/* 方式三 toString+split */
			let res3 = arr.toString().split(',').map(Number);
			console.log(res3);
			
			/* 方式四 递归展开 */
			const flattern = arr =>{
				const res = []
				arr.forEach((item)=>{
					if(Array.isArray(item)){
						res.push(...flattern(item));
					}else{
						res.push(item)
					}
				})
				return res
			}
			console.log(flattern(arr));	
			/* 方式五 递归concat */
			function flattern2(arr){
				return [].concat(
					...arr.map(item=>Array.isArray(item)?flattern2(item):item)
				)
			}
			console.log(flattern2(arr));
		</script>

上面是一个多维套嵌数组的展开，这五种方法仅供大家参考。

上述就是本篇文章的内容了，当然对于数组的操作还有很多，比如删除、排序、截取等等，这里没有一一介绍，在后续文章中我们会再次提到，如果本文有什么错误的地方，还望大家留言斧正，谢谢~