javascript經常使用方法 - Array

//1.Aarry方法

  // 1.1 Array.from(arrayLike[, mapFn[, thisArg]])
  // @arrayLike 想要轉換成數組的僞數組對象或可迭代對象。
  // @mapFn     若是指定了該參數，新數組中的每一個元素會執行該回調函數。
  // @thisArg   可選參數，執行回調函數 mapFn 時 this 對象。
  // 淺拷貝：從一個相似數組或可迭代對象建立一個新的，淺拷貝的數組實例。
  console.log(Array.from('foo'));
  // expected output: Array ["f", "o", "o"]
  console.log(Array.from([1, 2, 3], x => x + x));
  // expected output: Array [2, 4, 6]


  // Array.isArray(obj)
  // 於肯定傳遞的值是不是一個 Array

  // Array.of(element0[, element1[, ...[, elementN]]])
  // 建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。
  Array.of(7);       // [7]       Array.of(7) 建立一個具備單個元素 7 的數組
  Array.of(1, 2, 3); // [1, 2, 3]

  Array(7);          // [ , , , , , , ]
  Array(1, 2, 3);    // [1, 2, 3]


  // 2.經常使用方法（修改）

  // 2.1 添加
  {
    // 2.1.1 添加（右）
    // push(element1, ..., elementN)

    // 2.1.2 添加（左）
    // unshift(element1, ..., elementN)
  }

  // 2.2 刪除
  {
    // 2.2.1 刪除（右1）：刪除最後一個元素，並返回該元素的值。（此方法更改數組的長度）
    // pop()

    // 2.2.2 刪除（左1）：第一個元素
    // shift()
  }

  // 2.3 刪除\替換\添加
  // splice(start[, deleteCount[, item1[, item2[, ...]]]])
  // @start​             指定修改的開始位置（從0計數）。若是超出了數組的長度，則從數組末尾開始添加內容.
  // @deleteCount       整數，表示要移除的數組元素的個數。
  // @item1, item2, ... 添加進數組的元素,從start 位置開始。若是不指定，則 splice() 將只刪除數組元素
  // @return            由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組

  // 實例1：添加，從第 2 位開始刪除 0 個元素，插入「drum」
  var myFish = ["1ab", "2cd", "3ef", "4gh"];
  var removed = myFish.splice(2, 0, "5ij");
  // 運算後的 myFish: ["1ab", "2cd", "5ij", "3ef", "4gh"]
  // 被刪除的元素 removed: [], 沒有元素被刪除
  console.log(myFish);
  console.log(removed);

  // 實例2：替換，從第 2 位開始刪除 1 個元素，插入「trumpet」
  var myFish = ["1ab", "2cd", "3ef", "4gh"];
  var removed = myFish.splice(2, 1, "5ij");
  console.log(myFish);
  console.log(removed);
  // 運算後的 myFish: ["1ab", "2cd", "5ij", "4gh"]
  // 被刪除的元素 removed: ["3ef"], 沒有元素被刪除

  // 2.4.排序
  {
    // 2.4.1 顛倒
    // reverse()

    // 2.4.2 排序 
    // sort([compareFunction])
    // @compareFunction 一個比較函數
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

    // 比較數字 
    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function (a, b) {
      return a - b;
    });
    // 能夠寫成 numbers.sort((a, b) => a - b); 
    console.log(numbers);  // [1, 2, 3, 4, 5]
  }

  // 3.經常使用方法（訪問）

  // 3.1 合併 
  {
    // 3.1.1 合併成（數組）
    // var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])


    // 3.1.2 鏈接成一個（字符串）（自定義）
    // join([separator])
    var elements = ['Fire', 'Air', 'Water'];
    console.log(elements.join()); //"Fire,Air,Water"
    console.log(elements.join('')); //"FireAirWater"
    console.log(elements.join('-')); //"Fire-Air-Water"


    // 3.1.3  鏈接成一個（字符串）（用,隔開）
    // toString()
  }


  // 3.2 判斷
  {
    // 3.2.1 包含一個指定的值
    // includes(valueToFind[, fromIndex])
    var array1 = [1, 2, 3];
    console.log(array1.includes(2)); //true
  }


  // 3.3 截取當前數組中的一段元素組合成一個新數組（淺拷貝）
  // slice([begin[, end]])
  // 由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）
  var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  console.log(animals.slice(2));     // Array ["camel", "duck", "elephant"]
  console.log(animals.slice(2, 4));  // Array ["camel", "duck"]
  console.log(animals.slice(1, 5));  // Array ["bison", "camel", "duck", "elephant"]


  // 3.4 由數組元素組合而成的【本地化】後的字符串
  // toLocaleString([locales[,options]])
  // @locales 帶有BCP 47語言標記的字符串或字符串數組，關於locales參數的形式與解釋，請看Intl頁面。
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl
  // @options 一個可配置屬性的對象，對於數字 Number.prototype.toLocaleString()，對於日期 Date.prototype.toLocaleString().
  var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
  var localeString = array1.toLocaleString('en', { timeZone: "UTC" });
  console.log(localeString);
  // expected output: "1,a,12/21/1997, 2:12:00 PM",
  // This assumes "en" locale and UTC timezone - your results may vary

  // 3.5 查找
  {
    // 3.5.1 查找（左）
    // indexOf(searchElement[, fromIndex])
    var array = ["1ab", "2cd", "3ef", "4gh"];
    var idx1 = array.indexOf('3ef'); //2
    var idx2 = array.indexOf('ab'); //-1

    // 3.5.2 查找（右）
    // lastIndexOf(searchElement[, fromIndex])
    var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
    console.log(animals.lastIndexOf('Dodo')); //3
    console.log(animals.lastIndexOf('Tiger')); //1

    // 3.5.3 查找經過測試函數的第一個元素的（值）。不然返回 undefined。
    // find(callback[, thisArg])
    var array1 = [5, 12, 8, 130, 44];
    var found = array1.find(function (element) {
      return element > 10;
    });
    console.log(found); //  12

    // 3.5.4 查找經過測試函數的第一個元素的（索引）。不然返回 -1.
    // findIndex(callback[, thisArg])
    var found2 = array1.findIndex(function (element) {
      return element > 10;
    });
    console.log(found2); //  1
  }


  // 4.經常使用方法（迭代）

  // 4.1 普通循環

  // 4.1.1 循環執行一次（不能跳出循環）
  // forEach(callback(currentValue[, index[, array]])[, thisArg]);
  // @callback(currentValue[, index[, array]]) 爲數組中每一個元素執行的函數，該函數接收三個參數：
  //      @currentValue 數組中正在處理的當前元素。
  //      @index（可選） 數組中正在處理的當前元素的索引。
  //      @array（可選） forEach() 方法正在操做的數組。
  // @thisArg  可選參數。當執行回調函數時用做 this 的值(參考對象) 。
  function logArrayElements(element, index, array) {
    console.log('a[' + index + '] = ' + element);
  }

  // 注意索引 2 被跳過了，由於在數組的這個位置沒有項
  [2, 5, , 9].forEach(logArrayElements);
  // logs:
  // a[0] = 2
  // a[1] = 5
  // a[3] = 9

  // 4.2 循環判斷
  {
    // 4.2.1 判斷（每一個元素）都經過測試函數
    // every(callback[, thisArg])
    function isBelowThreshold(currentValue) {
      return currentValue < 40;
    }
    var array1 = [1, 30, 39, 29, 10, 13];
    console.log(array1.every(isBelowThreshold)); //true


    // 4.2.2 判斷有（1個元素）經過測試函數
    // some(callback(element[, index[, array]])[, thisArg])

    // 例1：是否有能除盡2的值
    var array = [1, 2, 3, 4, 5];
    var even = function (element) {
      // checks whether an element is even
      return element % 2 === 0;
    };
    console.log(array.some(even)); //true
    console.log("---------");

    // 例2：判斷數組元素中是否存在某個值
    var serr = ["EN-US", "zh-cn", "fr-fr"];
    var bool = serr.some(function name(element) {
      return element.toLowerCase() === "en-us";
    })
    console.log(bool); //true
  }

  // 4.3 建立新數組
  {
    // 4.3.1 經過測試函數過濾的全部數組組成的新數組
    // var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]


    // 4.3.2 每一個元素執行一次測試函數後的返回值組成的行數組，
    // 當你不打算使用返回的新數組卻使用map是違背設計初衷的，請用forEach或者for-of替代
    // var new_array = arr.map(function callback(currentValue[, index[, array]])[, thisArg])
    var array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]
  }

  // 4.4 累計器
  {
    // 4.4.1 從左到右爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，
    //       並返回最後一次回調函數的返回值。
    // reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
    // @callback 執行數組中每一個值 (若是沒有提供 initialValue則第一個值除外)的函數，包含四個參數：
    //      @accumulator     累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue（見於下方）。
    //      @currentValue    數組中正在處理的元素。
    //      @index （可選）   數組中正在處理的當前元素的索引。 若是提供了initialValue，則起始索引號爲0，不然從索引1起始。
    //      @array （可選）    調用reduce()的數組
    // @initialValue （可選）  做爲第一次調用 callback函數時的第一個參數的值。 若是沒有提供初始值，則將使用數組中的第一個元素。 
    //                       在沒有初始值的空數組上調用 reduce 將報錯。
    // @return 函數累計處理的結果

    const array1 = [1, 2, 3, 4];
    const reducer = function (accumulator, currentValue) {
      return accumulator + currentValue;
    }
    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));
    // 5 + 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer, 5));


    // 4.4.2 從右到左爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，
    //       並返回最後一次回調函數的返回值。
    // reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  }

  // *（實驗性API） 4.5 鍵值對
  {
    // 4.5.1 entries()
    // 返回鍵值對數組
    var array1 = ['a', 'b', 'c'];
    var iterator1 = array1.entries();
    console.log(iterator1.next().value);
    // expected output: Array [0, "a"]
    console.log(iterator1.next().value);
    // expected output: Array [1, "b"]


    // 4.5.2 keys()
    // 返回鍵數組


    // 4.5.3 values()
    //返回值數組
  }