1. 程式人生 > 實用技巧 >JS 陣列方法

JS 陣列方法

1.定義:內建物件 主要提供運算元組的基礎方法

2.陣列物件的建立

(1)Var arr = [1,2,3,4,5];

(2)Var arr = Array(1,2,3,4,5)

(3)Var arr = new Array(1,2,3,4,5)

3.陣列方法

(1)新增和刪除方法

①在陣列末尾新增和刪除

1)新增:push

  1. 用法:陣列.push(要新增的陣列項1,要新增的陣列項2,...)
  2. 作用:將要新增的陣列項 新增到陣列的末尾
  3. 這個方法函式的返回值 追加之後的 陣列長度

2)刪除:pop

  1. 用法:陣列.pop()
  2. 作用:將陣列的最後一項刪除
  3. 返回值:就是被刪除的陣列項

②在陣列開頭新增和刪除

1)新增:unshift

  1. 用法:陣列.unshift(陣列項1,陣列項2....);
  2. 作用:將要新增的陣列項新增到 陣列的開頭
  3. 返回值:追加之後的 陣列長度

2)刪除:shift

  1. 用法:陣列.shift();
  2. 作用:刪除陣列的第0
  3. 返回值:被刪除的陣列項

(2)Splice

①刪除陣列項:

1)用法:陣列.splice(刪除的起始位置索引,要刪除的位數)

2)作用:刪除指定位置的陣列項

3)返回值:將被刪除的陣列項 組成一個 新陣列 返回出來

②替換陣列項

1)用法:陣列.splice(刪除的起始位置索引,要刪除的位數,用來替換的陣列項1,陣列項2,......)

2)作用:從指定的起始位置開始

刪除指定位數的陣列項 之後使用替換的陣列項進行替換

3)注意:刪除的位數 插入的陣列項個數不必相同

4)返回值:被刪除的陣列項組成的一個數組

③新增陣列項

1)用法:陣列.splice(刪除的起始位置,0,要新增的陣列項1,陣列項2,....)

2)作用:在起始位置的前面新增陣列項

3)返回值:[]

(3)陣列去重

(4)陣列排序

①選擇排序

1)思路:從第一項起,每一項和後面所有項依次比較,如果被比較項比當前項小,則兩項交換位置

2)程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var arr = [1,3,6,2,5,7,9,0,3,1]; //將陣列按照 從小到下的順序 排列 //選擇排序法 迴圈每一個數組項 將當前陣列項 和後續陣列項 進行較 遇到比自己小的 就交換位置 for(var i=0; i<arr.length; i++){ //和後續陣列項進行比較 for(var j=i+1; j<arr.length; j++){ if(arr[i]>arr[j]){ //交換 二者的 位置 var temp = null; temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } console.log(arr); </script> </body> </html>

②氣泡排序

1)思路:從第一項起,比較相鄰的兩個元素,如果前一個比後一個大,則交換位置。第一輪的時候最後一個元素應該是最大的一個。每一輪最後一個元素已經是最大的了,所以最後一個元素下一輪不用比較。

2)規律:最多交換length-1輪,每一輪最多交換length-1次。

3)程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [4,3,2,1,5,7,6,9,0,3,1];
        //從小到大
        //相鄰兩個陣列項 兩兩比較 如果後一項 比 前一項 小 就交換位置 否則不換
        //最多交換arr.length-1輪  每一輪最多交換length-1-輪索引

        //雙重for迴圈  
        for(var i=0; i<arr.length-1; i++){//外層迴圈 控制輪數
            for(var j=0; j<arr.length-1-i; j++){//內層迴圈 控制每一輪的次數
                //前一項和後一項進行比較 如果後一項小於前一項 就交換位置
                if(arr[j]>arr[j+1]){
                    var temp = null;
                    temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
    </script>
</body>
</html>

快速(二叉)排序

1)遞迴函式:在函式體內部 呼叫自身 就是遞迴函式 遞迴函式實際上就是使用函式進行迴圈,遞迴函式 必須設定結束條件

2)思路:找到陣列的中間下標的項,把這項用splice刪除,然後迴圈陣列,如果比這項小的,放在一個left陣列中,如果比這一項大的,放在有一個right的陣列中,然後遞迴呼叫上面的方法。

3)程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr1 = [3,1,2,9,0];
        //封裝函式
        function quickSort(arr){//陣列不確定 提成引數
            //4.設定排序的結束條件
            if(arr.length<=1){
                return arr;
            }
            //1.寫入主要程式碼
            //1.取出中間項  獲取中間項索引 進一步 擷取中間項
            var centerIdx = parseInt(arr.length/2);
            var center = arr.splice(centerIdx,1);//中間項
            // console.log(center);//[2]
            //2.迴圈 每一個數組項  和 中間項 比大小
            var min = []//存放小陣列項的
            var max = []//存放大陣列項的
            for(var i=0; i<arr.length; i++){
                if(arr[i]>=center[0]){
                    max.push(arr[i]);
                }else{
                    min.push(arr[i]);
                }
            }
            //3.拼接 min + 中間項 + max
            return quickSort(min).concat(center,quickSort(max));
        }
        console.log(quickSort(arr1));
    </script>
</body>
</html>

4)講解圖片:

(5)陣列的排序方法

①Sort

1)用法1:陣列.sort()

  1. 作用:把陣列進行排序 按照unicode編碼進行排序(預設的)

2)用法2:陣列.sort(function(a,b){ return a-b/b-a })

  1. 返回a-b 從小到大排序
  2. 返回b-a 從大到小排序

3)用法2:陣列.sort(function(){ return 數字 })

  1. 返回的數字>0
  2. 返回b-a 從大到小排序
  3. 形參b表示後一個數組項 形參a表示前一個數組項
  4. 返回值 b-a/a-b ab都必須是數字

②中文排序

①localeCompare

1)用法:字串1.localeCompare(字串2,”zh”);

2)如果按照中文排序需要傳入第二個引數“zh”

(6)陣列的其他方法

①Join:將陣列中的陣列項 使用指定的拼接標識 拼接為字串

1)Join和字串的split方法是逆運算

2)用法:陣列.join(); 使用預設拼接標識(逗號) 進行拼接

3)用法:陣列.join(拼接標識) 使用指定的拼接標識 進行拼接

②Concat:拼接陣列

1)用法:陣列1.concat(陣列2,陣列3....)

2)注意:我們可以向concat中傳入陣列,也可以傳入其他型別資料 如果傳入其他型別資料 就會作為陣列項拼接進陣列中

3)注意:concat是將所有陣列 拼成一個新陣列 返回出來 不會改變 任意一個原陣列

③Reverse:陣列翻轉

1)用法:陣列.reverse()

④indexOf

1)用法1:陣列.indexOf陣列或陣列片段)

  1. 作用:在陣列中 查詢指定的陣列或陣列片段 如果找到 就返回指定的陣列或陣列片段 第一次出現的索引 如果找不到 返回-1

2)用法2:字串.indexOf(陣列或陣列片段,起始索引)

  1. 作用:如果傳入起始索引 則從起始索引處開始查詢,如果不傳就從陣列開頭

⑤Slice:擷取陣列的方法

1)用法:陣列.slice(起始索引,結束索引) 能取到開頭 取不到結尾

2)作用:擷取起始索引和結束索引之前的陣列項 並存入一個新陣列中 返回出來

3)當傳入負數引數的時候會先加上陣列長度 如果結果>=0 就按照結果進行操作,如果結果<0就直接設定為0