JS面试手写

一、数组扁平化
示例

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]

方法一：使用flat

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]
const res1=arr.flat(Infinity);

方法二：使用正则

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]
const res2=JSON.stringify(arr).replace(/\[|\]/g,'').split(',');

方法三：正则改良版本

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]
const res3=JSON.parse('[' +JSON.stringify(arr).replace(/\[|\]/g,'')+']');

方法四：使用reduce

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]
const flatten=arr=>{
	return arr.reduce((pre,cur)=>{
		return pre.concat(Array.isArray(cur)?flatten(cur):cur);
	},[])
}
const res4=flatten(arr);

方法五：函数递归

const arr=[1,[2,[3,[4,5]]],6];
//=>[1,2,3,4,5,6]
const res5=[];
const fn = arr=>{
	for(let i=0;i<arr.length;i++){
		if(Array.isArray(arr[i])){
			fn(arr[i]);
		}else{
			res5.push(arr[i]);
		}
	}
}
fn(arr);

二、数组去重

示例

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]

方法一：使用Set

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique1=Array.from(new Set(arr));

方法二：两层for循环+splice

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique2=arr=>{
	let len=arr.length;
	for(let i=0;i<len;i++){
		for(let j=i+1;j<len;j++){
			if(arr[i]==arr[j]){
				arr.splice(j,1);
				//每删除一个数，j--保证上次位置不变，len--减少循环次数
				len--;
				j--;
			}
		}
	}
	return arr;
}

方法三：使用indexOf

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique3=arr=>{
	const res=[];
	for(let i=1;i<arr.length;i++){
		if(res.indexOf(arr[i])===-1) res.push(arr[i]);
	}
	return res;
}

方法四：使用include

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique4=arr=>{
	const res=[];
	for(let i=0;i<arr.length;i++){
		if(!res.includes(arr[i])) res.push(arr[i]);
	}
	return res;
}

方法五：使用filter

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique5=arr=>{
	return arr.filter((item,index)=>{
		return arr.indexOf(item)===index;
	});
}

方法六：使用Map

const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//=>[1,'1',17,true,false,'true','a',{}]
const unique6=arr=>{
	const map=new Map();
	const res=[];
	for(let i=0;i<arr.length;i++){
		if(!map.has(arr[i])){
			map.set(arr[i],true);
			res.push(arr[i]);
		}
	}
	return res;
}

三、类数组转化为数组
类数组是具有length属性，但不具有数组原型上的方法。
常见的类数组有arguments、DOM操作方法返回的结果。
方法一：Array.from

Array.from(document.querySelectorAll('div'));

方法二：Array.prototype.slice.call()

Array.prototype.slice.call(document.querySelectorAll('div'));

方法三：扩展运算符

[...document.querySelectorAll('div')];

方法四：使用Array.prototype.concat.apply

Array.prototype.concat.apply([],document.querySelectorAll('div'));