JS基礎——數組API（1）

數組API（1）

棧方法 (後進先出)

在棧的頂部進行插入和移除操做，使用 push 和 pop 方法結合（會修改原始數組）

• 在數組末尾插入(push能夠添加多項) push

  var arr=[1,2,3];
  var m=arr.push('m');
  console.log(m);  // 4 ，插入末尾，並返回修改後數組的長度
  console.log(arr); // [1, 2, 3, "m"]

• 移除最後一項 pop

  var arr=[1,2,3];
  var n=arr.pop();
  console.log(n);  // 3 移除最後一項，並返回這一項
  console.log(arr); // [1, 2]

隊列方法 (先進先出)

使用 shift 方法(移除數組第一個項並返回該項，用時數組長度減1)結合 push ，就能夠像操做隊列同樣操做數組（會修改原始數組）

• 移除數組第一個項並返回該項 shift

  var arr=[1,2,3];
  var s=arr.shift();
  console.log(s);  // 1 移除第一項，並返回這一項
  console.log(arr); // [2, 3]

• 在數組前端添加任意個項並返回新數組的長度 unshift,使用 unshift 和 pop能夠從相反的方向來模擬隊列

  var arr=[1,2,3];
  var l=arr.unshift(4,5);
  console.log(l);  // 5 向數組前端添加兩項，並返回修改後的數組長度
  console.log(arr); // [4, 5, 1, 2, 3]

重排序方法 （會修改原始數組）

• reverse

  var arr=[1,2,3];
  arr.reverse();
  console.log(arr); // [3,2,1]

• sort

  var arr=[1,8,10,22,31,3];
  arr.sort();
  console.log(arr); // [1, 10, 22, 3, 31, 8]

  sort並無像咱們預期的進行排序， sort 排序時，會調用數組每一項的 toString() 方法，即便數組的全部項都是數字，也是轉換成字符串進行比較的，通常 sort 方法會接受一個比較函數，以便咱們進行排序。

  var arr = [1, 8, 10, 22, 31, 3];
  
  function compare(v1, v2) {
    if (v1 < v2) {
      return -1;
    } else if (v1 > v2) {
      return 1;
    } else {
      return 0;
    }
  }
  arr.sort(compare);
  console.log(arr); // [1, 3, 8, 10, 22, 31]
  // 比較函數還能夠這樣寫
  function compare(v1, v2) {
    return v1 - v2;
  }

reverse 和 sort 的返回值是通過排序後的數組;

操做方法

• concat 基於當前數組的全部項建立一個新數組 (不會修改原數組)

  var arr = ['a', 'b', 'c']
  // 當添加空數組時
  var arr1 = arr.concat([]);
  var arr2 = arr.concat();
  // 添加普通項
  var arr3 = arr.concat('');
  var arr4 = arr.concat(null, undefined);
  var arr5 = arr.concat('d');
  // 添加數組
  var arr6 = arr.concat(['d', 'e', 'f']);
  // 添加普通項和數組
  var arr7 = arr.concat('m', 'n', ',', ['d', 'e', 'f']);
  // 添加子項爲數組的數組
  var arr8 = arr.concat(['d', 'e', 'f', ['x', 'y']]);
  // 添加兩個數組
  var arr9 = arr.concat(['m', 'n', ','], ['d', 'e', 'f']);
  console.log(arr)  // ["a", "b", "c"]
  console.log(arr1) // ["a", "b", "c"]
  console.log(arr2) // ["a", "b", "c"]
  console.log(arr3) // ["a", "b", "c", ""]
  console.log(arr4) // ["a", "b", "c", null, undefined]
  console.log(arr5) // ["a", "b", "c", "d"]
  console.log(arr6) // ["a", "b", "c", "d", "e", "f"]
  console.log(arr7) // ["a", "b", "c", "m", "n", ",", "d", "e", "f"]
  console.log(arr8) // ["a", "b", "c", "d", "e", "f", Array(2)]
  console.log(arr9) // ["a", "b", "c", "m", "n", ",", "d", "e", "f"]

• slice 基於當前數組中的一或多個項建立一個新數組，返回值是新數組(會修改原數組)

  • 刪除 須要兩個參數，起始位置和要刪除的項數

    // 從第三項開始，刪除0項
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr1 = arr.splice(3, 0)
    console.log(arr); // ['a', 'b', 'c', '1', '2', 's']
    console.log(arr1); // []
    // 從第三項開始，刪除2項
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr2 = arr.splice(3, 2)
    console.log(arr); // ["a", "b", "c", "s"]
    console.log(arr2); //  ["1", "2"]
    // 起始值大於數組長度
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr3 = arr.splice(7, 1)
    console.log(arr);
    console.log(arr3);
    // 爲負數的狀況 從倒數項開始計算
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr4 = arr.splice(-2, 2)
    console.log(arr); // ["a", "b", "c", "1"]
    console.log(arr4); // ["2", "s"]
    // 項數爲負，返回爲空
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr5 = arr.splice(2,-2)
    console.log(arr); // ["a", "b", "c", "1", "2", "s"]
    console.log(arr5);// []

  • 插入 須要三個參數，起始位置、要刪除的項數(0)和要插入的項

    // 不刪除，插入
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr2 = arr.splice(2,0,'x')
    console.log(arr); //["a", "b", "x", "c", "1", "2", "s"]
    console.log(arr2); // []

  • 替換 須要三個參數，起始位置、要刪除的項數(0)和要插入的項

    // 刪除並插入
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr1 = arr.splice(2,2,'x')
    console.log(arr); // ["a", "b", "x", "2", "s"]
    console.log(arr1); //  ["c", "1"]
    // 插入數組
    var arr = ['a', 'b', 'c', '1', '2', 's']
    var arr3 = arr.splice(2, 0, 'x', [1, 2, 3])
    console.log(arr); // ["a", "b", "x", Array(3), "c", "1", "2", "s"]
    console.log(arr3); // []

位置方法 (不會修改原數組)

參數 要查找的項和起始位置(可選)，查找的項用 === 操做，必須徹底相等，查找到，返回位置下標，未找到，返回 -1

• indexOf 從數組開始位置向後查找
• lastIndexOf 從數組末尾向前查找

迭代方法 (不會修改原數組)

參數 兩個參數，要在每一項上運行的函數和運行該函數的做用域對象(可選)——影響 this 的值；

• some 對數組中的每一項運行給定函數，若是任一項都返回 true,則返回 true;
• every 對數組中的每一項運行給定函數，若是每一項都返回 true,則返回 true;

• filter 對數組中的每一項運行給定函數，返回該函數返回值爲 true 的項所組成的數組;

  var arr = [-1, 22, 4, -2, 19, 0]
  var result = arr.filter(function(ele, index, arr) {
    return (ele > 0)
  })
  console.log(arr); // [-1, 22, 4, -2, 19, 0]
  console.log(result); // [22, 4, 19]

• forEach 對數組中的每一項運行給定函數，該方法沒有返回值;

• map 對數組中的每一項運行給定函數，返回該函數每次調用結果組成的數組;(若是map函數中沒有 return ，則返回一個長度等於元素組的值爲 undefined 的數組)

  var arr = [-1, 22, 4, -2, 19, 0]
  var result = arr.map(function(ele, index, arr) {
    return (ele * 2)
  })
  console.log(arr); // [-1, 22, 4, -2, 19, 0]
  console.log(result); // [-2, 44, 8, -4, 38, 0]

歸併方法(ES5新增)

兩個方法都會迭代數組全部項，而後構建一個最終返回的值。(不會修改原數組)
參數:在每一項上調用的函數和做爲歸併基礎的初始值(可選的)。改函數接收4個參數：前一個值、當前值、項的索引和數組對象。

• reduce 從數組第一項開始，逐個遍歷到最後

• reduceRight 從數組最後一項開始，逐個遍歷到最後

  // 一個數組自動求和方法
  var arr = [1, 2, 3, 4, 5]
  var result = arr.reduce(function(pre, cur, index, arr) {
    return pre + cur
  }, 0)
  console.log(arr); //[1, 2, 3, 4, 5]
  console.log(result); //15

  // 計算一個數組中，同一個字符出現的次數(固然for循環也很容易實現)
  var arr = ['A','B', 'C', 'A', 'D', 'C', 'B', 'E', 'C', 'D']
  var result = arr.reduce(function(pre, cur, index) {
    pre[cur] = pre[cur] ? ++pre[cur] : 1;
    return pre;
  }, {})
  console.log(result); // {A: 2, B: 2, C: 3, D: 2, E: 1}