JS数组数据的重组，过滤，筛选，拼接方法

喜欢ヅ旅行 2022-10-02 09:53 274阅读 0赞

**filter()** 数组重组方法 [https://www.runoob.com/cssref/css3-pr-filter.html][https_www.runoob.com_cssref_css3-pr-filter.html]  
**indexOf()** 筛选数组方法 [http://www.w3school.com.cn/jsref/jsref\_indexOf.asp][http_www.w3school.com.cn_jsref_jsref_indexOf.asp]  
**concat()** 数组拼接方法 [http://www.w3school.com.cn/jsref/jsref\_concat\_array.asp][http_www.w3school.com.cn_jsref_jsref_concat_array.asp]  
**includes()** 包含 [https://www.runoob.com/jsref/jsref-includes.html][https_www.runoob.com_jsref_jsref-includes.html]  
filter，indexOf两个函数方法，在项目中我们经常用来过滤数据，或者重组数据，其他的也可以用for循环，forEach，$.each来循环过滤

## ES6写法 ##

**filter()** 重组数组的数据很好用

test(){
    			let m=this;
    			let arr1=[1,2,3];
    			let arr2=arr1.filter((v,i)=>{
    				return v!='2'
    			})			
    			console.log(arr2)//数据返回[1,3]			
    },

**indexOf()** 筛选数组方法

test(){
    			let arr1=[
    				[1,2,3],
    				[2,2,3],
    				[1,4,3],
    				[1,2,6]
    			];
    			let arr3=[]
    			arr1.forEach((v,i)=>{
    				if(v.indexOf(4)!=-1){
    					arr3.push(v)
    				}
    			})
    			console.log(arr3)//数据返回有4的数组[1,4,3]
    },

**concat()** 把多个数组连接在一起

test(){
    	let arr1=[1,2,3]
    	let arr2=[4,5,6]
    	let arr3=[7,8,9]
    	let arr4=[1,2,12]
    	let test=[]
    	test=test.concat(arr1).concat(arr2).concat(arr3).concat(arr4)
    	console.log(test)//数据返回[1,2,3,4,5,6,7,8,9,1,2,12]
    }

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

[1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    [1, 2, NaN].includes(NaN); // true

## 结合运用 ##

**取两个数组的并集**

let test1 = [1, 2, 3]
    	let test2 = [2, 4, 5]
    	let arr= test1.concat(test2.filter(v => !test1.includes(v)))
    	console.log(arr)// 数据返回 [1,2,3,4,5]

**取两个数组的交集**

let test1 = [1, 2, 3]
    	let test2 = [2, 4, 5]
    	let arr=test1.filter(v => test2.includes(v))
    	console.log(arr)// 数据返回 [2]

**取两个数组的差集**

let test1 = [1, 2, 3]
    	let test2 = [2, 4, 5]
    	let arr=test1.concat(test2).filter(v => test1.includes(v) && !test2.includes(v))
    	console.log(arr)// 数据返回 [1,3]

[https_www.runoob.com_cssref_css3-pr-filter.html]: https://www.runoob.com/cssref/css3-pr-filter.html
[http_www.w3school.com.cn_jsref_jsref_indexOf.asp]: http://www.w3school.com.cn/jsref/jsref_indexOf.asp
[http_www.w3school.com.cn_jsref_jsref_concat_array.asp]: http://www.w3school.com.cn/jsref/jsref_concat_array.asp
[https_www.runoob.com_jsref_jsref-includes.html]: https://www.runoob.com/jsref/jsref-includes.html