數組的操作方法--簡單總結(一)

  • 檢測數組 利用instanceof(實例) 關鍵字

    • 語法: arr instanceof Array 返回值: boolean值
  • 排序

    • 顛倒 : arr.reverse(); 返回值: 這個數組的引用
    • 按大小排序:
      • arr.asort();根據字符串Unicode碼點
      • arr.asort(compareFunction); 返回值: 該數組的引用
        案例:
         var arr = [20,1,42,12,18];
         arr.asort(function(a,b){
             return a-b;//a-b, 按升序; b-a, 降序.
         })
         console.log(arr);//[1,12,18,20,42]
        
  • 查找

    • 索引: 查找數組其中一個元素的index:
      • index : 常用來判斷數組是否含有某一個數據
        • indexOf: 用來查找第一次出現的位置,
          arr.indexOf(searchElement: mixed,fromIndex?:number);
          返回值: 對應的索引
          注意: 第二個參數可選, 是從哪個索引開始查詢
        • lastIndexOf: 用來查找某一最后出現的位置, 語法和indexOf 一樣
      • 值: arr[ i ], 返回值: 對應下標的值
  • 截取數組 (不改變原數組,這是從原數組截取一部分)

    • slice() 方法: slice(start?number, end?number); 返回值: 截取好的新數組
      • 不傳參: 截取全部
      • slice(1,5): 從第一項開始截取,包括第一項, 但不包括第5項
      • slice(1,-2): 從第一項開始截取 截取到 倒數第二項, 但不包括倒數第二項
        案例 :
            var obj = {
              0:1,
              1:2,
              lenght:2
            }
            //思路: obj 借用 數組的slice方法,slice返回一個新的數組
            var obj = [].slice.call(obj);
            //var obj = [].slice.apply(obj);
            //注意: 截取的長度為length屬性的值
        
        
  • 操作數組(改變原數組)

    • 插入
      • 從最前 arr.unshift(element1,elementN) , 返回值: length屬性值
      • 從最后 arr.push(element1,......elementN) , 返回值: length屬性值
        偽數組借用push 方法(從lenght的值開始插入, 如果length的值為0,或者沒有, 則從索引(屬性)0 開始插入)
        案例:
               0:0,
                 1:1,
             lenght: 2
           }
           //用apply方法借用
           [].push.apply(obj,[2,3,4]);//obj{0:0,1:1,2:2,3:3,4:4,length:5};
           //用call方法借用
           [].push.call(obj,5,6);//obj{0:0,1:1,2:2,3:3,4:4,5:5,6:6,length:7};
        
      • 任意: arr.splice(start: number, 0 ,element1,......elementN), 利用splice方法, 參數1: 要從什么位置開始插入, 參數2: 要刪除的個數, 設為0, 參數3.....N: 要插入的項
    • 刪除
      • 從最前 arr.shift() : 刪除最前面的一項; 返回值: 刪除項.
      • 從最后 arr.pop() ; 刪除最后一項(傳參無效); 返回值: 刪除項.
      • 任意 arr.splice(start: number, deleteCount?: number) ;返回值: 刪除的項組成的數組,deleteCount=0,則返回的數組為空
    • 替換 arr.splice(start: number, deleteCount? : number , item1,item2......);
      返回值: 刪除的項組成的數組, deleteCount=0, 則返回空數組
    • 合并 concat()
      方法用于合并兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組。
      splice()方法總結
    • 作用: 用來刪除 添加 替換 一個數組的內容
      語法:
      • array.splice(start:number) ; 注意 :從起始值開始刪除后面全部.
      • array.splice(start:number, deleteCount?: number); 注意: deleteCount >=0.
      • array.splice(start:number,deleteCount?: number, mixed?:item1,mixed?:item2,......)
        返回值: 刪除后每一項組成的數組
        案例:
        var obj = {
            0:1,
              1:2,
              length:2
        }
        var obj = [].splice.call(obj,0);//[1,2];
        //var obj = [].splice.apply(obj,[0]);
        //注意: 截取的長度為length屬性的值
      
      
  • array轉換成string的方法 join()

    • 作用: 將數組或者一個類數組轉換成一個字符串, 原數組不改變
      語法:
      str = arr.join(); // 返回的字符串默認為","隔開字符串的每一項
      str = arr.join("")// 分隔符為""空字符串
      str = arr.join(separator) // 以separator
      參數: separator, 可選
      返回值: 所有的數組元素組成的字符串
    • forEach()方法 : 對數組的每一個元素,執行一次提供的函數(參數)

    語法:

    arr.forEach(callback(currentValue,index,array){

    ? //要執行的代碼
    },this)

    arr.forEach(callback[,this]);

    參數的含義

    callback: 數組中每個元素都要執行的函數

    ? 該函數有三個參數

    • currentValue(callback函數調用時的數組的當前值,相當于for循環時的arr[i])
    • index(索引) | 可選 :相當于for循環時的i
    • array | 可選 :調用forEach()方法的數組

    this | 可選

    返回值

    undefined.

    對this的理解

    var obj = {
                name: "張山",
                age: 18,
                add: function (arr){
                    arr.forEach(function(v){
                        console.log("過%d年后"+this.name+                        (this.age + v) + "歲",v);
                    },this)
                }
            }
           obj.add([1,2,3,4]);//過1年后張山19歲....
    

    案例:

    //將一個字符串轉換成對象
    var str = "name=linyang&password=123";
    var obj = {};
    str.split("&").forEach(function(v){
        obj[v.split("=")[0]] = v.split("=")[1]
    })
    console.log(obj);//{name:"linyang",password:"123"};
    

    ?

    注意 : 沒有值得項會被跳過, 像undefined 和 ""(空字符串) 不會被跳過

  • map()方法: 用來創建一個新的數組,返回的新數組 是 數組中每個元素調用 callback 函數 返回的結果組成

    語法:

    var newArr = arr.map(callback (currentVallue,index,array){

    //return 表達式;

    },[this])

    var newArr = arr.map(callbakc[,this])

    參數的含義:

    callback: 數組中每個元素要執行的函數

    ? 該函數有三個參數:

    • currentValue: callback的 第一個參數, 數組正在處理的當前元素
    • index | 可選: 數組正在處理的當前元素的索引
    • array | 可選: map方法調用的數組

    this | 可選: 執行callback函數時, 使用的數組

    返回值:

    一個新的數組, 每個元素都是回調函數執行的結果

    注意 : 包括undefined和""空字符串

    ? 調用map方法的數組發生改變

    案例:

    //利用map來拼字符串生成一個表格
    <div></div>
    <script>
            //利用map來拼字符串生成一個表格
        var data = [
           { name: "linyang", age: 18, gender: "man" },
          { name: "jay", age: 38, gender: "man" },
          { name: "lanxiaoyun", age: 17, gender: "girl" }
            ];
         var html =
                '<table border="1"><tbody>'
                + data.map(function (v) {
                    return "<tr>" +
                        "<td>" + v.name + "</td>" +
                        "<td>" + v.age + "</td>" +
                        "<td>" + v.gender + "</td>" +
                        "</tr>"
                }).join("") + 
            '</tbody></table>'
         document.querySelector("div").innerHTML = html;
    </script>
    
    結果.png

? 注意: html結構省略了

  • reduce()方法: 累計器 和 數組中的每一個元素應用一個函數, 最終累計成一個值. 累計器有一個初始值, 數組中的每一個元素和上一次執行結果的累計器進行應用一個函數; 初始值可以是一個數字, 比如初始值sum = 0, 和數組[1,2,3,4]進行應用, 則最終累計結果是: 10

    var total = [1,2,3,4].reduce(function(sum,value){
        return sum + value;
    },0)
    

    ?

    語法:

    arr.reduce(callback[, initialValue])

    參數:

    callback: 數組和累計器要應用的函數

    ? 該函數有四個參數:

    ? accumulator: 上一次調用的的返回值,初始值為initialValue

    ? 沒有initialValue時,為數組的第0項,reduce會從

    ? 索引1開始執行;

    ? currentValue:數組中正在處理的元素;

    ? currentIndex: 數組中正在處理的元素的索引;

    ? array: 調用reduce的數組

    initialValue | 可選 : 調用callback時的初始值, 可以是簡單number ,

    ? 數組或者對象等等.

    返回值: 函數累計處理的結果

    案例:

    //將一個字符串轉換成一個對象
    var str = "name=linyang&password=123";
    var obj = str.split("&").reduce(function(acc,v){
        acc[v.split("=")[0]] = v.split("=")[1];
          retur acc;
    },{})
    console.log(obj);
    

    ?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容