前言
本文主要从应用来讲数组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 [...]]. flat ( Infinity ) //[1,2,3,4...n]
Array.flat(n)是ES10扁平数组的api， n表示维度， n值为 Infinity时维度为无限大。
2.开始篇
function
flatten
(
arr
)
{
while
(
arr
.
some
(
item
=>
Array
.
isArray
(
item
)))
{
arr
=
[].
concat
(...
arr
);
}
return
arr
;
}
flatten
([
1
,[
2
,
3
]])
//[1,2,3]
flatten
([
1
,[
2
,
3
,[
4
,
5
]])
//[1,2,3,4,5]
实质是利用递归和数组合并方法 concat实现扁平。
2.去重
1.终极篇
Array . from ( new Set ([ 1 , 2 , 3 , 3 , 4 , 4 ])) //[1,2,3,4] [... new Set ([ 1 , 2 , 3 , 3 , 4 , 4 ])] //[1,2,3,4]
set是ES6新出来的一种一种定义不重复数组的数据类型。
Array.from是将类数组转化为数组。
...是扩展运算符，将set里面的值转化为字符串。
2.开始篇
Array
.
prototype
.
distinct
=
function
(){
var
arr
=
this
,
result
=
[],
i
,
j
,
len
=
arr
.
length
;
for
(
i
=
0
;
i
<
len
;
i
++){
for
(
j
=
i
+
1
;
j
<
len
;
j
++){
if
(
arr
[
i
]
===
arr
[
j
]){
j
=
++
i
;
}
}
result
.
push
(
arr
[
i
]);
}
return
result
;
}
[
1
,
2
,
3
,
3
,
4
,
4
].
distinct
();
//[1,2,3,4]
取新数组存值，循环两个数组值相比较。
3.排序
1.终极篇
[ 1 , 2 , 3 , 4 ]. sort (); // [1, 2,3,4],默认是升序 [ 1 , 2 , 3 , 4 ]. sort (( a , b ) => b - a ); // [4,3,2,1] 降序
sort是js内置的排序方法,参数为一个函数
2.开始篇
冒泡排序：
Array
.
prototype
.
bubleSort
=
function
()
{
let
arr
=
this
,
len
=
arr
.
length
;
for
(
let
outer
=
len
;
outer
>=
2
;
outer
--)
{
for
(
let
inner
=
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
]]);
}
}
}
return
arr
;
}
[
1
,
2
,
3
,
4
].
bubleSort
()
//[1,2,3,4]
选择排序：
Array
.
prototype
.
selectSort
=
function
()
{
let
arr
=
this
,
len
=
arr
.
length
;
for
(
let
i
=
0
,
len
=
this
.
arr
.
length
;
i
<
len
;
i
++)
{
for
(
let
j
=
i
,
len
=
this
.
arr
.
length
;
j
<
len
;
j
++)
{
if
(
this
.
arr
[
i
]
>
this
.
arr
[
j
])
{
[
this
.
arr
[
i
],
this
.
arr
[
j
]]
=
[
this
.
arr
[
j
],
this
.
arr
[
i
]];
}
}
}
return
arr
;
}
[
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
)=>
{
return
Math
.
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
)
{
return
prev
+
cur
;
},
0
)
//10
2.开始篇
function
sum
(
arr
)
{
var
len
=
arr
.
length
;
if
(
len
==
0
){
return
0
;
}
else
if
(
len
==
1
){
return
arr
[
0
];
}
else
{
return
arr
[
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.开始篇
[
5
,
6
].
map
(
item
=>{
[
1
,
2
,
3
,
4
].
push
(
item
)
})
//[1,2,3,4,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
=>{
return
item
===
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
){
var
result
=
new
Array
();
start
=
start
||
0
;
end
=
end
||
this
.
length
;
//this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
for
(
var
i
=
start
;
i
<
end
;
i
++){
result
.
push
(
this
[
i
]);
}
return
result
;
}
9.每一项设置值
1.终极篇
[ 1 , 2 , 3 ]. fill ( false ) //[false,false,false]
fill是ES6的方法。2.开始篇
[ 1 , 2 , 3 ]. map (() => 0 )
10.每一项是否满足
[
1
,
2
,
3
].
every
(
item
=>{
return
item
>
2
})
//false
every是ES5的api,，每一项满足返回 true。
11.有一项满足
[
1
,
2
,
3
].
some
(
item
=>{
return
item
>
2
})
//true
some是ES5的api，有一项满足返回 true。
12.过滤数组
[
1
,
2
,
3
].
filter
(
item
=>{
return
item
>
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:’
最后，我自己是一名从事了多年开发的Java老程序员，辞职目前在做自己的Java私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的Java学习干货，可以送给每一位喜欢Java的小伙伴，想要获取的可以关注我的头条号并在后台私信我：01，即可免费获取。