JavaScript 常用數組操作方法

  • 一、不改變原數組:concat()join()slice()toString()valueOf()substring()substr();另加split()replace()

    • 1、concat() 方法用于連接兩個或多個數組。僅會返回被連接數組的一個副本。

      var arr1 = [1, 2, 3];
      var arr2 = [4, 5];
      var arr3 = arr1.concat(arr2);
      console.log(arr1);  // [1, 2, 3]
      console.log(arr3);  // [1, 2, 3, 4, 5]
      
    • 2、join()方法用于把數組中的所有元素放入一個字符串中。

      var arr = [1, 2, 3];
      console.log(arr.join());    // 1, 2, 3
      console.log(arr);   // [1, 2, 3]
      
    • 3、slice(start,end) 方法從已有的數組中返回選定的元素。返回一個新數組。包含start到end(不包含end)的arratObject中的元素

      var a = ['a', 'b', 'c', 'd', 'e', 'f'];
      var a1 = a.slice(2,4);
      console.log(a);     // ["a", "b", "c", "d", "e", "f"]
      console.log(a1);    // ["c", "d"]
      
    • 4、toString()返回一個字符串,表示指定的數組及其元素

      var arr = ['a', 'b', 'c', 'd'];
      console.log(arr.toString());    // a,b,c,d
      console.log(arr);   // ["a", "b", "c", "d"]
      
    • 5、substring()substr() 都不改變原數組
      相同點:都只寫一個參數時,兩者的作用:都是截取字符串從當前下標以后直到字符串最后的字符串片段。
      不同點:第二個參數。
      ? substr(startIndex,lenth): 第二個參數是截取字符串的長度(從起始點截取某個長度的字符串);
      ? substring(startIndex, endIndex): 第二個參數是截取字符串最終的下標 (截取2個位置之間的字符串,‘含頭不含尾’);

      var str = '123456789';
      console.log(str.substr(2))      // 3456789
      console.log(str.substring(2))   // 3456789
      
      console.log(str.substr(2, 4))       // 3456
      console.log(str.substring(2, 4))    // 34
      
    • 6、split()用于把一個字符串分割成字符串數組

      var arr = 'a, b, c, d, 1, 2, 3';
      var arr1 = arr.split(arr)
      console.log(arr)    // a, b, c, d, 1, 2, 3
      console.log(arr1)   // ["a, b, c, d, 1, 2, 3"]
      
    • 7、replace()用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

      var arr = "a, b, c, 1, 2, 3";
      var arr1 = arr.replace('b', 'G');
      console.log(arr)    // a, b, c, 1, 2, 3
      console.log(arr1)   // a, G, c, 1, 2, 3
      
  • 二、會改變原數組:push()unshift()pop()shift()splice()reverse()sort()排序

    • 1、push()方法可向數組的末尾添加一個或多個元素,并返回新的長度。

      var arr = [1, 2, 3];
      var arr1 = arr.push(5);
      console.log(arr);           // [1, 2, 3, 5]
      console.log(arr1);  // 4
      
    • 2、unshift()方法向數組的開頭添加一個或多個元素,并返回新的長度。(該方法可以不傳參數,不傳參數就是不增加元素)

      var arr = [1, 2, 3, 4, 5];
      console.log(arr.unshift(8, 9)); // 7
      console.log(arr);   // [8, 9, 1, 2, 3, 4, 5]
      
    • 3、pop()方法用于刪除數組的最后一個元素,并返回該元素的值

      var arr = [1, 2, 3];
      console.log(arr.pop()); // 3
      console.log(arr);   // [1, 2]
      
    • 4、shift()方法用于刪除數組的第一個元素,并返回第一個元素的值。

      var arr = [1, 2, 3];
      console.log(arr.shift());   // 1
      console.log(arr);   // [2,3]
      
    • 5、splice()方法通過刪除或替換現有元素或者原地添加新的元素,來修改數組,并以數組形式返回被修改的內容。沒有刪除元素,則返回空數組

      //從第 2 位開始刪除 0 個元素,插入"FF"\"GG"
      var a = ['a', 'b', 'c', 'd']
      var a1 = a.splice(2, 0, 'GG', 'FF')
      console.log(a)      // ["a", "b", "GG", "FF", "c", "d"]
      console.log(a1)     // []
      
      // 從第 2 位開始刪除 1 個元素
      var b = ['a', 'b', 'c', 'd']
      var b1 = b.splice(2, 1)
      console.log(b)      // ["a", "b", "d"]
      console.log(b1)     // ["c"]
      
      // 從第 1 位開始刪除 1 或多個元素,插入"FF"\"GG"
      var c = ['a', 'b', 'c', 'd']
      var c1 = c.splice(1, 2, 'GG', 'FF')
      console.log(c)      // ["a", "GG", "FF", "d"]
      console.log(c1)     // ["b", "c"]
      
      // 從倒數第 2 位開始刪除 1 個元素
      var d = ['a', 'b', 'c', 'd']
      var d1 = d.splice(-2, 1)
      console.log(d)      // ["a", "b", "d"]
      console.log(d1)     // ["c"]
      
      // 刪除第2位后的所有元素
      var f = ['a', 'b', 'c', 'd']
      var f1 = f.splice(2)
      console.log(f)      // ["a", "b"]
      console.log(f1)     // ["c", "d"]
      
    • 6、reverse()方法將數組中的元素的位置顛倒,并返回該數組。

      var arr = ['a', 'b', 'c', 'd'];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
      console.log(arr);   // ["d", "c", "b", "a"]
      
    • 7、sort()方法用原地算法對數組的元素進行排序,并返回數組。默認排序順序是在將元素轉換為字符串,然后比較它們的UTF-16代碼單元值序列時構建的。(由于它取決于具體實現,因此無法保證排序的時間和空間復雜性)

      var a1 = [1, 30, 4, 21, 100000]
      console.log(a1.sort())      // [1, 100000, 21, 30, 4]
      console.log(a1)     // [1, 100000, 21, 30, 4]
      
  • 三、其它的數組操作方法:indexOflastIndexOfvalueOf()every()some()map()filter()forEach()數組遍歷、isArray

    • 1、indexOflastIndexOf都接受兩個參數:查找的值、查找起始位置(可選)。
      不存在,返回 -1 ;存在,返回位置。indexOf是從前往后查找, lastIndexOf是從后往前查找。

      var a = ['a', 'b', 'c', 'd'];
      console.log(a.indexOf('b'))     // 1
      console.log(a.indexOf('e'))     // -1
      console.log(a.lastIndexOf('d')      // 3
      console.log(a.lastIndexOf('e'))     // -1
      
    • 2、valueOf()方法返回指定對象的原始值。
      該原始值由 Array 對象派生的所有對象繼承。

    • 3、every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。(若收到一個空數組,此方法在一切情況下都會返回 true)

      var age = [18, 20, 16, 15, 22];
      function adult(age){
          return age < 30
      }
      console.log(age.some(adult))   //true
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 4、some()方法用于檢測數組中的元素是否滿足指定條件(函數提供)。如果有一個元素滿足條件,則表達式返回true , 剩余的元素不會再執行檢測。如果沒有滿足條件的元素,則返回false。(如果用一個空數組進行測試,在任何情況下它返回的都是false)

      var age = [18, 20, 16, 15, 22];
      function adult(age){
          return age < 18
      }
      console.log(age.some(adult))   //true
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 5、map()通過指定函數處理數組的每個元素,并返回處理后的數組。

      var age = [18, 20, 16, 15, 22];
      function adult(x){
          return x - 10
      }
      console.log(age.map(adult)) //[8, 10, 6, 5, 12]
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 6、filter()方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。

      var age = [18, 20, 16, 15, 22];
      function adult(x){
          return x >= 20
      }
      console.log(age.filter(adult)) // [20, 22]
      console.log(age)    // [18, 20, 16, 15, 22]
      
    • 7、forEach()方法對數組的每個元素執行一次提供的函數。

      // array.forEach(function(currentValue, index, arr), thisValue)
      // function(currentValue, index, arr)   必需。 數組中每個元素需要調用的函數。
      //( currentValue.必需。當前元素, 
      //  index.可選。當前元素的索引值,  
      //  arr.可選。當前元素所屬的數組對象。)
      // thisValue 可選。傳遞給函數的值一般用 "this" 值。如果這個參數為空, "undefined" 會傳遞給 "this" 值
      let arr = [1, 2, 3, 4];
      var a= arr.forEach((item, index, array) => {
          console.log(item);
          // 依次打印1, 2, 3, 4, return并沒有終止forEach的循環
          return item * 2;
      });
      
      console.log(arr);
      // [1, 2, 3, 4],不會修改元數組
      
    • 8、isArray方法用于判斷一個對象是否為數組。

      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      var a = Array.isArray(fruits);
      console.log(a); //true
      
  • 三、ES6新增新操作數組的方法 :find()findIndex()fill()copyWithin()fromofentries()返回迭代器:返回鍵值對、values() 返回迭代器:返回鍵值對的value、keys() 返回迭代器:返回鍵值對的key、includes

    • 1、find()方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

      var arr = [3, 10, 18, 20];
      var arr1 = arr.find((e) => e < 10);
      console.log(arr1);   // 3
      
    • 2、findIndex()方法返回傳入一個測試條件(函數)符合條件的數組第一個元素位置。否則返回-1。

      var arr = [3, 10, 18, 20];
      var arr1 = arr.findIndex((e) => e >= 18);
      console.log(arr1);      //  2
      
    • 3、fill()方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。會改變原數組(IE 11 及更早版本不支持 fill() 方法)

      // array.fill(value, start, end)
      // value必需。填充的值。
      // start可選。開始填充位置。
      // end可選。停止填充位置 (默認為 array.length)
      
      const arr = [1, 2, 3, 4, 5];
      console.log(arr.fill(0, 2, 4));     //  [1, 2, 0, 0, 5]
      console.log(arr.fill(7, 1));        //  [1, 7, 7, 7, 7]
      console.log(arr.fill(9));           //  [9, 9, 9, 9, 9]
      
    • 4、copyWithin()方法淺復制數組的一部分到同一數組中的另一個位置,并返回它,不會改變原數組的長度。

      // array.copyWithin(target, start, end)
      // target必需。復制到指定目標索引位置。
      // start可選。元素復制的起始位置。
      // end可選。停止復制的索引位置 (默認為 array.length)。如果為負值,表示倒數。
      
      const arr = ['a', 'b', 'c', 'd', 'e'];
      console.log(arr.copyWithin(0, 3, 4));   // ["d", "b", "c", "d", "e"]
      console.log(arr.copyWithin(1, 3));      //["d", "d", "e", "d", "e"]
      
    • 5、from()方法從一個類似數組或可迭代對象創建一個新的,淺拷貝的數組實例。

      // Array.from(arrayLike[, mapFn[, thisArg]])
      // arrayLike 想要轉換成數組的偽數組對象或可迭代對象。
      // mapFn 可選。如果指定了該參數,新數組中的每個元素會執行該回調函數。
      // thisArg 可選。執行回調函數 mapFn 時 this 對象。
      
      console.log(Array.from('Array'));   // ["A", "r", "r", "a", "y"]
      console.log(Array.from([1, 2, 3], x => x + x));     // [2, 4, 6]
      
    • 6、of()方法創建一個具有可變數量參數的新數組實例,而不考慮參數的數量或類型。

      // Array.of() 和 Array 構造函數之間的區別在于處理整數參數:
      //      Array.of(7) 創建一個具有單個元素 7 的數組,
      //      而 Array(7) 創建一個長度為7的空數組
      //   (注意:這是指一個有7個空位(empty)的數組,而不是由7個undefined組成的數組)。
      
      console.log(Array.of(7));   // [7]
      console.log(Array.of(1, 2, 3));   //   [1, 2, 3]
      
      console.log(Array(7));   // [ , , , , , , ]
      console.log(Array(1, 2, 3));   // [1, 2, 3]
      
      
    • 7、entries()方法返回一個數組的迭代對象,該對象包含數組的鍵值對 (key/value)。(迭代對象中數組的索引值作為 key, 數組元素作為 value。)

      // next方法,可用用于遍歷迭代器取得原數組的[key,value]。
      
      var arr = ['a', 'b', 'c', 'd']
      var a = arr.entries()
      
      console.log(a.next().value)     // [0, "a"]
      console.log(a.next().value)     // [1, "b"]
      console.log(a.next().value)     // [2, "c"]
      console.log(a.next().value)     // [3, "d"]
      
      //也可循環打印出來
      for(const b of a){
          console.log(b)
      }
      // [0, "a"]
      // [1, "b"]
      // [2, "c"]
      // [3, "d"]
      // for of是ES6提供的遍歷迭代器對象的方式
      
    • 8、values()方法返回一個新的 Array Iterator 對象,該對象包含數組每個索引的值

      var arr = ['a', 'b', 'c', 'd']
      var a = arr.values()
      
      for(const b of a){
          console.log(b)
      }
      
      // a
      // b
      // c
      // d
      // for of是ES6提供的遍歷迭代器對象的方式  
      
    • 9、keys()方法返回一個包含數組中每個索引鍵的Array Iterator對象。

      var arr = ['a', 'b', 'c', 'd']
      var a = arr.keys()
      
      for(const b of a){
          console.log(b)
      }
      // 0
      // 1
      // 2
      // 3
      // for of是ES6提供的遍歷迭代器對象的方式  
      
    • 10、includes()方法用來判斷一個數組是否包含一個指定的值,如果是返回 true,否則false。

      // arr.includes(searchElement, fromIndex)
      //  searchElement   必須。需要查找的元素值。
      //  fromIndex   可選。從該索引處開始查找 searchElement。 默認為 0。
      //          如果為負值,則按升序從 array.length + fromIndex 的索引開始搜索。
      
      var arr = ['a', 'b', 'c', 'd']
      
      console.log(arr.includes('a'))      //true
      console.log(arr.includes('a', 3))   //false
      console.log(arr.includes('gg'))     //false
      
      
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容