JavaScript數組詳解-全網最全

定義數組的方式

定義數組的方式有多種，分別如下

• 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版）