JS中陣列操作

Ben_Hao發表於2017-12-04
原文網址 : http://www.admin10000.com/document/17682.html
JS陣列

什麼是API

  • API: Application Programming Interface,應用程式程式設計介面;
  • js中物件提供的方法就叫做API；

instanceof

檢測一個物件是否是陣列;(用來對付複雜資料型別;)
// 簡單資料型別 typeof ;
A instanceof B  // A是不是B造出來的;
例：
    var arr = [1,2,3];
    console.log(arr instanceof Array); //arr屬不屬於Array型別;

Array.isArray( )

Array.isArray(引數); // 判斷引數是不是陣列,返回布林值;
例：
    var arr = [1,2,3];
    var num = 123;
    console.log(Array.isArray(arr)); //true
    console.log(Array.isArray(num)); //false

toString( )

陣列.toString(); // 把陣列變成字串,去除了[],內容用逗號連結;
例：
    var arr = ["aaa","bbb","ccc"];
    console.log(arr.toString());      //返回 aaa,bbb,ccc

valueOf( )

陣列.valueOf();  //返回陣列本身;   
例：
    var arr = ["aaa","bbb","ccc"];
    console.log(arr.valueOf());      //返回陣列本身  ["aaa","bbb","ccc"]

陣列.join(引數)

陣列.join(引數);  // 陣列中的元素可以按照引數進行連結變成一個字串;
console.log(arr.join());    //和toString()一樣用逗號連結
console.log(arr.join("|")); //用引數連結
console.log(arr.join("&")); //用引數連結
console.log(arr.join(" ")); //如果是空格，真的用空格連結
console.log(arr.join(""));  //空字元是無縫連線

陣列元素的新增和刪除

push( )和pop( )

1. 陣列.push() //在陣列的最末尾新增元素;
2. 陣列.pop()  //不需要引數;在陣列的最末尾刪除一項;
例：
    var arr = [1,2,3];
    var aaa = arr.push("abc");//在陣列的最末尾新增一個元素;
    console.log(arr);//元素被修改了
    console.log(aaa);//返回值是陣列的長度;

    aaa = arr.pop();//不需要引數;在陣列的最末尾刪除一項;
    console.log(arr);//元素被修改了
    console.log(aaa);//被刪除的那一項

unshift( )和shift( )

1. 陣列.unshift() //在陣列的最前面新增一個元素;
2. 陣列.shift()  //不需要引數;在陣列的最前面刪除一項;
例：
    var arr = [1,2,3];
    aaa = arr.unshift("abc");//在陣列的最前面新增一個元素;
    console.log(arr);//元素被修改了
    console.log(aaa);//返回值是陣列的長度;

    aaa = arr.shift();//不需要引數;在陣列的最前面刪除一項;
    console.log(arr);//元素被修改了
    console.log(aaa);//被刪除的那一項

陣列元素排序

reverse( )

reverse()   //翻轉陣列
例:
    var arr1 = [1,2,3,4,5];
    var aaa = arr1.reverse(); // [5,4,3,2,1]

sort( )

sort() // 陣列中元素排序;(預設：從小到大)
      //  預設：按照首個字元的Unicode編碼排序;如果第一個相同那麼就比較第二個...
例：        
    var arr = [4,5,1,3,2,7,6];
    var aaa =arr.sort();
    console.log(aaa);          // [1, 2, 3, 4, 5, 6, 7]
    console.log(aaa === arr);// true 原陣列被排序了(氣泡排序)
    //預設還可以排列字母;
    var arr2 = ["c","e","d","a","b"];
    var bbb = arr2.sort();
    console.log(bbb);         // ["a", "b", "c", "d", "e"]
    console.log(bbb===arr2); // true 原陣列被排序了(氣泡排序)

sort() //數值大小排序方法,需要藉助回撥函式;
例：
      var arr = [4,5,1,13,2,7,6];
      //回撥函式裡面返回值如果是：引數1-引數2;升冪；   引數2-引數1;降冪；
      arr.sort(function (a,b) {
        return a-b; //升序
        //return b-a; //降序
        //return b.value-a.value; //按照元素value屬性的大小排序;
      });
      console.log(arr); // [1, 2, 4, 5, 6, 7, 13]

sort( )底層原理

    var aaa = bubbleSort([1,12,3], function (a,b) {
//        return a-b;//實參：array[j]-array[j+1]；
        return b-a;//實參：array[j+1]-array[j]；
    });
    console.log(aaa);

    function bubbleSort(array,fn){
        //外迴圈控制輪數，內迴圈控制次數，都是元素個數-1;
        for(var i=0;i<array.length-1;i++){
            for(var j=0;j<array.length-1-i;j++){//次數優化，多比較一輪，少比較一次;
                //滿足條件交換位置;
//                if(array[j]>array[j+1]){//大於升冪排序；否則降冪;
                //a-b>0  和  a>b是一個意思;
                //b-a>0  和  a<b是一個意思;
//                if(array[j]-array[j+1]>0){//升冪排序
//                if(array[j+1]-array[j]>0){//降冪排序
                //把兩個變數送到一個函式中;
                if(fn(array[j],array[j+1])>0){
                    var temp = array[j];
                    array[j] = array[j+1];
                    array[j+1] = temp;
                }
            }
        }
        //返回陣列
        return array;
    }

陣列元素的操作

concat( )

陣列1.concat(陣列2); // 連結兩個陣列;
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3)   //    [1, 2, 3, "a", "b", "c"]

slice( )

陣列.slice(開始索引值，結束索引值);     //陣列擷取;
例 ：
      var arr = [1, 2, 3, "a", "b", "c"];
      console.log(arr.slice(3));            //從索引值為3擷取到最後;["a", "b", "c"]
      console.log(arr.slice(0,3));            //包左不包右;[1, 2, 3]
      console.log(arr.slice(-2));            //負數是後幾個;["b", "c"]
      console.log(arr.slice(3,0));            //如果前面的比後面的大，那麼就是[];[]
      console.log(arr);                          //原陣列不被修改;[1, 2, 3, "a", "b", "c"]

splice( )

陣列.splice(開始索引值，刪除幾個，替換內容1，替換內容2，...);  // 替換和刪除;
                                                      //改變原陣列;返回值是被刪除/替換的內容
例:
    var arr = [1,2,3,4,5,6,"a", "b", "c"]
    arr.splice(5);        //從索引值為3擷取到最後;(刪除)
    console.log(arr);     // [1, 2, 3, 4, 5]
    arr.splice(1,2);    //(刪除指定個數)從索引為1的開始刪除2個
    console.log(arr);   //[1, 4, 5]

//替換
    var arr = [1,2,3,4,5,6,"a", "b", "c"];
    console.log(arr.splice(3,3,"aaa","bbb","ccc"));    //(刪除指定數並替換)
    console.log(arr);     // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
//    新增
    arr.splice(3,0,"aaa","bbb","ccc");//(刪除指定個數)
//
    console.log(arr);//擷取或者替換之後的;   [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]

indexOf / lastIndexOf

陣列.indexOf(元素);      // 給元素，查索引(從前往後)
陣列.lastIndexOf(元素);  // 給元素，查索引(從後往前)
例：
    var arr = ["a","b","c","d","c","b","b"];
    console.log(arr.indexOf("b"));        // 1 查到以後立刻返回
    console.log(arr.lastIndexOf("b"));    // 6 找到以後立刻返回
    console.log(arr.indexOf("xxx"));    // -1;  查不到就返回-1；

陣列迭代(遍歷)

every()

對陣列中每一項執行回撥函式，如果都返回true，every返回true，
如果有一項返回false，則停止遍歷 every返回false；不寫預設返回false
像保鏢失誤一次，遊戲結束！！！
例：
1.    var arr = [111,222,333,444,555];
    arr.every(function (a,b,c) {
        console.log(a);    //元素
        console.log(b);    //索引值
        console.log(c);    //陣列本身;
        console.log("-----");    //陣列本身;
        //陣列中元素賦值：c[b] = 值;      a=有時候無法賦值;
        return true;
    });

2.  //every返回一個bool值，全部是true才是true；有一個是false，結果就是false
    var bool = arr.every(function (element, index, array) {
        //判斷：我們定義所有元素都大於200;
        //if(element > 100){
        if(element > 200){
            return true;
        }else{
            return false;
        }
    })
    alert(bool); //false

filter()

//   對陣列中每一項執行回撥函式，該函式返回結果是true的項組成的新陣列
//     新陣列是有老陣列中的元素組成的，return為ture的項;
例：
    var arr = [111,222,333,444,555];
    var newArr = arr.filter(function (element, index, array) {
        //只要是奇數，就組成陣列;(陣列中辨別元素)
        if(element%2 === 0){
            return true;
        }else{
            return false;
        }
    })

    console.log(newArr); // [222, 444]

forEach()

// 和for迴圈一樣；沒有返回值;
例：
    var arr = [111,222,333,444,555];
    var sum = 0;
    var aaa = arr.forEach(function (element,index,array) {
        console.log(element); // 輸出陣列中的每一個元素
        console.log(index); // 陣列元素對應的索引值
        console.log(array); // 陣列本身 [111, 222, 333, 444, 555]
        sum += element; //陣列中元素求和;
    });
    console.log(sum); // 陣列元素加起來的和
    console.log(aaa);//undefined；沒有返回值 所以返回undefined

map()

//  對陣列中每一項執行回撥函式，返回該函式的結果組成的新陣列
//    return什麼新陣列中就有什麼; 不return返回undefined; 對陣列二次加工
例：
    var arr = [111,222,333,444,555];
    var newArr = arr.map(function (element, index, array) {
        if(index == 2){
            return element; // 這裡return了 所以下面返回的值是333
        }
        return element*100; // 返回的元素值都乘上100後的值
    })
    console.log(newArr); // [11100, 22200, 333, 44400, 55500]

some()

//對陣列中每一項執行回撥函式，如果該函式對某一項返回true，則some返回true; 像殺手，有一個成功，就勝利了！！！
例：
    var arr = [111,222,333,444,555];
    var bool = arr.some(function (ele,i,array) {
        //判斷：陣列中有3的倍數
        if(ele%3 == 0){
            return true;
        }
        return false;
    })
    alert(bool); //true ; 有一個成功就是true

陣列清空

    1. arr.length = 0; // (不好，偽陣列無法清空)
    2. arr.splice(0); // 偽陣列沒有這個方法;
    3. arr = [];     // 可以操作偽陣列; (推薦!)

// 偽陣列: 就是長的像陣列，但是沒有陣列的方法;也不能新增和刪除元素;
例： // arguments
        fn(111,222,333);
        function fn(){
            arguments.length = 0; // 無法清空 返回 [1, 2, 3]
           arguments.splice(0); // 會報錯 arguments.splice is not a function
            arguments = []; // 可以清空,返回空陣列[] 
            console.log(arguments);
        }

陣列案例

1.將一個字串陣列輸出為|分割的形式，比如“劉備|張飛|關羽”。使用兩種方式實現

       var arr = ["劉備","張飛","關羽"];
       var separator = "|";
       //通過for迴圈累加
       var str = arr[0];
       for(var i=1;i<arr.length;i++){
           str += separator+arr[i];
       }
       console.log(str); // 劉備|張飛|關羽
       //join()可以把陣列中的元素連結成字串;
       console.log(arr.join("|")); // 劉備|張飛|關羽

2.將一個字串陣列的元素的順序進行反轉。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實現。提示：第i個和第length-i-1個進行交換

  // 陣列.reverse() 方法
           var arr = ["a", "b", "c", "d"];
           console.log(arr.reverse()); // ["d", "c", "b", "a"]
       
       //  三種：1.正向遍歷，反向新增;  2.反向遍歷，正向新增;   3.元陣列元素交換位置;
           for(var i=0;i<arr.length/2;i++){
               var temp = arr[i];
               arr[i] = arr[arr.length-1-i];
               arr[arr.length-1-i] = temp;
           }
           console.log(arr);

3.工資的陣列[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除

   var arr = [1500, 1200, 2000, 2100, 1800];
   //利用filter()形成一個陣列;return true;組成的陣列;
   var newArr = arr.filter(function (ele, i, array) {
       //2000以上返回false;
       if(ele<2000){
           return true;
       }else{
           return false;
       }
   });
   console.log(newArr); // [1500, 1200, 1800]

4.["c", "a", "z", "a", "x", "a"]找到陣列中每一個a出現的位置

   var arr = ["c", "a", "z", "a", "x", "a"];
   //遍歷陣列(for/while/do...while)    forEach();
   arr.forEach(function (ele, index, array) {
       //如果元素等於“a”，那麼就輸出索引值；
       if("a" === ele){
           console.log(index);
       }
   });

5.編寫一個方法去掉一個陣列的重複元素 (陣列去重)

       var arr = ["鳴人","鳴人","佐助","佐助","小櫻","小櫻"];
   //  方法1：  思路：定義一個新陣列，遍歷老陣列，判斷，如果新陣列裡面沒有老陣列的元素就新增，否則就不新增；
       var newArr = [];
       //遍歷老陣列
       arr.forEach(function (ele,index,array) {
           //檢測老陣列中的元素，如果新陣列中存在就不新增了，不存在才新增;
           if(newArr.indexOf(ele) === -1){//不存在就新增;（去新陣列中查詢元素索引值，如果為-1就是沒有）
               newArr.push(ele);
           }
       });
       console.log(newArr); // ["鳴人", "佐助", "小櫻"]

相關文章