js中陣列的一些常見操作 - 1

要吃早餐發表於2018-03-09
JS陣列

對陣列進行操作在js中是很常見的，今天就整理一下這些方法

  • 對陣列進行去重
// 例子
var dataList = [
    {
        name: 'aa',
        age: 25
    },{
        name: 'bb',
        age: 24
    },{
        name: 'cc',
        age: 24
    },{
        name: 'dd',
        age: 22
    },{
        name: 'aa',
        age: 25
    }
]
對上面的陣列進行去重,下面這個方法，是最快的。
var hash = {};
var filterList = dataList.reduce(function (item, next) {
    hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
    return item;
}, [])

console.log(filterList);
filterList = [
    { 
        name: 'aa',
        age: 25 
    },
    {   
        name: 'bb',
        age: 24
    },
    { 
        name: 'cc',
        age: 24
    },
    { 
        name: 'dd',
        age: 22 
    } 
]
複製程式碼

  • 合併陣列

    開發中經常會碰到合併陣列的問題，也有多種方法。

    var arr1 = [1, 2, 3];

    var arr2 = [4, 5, 6];

    1、Array物件有一個 concat() 方法。

    var arr3 = arr1.concat(arr2); // arr3 = [1, 2, 3, 4, 5, 6];

    這樣有個問題，合併之後，arr1 與 arr2 的資料並沒有改變。重新生成了一個新的陣列，這樣會造成記憶體浪費。

    2、使用迴圈，把一個陣列的每一項新增到另一個陣列中。

      arr1.forEach(function (item, index){
      arr2.push(item);
  })
複製程式碼

    這個方法就很不錯了，就是程式碼有點多。還能不能更短一點。

    3、使用 apply 方法

      arr1.push.apply(arr1, arr2); // arr1 = [1, 2, 3, 4, 5, 6];
複製程式碼

需要注意兩個小問題

  • 1、以上3種方法，都沒有考慮過誰的長度更小。

    最好的做法是先判斷誰的長度小，然後用 大陣列合並小陣列，這樣可以減少陣列操作次數。

  • 2、如果不想改變原陣列，這個時候就只能用 concat() 方法。

陣列的一些原生操作方法

  • 末尾新增與刪除

    arr.push() // 末尾新增 返回新增後的陣列長度

    arr.pop() // 末尾刪除 返回刪除的項

  • 開頭新增與刪除

    arr.unshift() //開頭新增 返回新增後的陣列長度

    arr.shift() // 開頭刪除 返回刪除的項

  • slice() 與 splice()

      var arr = [1, 2, 3, 4, 5, 6, 7];
複製程式碼

    array.slice() 方法一般用來擷取陣列

      slice(begin, end); // 返回從 begin 開始 到 end (不包括 end) 位置的項。
  var s = arr.slice(2); 
  console.log(arr) // arr = [1, 2, 3, 4, 5, 6, 7]; 原陣列不變
  console.log(s)  // s = [3, 4, 5, 6, 7]; 只有一個引數的時候，返回引數索引至末尾的所有項。
  
  var s1 = arr.slice(1, 4);
  console.log(arr); // arr = [1, 2, 3, 4, 5, 6, 7]; 原陣列不變
  console.log(s1);  // s1 = [2, 3, 4]; 返回索引1 到 4 (不包括4) 的資料。
複製程式碼

    array.splice() 方法，可以用來插入、替換、刪除資料。

      array.splice(start, delNum, items);
複製程式碼

    start： 從陣列的哪一位開始修改內容，如果超出了陣列的長度，則從陣列末尾開始新增內容。如果是負值，則從陣列的末尾開始計數。

    delNum：表示要移除的個數，如果值為 0 則表示不移除資料。

    items：打算新增進陣列的資料，如果沒有，則splice()只刪除資料。

      var d = arr.splice(2);
  console.log(arr); // arr = [1, 2]; 只有一個引數的時候，會把原陣列從引數索引至末尾的資料都擷取掉。會改變原陣列。
  console.log(d); // d = [3, 4, 5, 6, 7]; 返回擷取的資料。



  var d1 = arr.splice(2, 4);
  console.log(arr); // arr = [1, 2, 7]; 把原陣列從索引2 開始，刪除 4 項資料。刪除資料
  console.log(d1); // d1 = [3, 4, 5, 6];  返回刪除的元素
  
  var d2 = arr.splice(2, 0, 12, 13, 14);
  console.log(arr); // arr = [1, 2, 12, 13, 14, 3, 4, 5, 6, 7]; 在原陣列索引為2的位置，刪除 0 個資料，新增後面的資料。 插入資料
  console.log(d2); // []  返回一個空陣列。
  
  var d3 = arr.splice(2, 2, 1314);
  console.log(arr); // arr = [1, 2, 1314, 5, 6, 7] 在原陣列從索引為 2 的位置，刪除 2 項資料，然後新增 1314 資料到刪除的位置。替換資料
複製程式碼

相關文章