定義陣列的方式
定義陣列的方式有多種,分別如下
let array=[] (字面量) let array=new Array() let array=new Array([length]) length表示長度 let array=new Array(arg1,arg2,arg3....)
let array=[]; // 初始化一個空陣列
let array2=new Array(); // 初始化一個空陣列
let array3=new Array(10); // 初始化一個長度為10的陣列,陣列的每一項都是empty
let array4=new Array(10,20,30,40);// 初始化一個長度為4的陣列,陣列的項分別為 10,20,30,40
其中在開發中,let arrray=[]使用的最多,也是推薦的。
陣列的增刪改查
陣列的新增
定義一個陣列之後需要向陣列中新增對應的項,這裡先介紹幾種簡單的處理方法。
array[index]=xxx array[array.length]=xxx
let array=[];
array[0]=100;
array[1]=200;
console.log(array); // 100, 200
let array2=[10,20];
array2[array.length]=30;
console.log(array2); // 10 20 30
陣列的修改
如果需要修改的項存在則執行修改操作,不存在執行新增操作
let array=[];
array[0]=100;
array[1]=200;
console.log(array); // 100, 200
array[1]=300; // 項存在,執行修改操作
console.log(array); // 100 300
陣列的刪除
arr.length=xxx xxx小於陣列的長度就可以刪除項
let array=[];
array[0]=100;
array[1]=200;
console.log(array); // 100, 200
array.length=0;
console.log(array); // []
陣列的查詢
迴圈遍歷每一項,for迴圈,forEach迴圈等等 下標(索引)獲取,array[index] 其中index表示索引
let array=[10,20,30,40,50];
console.log(array[0]); // 獲取陣列的第一項 10
for(let i=0;i<array.length;i++){
console.log(array[i]); // 遍歷陣列的每一項 10,20,30,40,50
}
檢測陣列的方法和陣列的length屬性
初始化陣列之後,陣列自帶有一個length屬性,表示陣列的長度,這裡就不再進行介紹了,檢測陣列的方法有instanceof和Array.isArray()
let array=[10,20,30,40,50];
console.log(Array.isArray(array)); // true
console.log(array instanceof Array); // true
我們知道陣列是物件,既然是物件就必然離不開屬性(length)和方法,關於屬性length,就那啥了,你們懂的,主要介紹一下陣列的方法,這裡分為ES5陣列常用的方法和ES6陣列的方法。
ES5陣列常用的方法
轉換方法
Array.toString():將陣列變成由逗號分割的字串 Array.valueOf():返回陣列本身
let array=[10,20,30,40,50];
console.log(array.toString()); // 10,20,30,40,50
console.log(array.valueOf()); // [10,20,30,40,50]
棧方法(遵循後進先出的原則)
Array.push():將一個或多個元素新增到陣列的末尾,並返回該陣列的新長度 Array.pop(): 從陣列中刪除最後一個元素,並返回該元素的值。此方法更改陣列的長度
let array=[];
array.push(10,20,30,40,50,60);
console.log(array);// 10,20,30,40,50,60
let item=array.pop();
console.log(item);// 60
console.log(array);// 10,20,30,40,50
注意:陣列的方法不支援推入整個陣列,例如arr.push([1,2,3])不會是1,2,3,[1,2,3]只會作為陣列中的一項,如果想實現,可以使用ES6的擴充套件運算子...
let array=[10,20,30,40];
let array1=[50,60,70,80];
array.push(...array1); // 使用擴充套件運算子
console.log(array);// 10,20,30,40,50,60,70,80
佇列方法(遵循先進先出的原則)
Array.shift(): 從陣列中刪除第一個元素,並返回該元素的值。此方法更改陣列的長度 Array.unshift():方法將一個或多個元素新增到陣列的開頭,並返回該陣列的新長度(該方法修改原有陣列)
let array=[10,20,30,40];
let item=array.shift();
console.log(item); // 10
console.log(array);// 20,30,40
array.unshift(100,200,300);
console.log(array);// 100,200,300,20,30,40
重排序方法
Array.reverse():將陣列中元素的位置顛倒,並返回該陣列。陣列的第一個元素會變成最後一個,陣列的最後一個元素變成第一個。該方法會改變原陣列 Array.sort():對陣列的元素進行排序,並返回陣列。預設排序順序是在將元素轉換為字串,然後比較它們的UTF-16程式碼單元值序列時構建的
let array1=[10,20,30,40,50];
array1.reverse();
console.log(array1);// 50,40,30,20,10
let array2=[10,5,20,30,40,50];
array2.sort();
console.log(array2);// 10,20,30,40,5,50
控制檯輸出可以看到,sort排序方法並沒有實現我們期望的結果 5,10,20,30,40,50,這是因為首先sort會呼叫每個陣列項的toString()轉型方法,然後比較得到的字串,如果要實現期望的結果,可以在sort中傳入一個函式實現排序。
Array.sort(function(a,b){})
a:用於比較的第一個引數
b:用於比較的第二個引數
如果第一個引數應該位於第二個引數之前則返回一個負數,如果兩個引數相等則返回0,如果第一個引數應該位於第二個引數之後則返回一個正數。
Array.sort()實現升序
let array=[10,20,40,50,30];
function compare(x,y) {
if(x<y){
return -1;
}else if(x>y){
return 1
}else {
return 0
}
}
array.sort(compare);
console.log(array); // 10,20,30,40,50
經過排序之後,得到了排序之後升序的結果,如果想要實現降序,將位置調換一下就可以了
Arra.sort()實現降序
let array=[10,20,40,50,30];
function compare(x,y) {
if(x<y){
return 1;
}else if(x>y){
return -1
}else {
return 0
}
}
array.sort(compare);
console.log(array); // 50,40,30,20,10
如果是對於數值型別或者其valueOf()方法會返回數值型別的物件型別,可以直接使用第一個引數減去第二個引數
操作方法
Array.concat():用於合併兩個或多個陣列。此方法不會更改現有陣列,而是返回一個新陣列
Array.slice([start,end]):可以接受一或兩個引數,即返回項的起始位置和結束位置,只有一個引數,返回該引數指定位置到當前陣列末尾的所有項,如果有兩個引數,該方法返回起始位置到結束位置之間的項(但不包括結束位置的項)
Array.splice():
刪除 =>可以刪除任意數量的項,只需指定兩個引數,要刪除第一項的位置和要刪除的項數 插入=>可以向指定位置插入任意數量的項,只需提供3個引數,起始位置,0,要插入的項,如果要插入多個項,可以傳入第n項,第n+1項,... 替換=>可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個引數,起始位置,要刪除的項數和要插入的的任意數量的項,插入的項數不必與刪除的項數相等
Array.join():使用不同的符號連線陣列
Array.concat()
let array=[10,20,30,40];
let array1=[50,60];
let newArray=array.concat(array1);
console.log(newArray); // 10,20,30,40,50,60
let array2=array.concat('20',[50,60],80);
console.log(array2); // 10,20,30,40,20,50,60,80
Array.slice(start,end)
start:表示起始位置的索引
end:表示結束位置的索引
let array=[10,20,30,40,50,60,70];
let array1=array.slice(1);// 沒有結束位置,表示從起始位置到陣列末尾
console.log(array1);// 20,30,40,50,60,70
let array2=array.slice(2,5); // 起始位置的索引為2,結束位置的索引為5(不包括結束位置)
console.log(array2);// 30,40,50
注意:如果slice()方法中起始位置或結束位置中有負數,則用陣列的長度加上該數來確定,舉個例子:在一個包含5項的陣列中slice(-2,-1)和slice(3,4)是一樣的,如果結束位置小於起始位置則返回空陣列。
Array.splice(index,item)實現刪除操作
let array=[10,20,30,40,50];
array.splice(2,2); // 從索引2開始刪除兩項
console.log(array); // 10,20,50
Array.splice(start,0,addItem)實現新增操作
let array=[10,20,30];
array.splice(1,0,40,50,60);// 從下標1開始刪除0項,新增40,50,60這三項
console.log(array); // 10,40,50,60,20,30
Array.splice(start,deleteItem,addItem)實現修改操作
let array=[10,20,30,40,50,60,70];
array.splice(2,2,90,100,110); // 從下標2開始刪除2項,插入90,100,110這三項
console.log(array);// 10,20,90,100,110,50,60,70
需要注意的一點是:插入項的時候是插入當前刪除項的前面
Array.join()
這個方法可以使用不同的符號連線成字串,預設不傳引數使用逗號(,)進行連線
let array=[10,20,30,40,50,60];
let array1=array.join('-');
let array2=array.join('|');
let array3=array.joing();
console.log(array1); // 10-20-30-40-50-60
console.log(array2); // 10|20|30|40|50|60
console.log(array3); // 10,20,30,40,50,60
位置方法
Array.indexOf(searchElement,fromIndex):從陣列的開頭(位置0)開始向後查詢,沒有找到返回-1 Array.lastIndexOf(searchElemengt,fromIndex):從陣列的末尾開始向前查詢,沒有找到返回-1
searchElement:需要查詢的元素
fromIndex:表示從什麼位置開始查詢
// 索引 0,1,2,3,4,5,6,7,8
let array=[1,2,3,4,5,4,3,2,1];
console.log(array.indexOf(4));// 3 查詢元素為4第一次出現的位置
console.log(array.lastIndexOf(4));// 5 查詢元素為4最後一次出現的位置
console.log(array.indexOf(4,4)); // 5 從索引4開始查詢元素為4第一次出現的位置
console.log(array.lastIndexOf(4,4))// 3 從索引4開始查詢元素為4最後一個出現的位置
迭代方法
Array.every(function(item,index,array)):對陣列中的每一項執行給定函式,如果該函式對每一項都返回true,則返回true Array.filter(function(item,index,array)):對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列 Array.some(function(item,index,array)):對陣列中的每一項執行給定函式,如果該函式對任一項返回true,則返回true Array.forEach(function(item,index,array)):對陣列中的每一項執行給定函式,這個方法沒有返回值 Array.map(function(item,index,array)):對陣列中的每一項執行給定函式,返回每次函式呼叫的結果返回的陣列
let arrays=[1,2,3,4,5,4,3,2,1];
let everyResult=arrays.every((item,index,array)=>{
return item>10;
})
console.log(everyResult); // false
let someResult=arrays.some((item,index,array)=>{
return item>10
})
console.log(someResult); // false
let filterResult=arrays.filter((item,index,array)=>{
return item>2;
})
console.log(filterResult); // 3,4,5,4,3
let mapResult=arrays.map((item,index,array)=>{
return item*2;
})
console.log(mapResult);// 2,4,6,8,10,8,6,4,2
arrays.forEach((item,index,array)=>{
console.log(item); // 1,2,3,4,5,4,3,2,1
})
注意:以上方法都不會修改陣列中包含的值
歸併方法
Array.reduce():迭代陣列的所有項,然後構建一個最終返回的值,從陣列的第一項開始,遍歷到最後 Array.reduceRight():迭代陣列的所有項,然後構建一個最終返回的值,從陣列的最後一項開始,向前遍歷到第一項
let array=[1,2,3,4,5];
let sum=array.reduce((prev,cur,index,array)=>{
return prev+cur
});
console.log(sum);
let sum2=array.reduceRight((prev,cur,index,array)=>{
return prev+cur
})
console.log(sum2);
注意:reduce實現的功能有很多,這裡只簡單的提一下
ES6陣列新增的方法
Array.from()
用於將類物件轉為真正的陣列,類似陣列的物件和可遍歷的物件,常見的類陣列有:
document.querySelectorAll('標籤')獲取的集合 函式內部屬性arguments物件
注意:只要是部署了Iterator介面的資料結構,Array.from都能將其轉為陣列,Array.from()方法還支援類似陣列的物件,任何有length屬性的物件,都可以通過Array.from方法轉為陣列
let lis=document.querySelectorAll('li');
let arrays=Array.from(lis);
arrays.push(11111);
console.log(arrays);// li,li,li,11111
function foo() {
var args=Array.from(arguments);
args.push(10,20);
console.log(args); // 10,20
}
foo();
Array.of()
用於將一組值,轉換為陣列
注意:Array.of()總是返回引數值組成的陣列,如果沒有引數,就返回一個空陣列
console.log(Array.of(3,11,8)); // 3,11,8
console.log(Array.of(3)); // 3
console.log(new Array(1,2)); // 1,2
console.log(Array.of()); // []
console.log(Array.of(undefined)); // undefined
console.log(Array.of(1)); // 1
console.log(Array.of(1,2)); // 1,2
Array.copyWithin(target,start=0,end=this.length)
在當前陣列內部,將指定位置的成員複製到其它位置(會覆蓋原有成員),然後返回當前陣列
引數:
target(必須):從該位置開始替換資料,如果為負值,表示倒數
start(可選):從該位置讀取資料,預設為0,如果為負值,表示從末尾開始計算
end(可選): 到該位置前停止讀取資料,預設等於陣列長度,如果為負值,表示從末尾開始計算
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]
Array.fill()
使用給定值,填充一個陣列
console.log(['a','b','c'].fill(7)); // 7,7,7
console.log(new Array(3).fill(10)); // 10,10,10
console.log(['a','b','c'].fill(7,1,2));// 'a',7,'c'
Array.find()和Array.findIndex()
Array.find():用於找出第一個符合條件的陣列成員,它的引數是一個回撥函式,所有陣列成員依次執行該回撥方法,直到找出第一個返回值為true的成員,然後返回該成員,如果沒有符合條件的成員,則返回undefined。 Array.findIndex():返回第一個符合條件的陣列成員位置,如果所有成員都不符合條件,則返回-1
let item1=[1,4,-5,10,-6].find((n)=>n<=-5);
console.log(item1); // -5
let item2=[1,4,-5,10].find((item,index,arr)=>{
return item<-5
})
console.log(item2); // undefined
let item3=[1,5,10,15].findIndex((item,index,arr)=>{
return item>9
});
console.log(item3); // 下標為2
Array.includes()
返回一個布林值,表示某個陣列是否包含給定的值
[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
Array.flat()和Array.flatMap()
Array.flat([depth]):用於將巢狀的陣列拉平,變成一維陣列,該方法返回一個新陣列,對原始資料沒有影響 Array.flatMap():對原陣列的每一個成員執行一個函式(相當於執行Array.map()方法),然後對返回值組成的陣列執行flat方法,該方法返回一個新陣列,不改變原陣列
depth:指定要提取巢狀陣列的結構深度,預設值為 1
let array1=[1,2,[3,4]].flat();
console.log(array1); // 1,2,3,4
let array2=[1,2,[3,[4,5]]].flat();
console.log(array2) // 1,2,3[,4,5]
let array3=[1,2,[3,[4,5]]].flat(2);
console.log(array3);// 1,2,3,4,5
陣列例項的entries()、keys()、values()
keys():對陣列鍵名的遍歷
values():對陣列鍵值的遍歷
entries():對陣列鍵值對的遍歷
陣列其實也是有鍵的,一般我們用console.log()方法輸出的時候都是它的值,鍵表示索引,可以使用console.info()方法輸出詳細資訊
let array=[1,2,3,4,5];
for(let item of array.keys()){
console.log('鍵是:'+item); // 0,1,2,3,4
}
for(let item of array.values()){
console.log('值是:'+item); // 1,2,3,4,5
}
for(let [index,value] of array.entries()){
console.log(`鍵:${index},值:${value}`);
}
陣列排序的方法
陣列的簡單排序
上文說了一下陣列自帶的排序方法sort,會將陣列的每一項都呼叫toString()方法再進行比較,我們先來看下一個簡單的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單排序</title>
</head>
<body>
<script type="text/javascript">
var numbers=[4,6,8,0,1,2,3,7,9];
numbers.sort();//呼叫陣列內建排序方法
console.log(numbers);//0,1,2,3,4,6,7,8,9
numbers.reverse();//將陣列進行反轉
console.log(numbers);//9,8,7,6,4,3,2,1,0
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單陣列自定義排序</title>
</head>
<body>
<script type="text/javascript">
var number=[0,1,10,15,5];
function arrAsc(a,b){ //實現陣列升序的方法
if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
}
}
number.sort(arrAsc);//呼叫陣列升序的方法
console.log(number);//0.1,5,10,15
function arrDesc(a,b){ //實現陣列降序的方法
if(a>b){
return -1;
}else if(a<b){
return 1;
}else{
return 0;
}
}
number.sort(arrDesc);//呼叫陣列降序的方法
console.log(number);//15,10,5,1,0
</script>
</body>
</html>
物件陣列排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單物件自定義屬性排序</title>
</head>
<body>
<script type="text/javascript">
var friuts=[
{
name:'apple',
price:18.5,
count:10
},
{
name:'pear',
price:1.5,
count:5,
},
{
name:'banana',
price:20.5,
count:20
},
]
console.log(JSON.stringify(friuts));//未排序前
//按價格升序排序
friuts.sort(function(x,y){
return x.price-y.price;
});
console.log(JSON.stringify(friuts));
//按名稱排序
friuts.sort(function(x,y){
if(x.name>y.name){
return 1;
}else if(x.name<y.name){
return -1;
}else{
return 0;
}
});
console.log(JSON.stringify(friuts));
</script>
</body>
</html>
自定義排序方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用的排序方法</title>
</head>
<body>
<script type="text/javascript">
var friuts=[
{
name:'apple',
price:18.5,
count:10
},
{
name:'pear',
price:1.5,
count:5,
},
{
name:'banana',
price:20.5,
count:20
},
]
var sortExp=function(key,isAsc){
return function(x,y){
if(isNaN(key)){
if(x[key]>y[key]){
return 1*(isAsc?1:-1);
}else if(x[key]<y[key]){
return -1*(isAsc?1:-1);
}else{
return 0;
}
}else{
return (x[key]-y[key])*(isAsc?1:-1)
}
}
}
//價格升序
friuts.sort(sortExp('price',true));
console.log(JSON.stringify(friuts));
//價格降序
friuts.sort(sortExp('price',false));
console.log(JSON.stringify(friuts));
//名稱升序
friuts.sort(sortExp('name',true));
console.log(JSON.stringify(friuts));
//名稱降序
friuts.sort(sortExp('name',false));
console.log(JSON.stringify(friuts));
//數量升序
friuts.sort(sortExp('count',true));
console.log(JSON.stringify(friuts));
//數量降序
friuts.sort(sortExp('count',false));
console.log(JSON.stringify(friuts));
</script>
</body>
</html>
手寫陣列去重的12種方法
1、使用ES6 中的Set實現去重(ES6中最常用)
function unique (arr) {
return Array.from(new Set(arr))
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}]
console.log(unique(array));// 1,2,3,'true',false,undefined,null,NaN,{},{}
缺點:可以看到{}無法實現去重
2、使用雙重for迴圈和splice實現去重(ES5)
function unique(array){
for(let i=0;i<array.length;i++){ // 外層迴圈元素
for(let j=i+1;j<array.length;j++){ // 內層進行值比較
if(array[i]==array[j]){
array.splice(j,1);
j--;
}
}
}
return array;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array)); // 1,2,3,'true',false,undefined,NaN,NaN,{},{}
雙層迴圈,外層迴圈元素,內層迴圈時比較值。值相同時,則刪去這個值
缺點:null直接消失,NaN和{}無法實現去重
3、使用indexOf實現去重
function unique(arr) {
let array = [];
for (let i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i])
}
}
return array;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1,2,3,'true',false,undefined,null,NaN,NaN{},{}
缺點:NaN和{}無法實現去重
4、使用sort()實現去重
function unique(arr) {
arr = arr.sort()
let array= [arr[0]];
for (let i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
array.push(arr[i]);
}
}
return array;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1, 2, 3, NaN, NaN, {}, {}, false, null, "true", undefined
利用sort()排序方法,然後根據排序後的結果進行遍歷及相鄰元素比對。
缺點:NaN和{}無法實現去重
5、使用物件的屬性不能相同的特點實現去重
function unique(arr) {
let array= [];
let obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
array.push(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]]++
}
}
return array;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1, 2, 3, "true", false, undefined, null, NaN, {}
6、使用 includes實現去重
function unique(arr) {
let array =[];
for(let i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {
array.push(arr[i]);
}
}
return array
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1, 2, 3, "true", false, undefined, null, NaN, {}, {}
缺點:{}無法實現去重
7、使用hasOwnProperty實現去重
function unique(arr) {
let obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1, 2, 3, "true", false, undefined, null, NaN, {}
利用hasOwnProperty 判斷是否存在物件屬性
8、使用filter實現去重
function unique(arr) {
return arr.filter(function(item, index, arr) {
return arr.indexOf(item, 0) === index; // NaN無法實現查詢
});
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1,2,3,'true',false,undefined,null,{},{}
缺點:NaN不見了,{}也無法實現去重
9、使用遞迴實現去重
function unique(arr) {
var array= arr;
var len = array.length;
array.sort(function(a,b){ //排序後更加方便去重
return a - b;
})
function loop(index){
if(index >= 1){
if(array[index] === array[index-1]){
array.splice(index,1);
}
loop(index - 1); //遞迴loop,然後陣列去重
}
}
loop(len-1);
return array;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// false,null,1,2,3,'true',NaN,NaN,{},{},undefined
缺點:{},NaN沒有實現去重
10、使用Map資料結構實現去重
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // 陣列用於返回結果
for (let i = 0; i < arr.length; i++) {
if(map .has(arr[i])) { // 如果有該key值
map .set(arr[i], true);
} else {
map .set(arr[i], false); // 如果沒有該key值
array .push(arr[i]);
}
}
return array ;
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(arrayNonRepeatfy(array));// 1,2,3,'true',false,undefined,null,NaN,{},{}
建立一個空Map資料結構,遍歷需要去重的陣列,把陣列的每一個元素作為key存到Map中。由於Map中不會出現相同的key值,所以最終得到的就是去重後的結果。
缺點:{}沒有實現去重
11、使用reduce+includes實現去重
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
let array=[1,2,3,1,2,'true','true',false,false,undefined,undefined,null,null,NaN,NaN,{},{}];
console.log(unique(array));// 1,2,3,'true',false,undefined,null,NaN,{},{}
缺點:{}沒有實現去重
12、使用[...new Set(arr)]實現去重
let array=[1,2,3,4,5,1,2,3,4];
let newArray=[...new Set(array)];
console.log(newArray); // 1,2,3,4,5
結尾
通過對本篇部落格學習,相信大家對陣列有更近一步的認識,如果覺得本篇部落格對您有幫助的話,記得給作者三連,點贊???,關注,收藏,您的支援就是我寫作路上最大的動力,我們下篇文章見。
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
https://segmentfault.com/a/1190000016418021
https://es6.ruanyifeng.com/#docs/array
JavaScript高階程式設計(第3版)