JavaScript面试技巧之数组的一些不low操作
前言
本文主要从应用来讲数组api的一些骚操作;
如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等；
上面这些应用场景你可以用一行代码实现？
1.扁平化n维数组
1.终极篇
[1,[2,3]].flat(2)//[1,2,3] [1,[2,3,[4,5]].flat(3)//[1,2,3,4,5] [1,[2,3,[4,5]]].toString()//'1,2,3,4,5' [1[2,3,[4,5[...]].flat(Infinity)//[1,2,3,4...n]
Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大
2.开始篇
functionflatten(arr){
while(arr.some(item=>Array.isArray(item))){
arr=[].concat(...arr);
}
returnarr;
}
flatten([1,[2,3]])//[1,2,3]
flatten([1,[2,3,[4,5]])//[1,2,3,4,5]
实质是利用递归和数组合并方法concat实现扁平
2.去重
1.终极篇
Array.from(newSet([1,2,3,3,4,4]))//[1,2,3,4] [...newSet([1,2,3,3,4,4])]//[1,2,3,4]
set是ES6新出来的一种一种定义不重复数组的数据类型
Array.from是将类数组转化为数组
...是扩展运算符,将set里面的值转化为字符串
2.开始篇
Array.prototype.distinct=function(){
vararr=this,
result=[],
i,
j,
len=arr.length;
for(i=0;i
取新数组存值,循环两个数组值相比较
3.排序
1.终极篇
[1,2,3,4].sort((a,b)=>a-b);//[1,2,3,4],默认是升序
[1,2,3,4].sort((a,b)=>b-a);//[4,3,2,1]降序
sort是js内置的排序方法,参数为一个函数
2.开始篇
冒泡排序:
Array.prototype.bubleSort=function(){
letarr=this,
len=arr.length;
for(letouter=len;outer>=2;outer--){
for(letinner=0;inner<=outer-1;inner++){
if(arr[inner]>arr[inner+1]){
//升序
[arr[inner],arr[inner+1]]=[arr[inner+1],arr[inner]];
console.log([arr[inner],arr[inner+1]]);
}
}
}
returnarr;
}
[1,2,3,4].bubleSort()//[1,2,3,4]
选择排序
Array.prototype.selectSort=function(){
letarr=this,
len=arr.length;
for(leti=0,len=arr.length;iarr[j]){
[arr[i],arr[j]]=[arr[j],arr[i]];
}
}
}
returnarr;
}
[1,2,3,4].selectSort()//[1,2,3,4]
4.最大值
1.终极篇
Math.max(...[1,2,3,4])//4
Math.max.apply(this,[1,2,3,4])//4
[1,2,3,4].reduce((prev,cur,curIndex,arr)=>{
returnMath.max(prev,cur);
},0)//4
Math.max()是Math对象内置的方法,参数是字符串;
reduce是ES5的数组api,参数有函数和默认初始值;
函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)
2.开始篇
先排序再取值
5.求和
1.终极篇
[1,2,3,4].arr.reduce(function(prev,cur){
returnprev+cur;
},0)//10
2.开始篇
functionsum(arr){
varlen=arr.length;
if(len==0){
return0;
}elseif(len==1){
returnarr[0];
}else{
returnarr[0]+sum(arr.slice(1));
}
}
sum([1,2,3,4])//10
利用slice截取改变数组,再利用递归求和
6.合并
1.终极篇
[1,2,3,4].concat([5,6])//[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]]//[1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6])//[1,2,3,4,5,6]
2.开始篇
letarr=[1,2,3,4];
[5,6].map(item=>{
arr.push(item)
})//arr值为[1,2,3,4,5,6],注意不能直接return出来,return后只会返回[5,6]
7.判断是否包含值
1.终极篇
[1,2,3].includes(4)//false
[1,2,3].indexOf(4)//-1如果存在换回索引
[1,2,3].find((item)=>item===3))//3如果数组中无值返回undefined
[1,2,3].findIndex((item)=>item===3))//2如果数组中无值返回-1
includes(),find(),findIndex()是ES6的api
2.开始篇
[1,2,3].some(item=>{
returnitem===3
})//true如果不包含返回false
8.类数组转化
1.终极篇
Array.prototype.slice.call(arguments)//arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]
类数组:表示有length属性,但是不具备数组的方法
call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
Array.from是将类似数组或可迭代对象创建为数组
...是将类数组扩展为字符串,再定义为数组
2.开始篇
Array.prototype.slice=function(start,end){
varresult=newArray();
start=start||0;
end=end||this.length;//this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
for(vari=start;i
9.每一项设置值
1.终极篇
[1,2,3].fill(false)//[false,false,false]
fill是ES6的方法
2.开始篇
[1,2,3].map(()=>0)
10.每一项是否满足
[1,2,3].every(item=>{returnitem>2})//false
every是ES5的api,每一项满足返回true
11.有一项满足
[1,2,3].some(item=>{returnitem>2})//true
some是ES5的api,有一项满足返回true
12.过滤数组
[1,2,3].filter(item=>{returnitem>2})//[3]
filter是ES5的api,返回满足添加的项的数组
13.对象和数组转化
Object.keys({name:'张三',age:14})//['name','age']
Object.values({name:'张三',age:14})//['张三',14]
Object.entries({name:'张三',age:14})//[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14])//ES10的api,Chrome不支持,firebox输出{name:'张三',age:14}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。