js 數組一些高級操作

引自： https://blog.csdn.net/Jacoh/article/details/88697855

• 轉換方法

  ​ 所有對象都具有 toLocaleString()、toString()和 valueOf()方法。

• 棧方法

  array.push, array.pop

• 隊列方法

  ​ array.shift, array.push

• 重排方法

  array.reverse, array.sort

  reverse()和 sort()方法的返回值是經過排序之后的數組。

• 操作方法

  array.concat, array.slice

• 位置方法

  array.indexOf, array.lastIndexOf

• 迭代方法

  array.every, array.filter, array.forEach, array.map, array.some

  every(): 對數組中的每一項運行給定函數，如果該函數對每一項都返回 true，則返回 true。
  filter(): 對數組中的每一項運行給定函數，返回該函數會返回 true 的項組成的數組。
  forEach(): 對數組中的每一項運行給定函數。這個方法沒有返回值。
  map(): 對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
  some(): 對數組中的每一項運行給定函數，如果該函數對任一項返回 true，則返回 true。

  以上方法都不會修改數組中的包含的值。

• 歸並方法

  array.reduce, array.reduceRight (ECMAScript 5 新增)

  reduce()方法從數組的第一項開始，逐個遍歷 到最后。而 reduceRight()則從數組的最后一項開始，向前遍歷到第一項。

  這兩個方法都接收兩個參數:一個在每一項上調用的函數和(可選的)作為歸並基礎的初始值。

  var values = [1,2,3,4,5];
  var sum = values.reduce(function(prev, cur, index, array){
  return prev + cur;
  });
  alert(sum); //15
  

• ES6 方法

  array.fill, Array.from

---

1. 扁平化 n 維數組

   [1, [2, 3]].flat(2); // [1, 2, 3]
   [1, [2, 3, [4, 5]]].flat(3); // [1, 2, 3, 4, 5]
   

   Array.flat(n) 是 ES10 扁平化數組的 api， n 表示維度， n 值為 Infiniti 時維度為無限大。

   js 實現：利用遞歸和數組合並方法 concat 實現扁平。

   function flatten(arr) {
   	while(arr.some(item => Array.isArray(item))) {
   		arr = [].concat(...arr);
   	}
   	return arr;
   }
   
   flatten([1, [2, 3]]); // [1, 2, 3]
   

2. 數組去重

   Array.from(new Set([1, 2, 3, 2, 4])); // [1, 2, 3, 4]
   [...new Set([1, 2, 3, 3, 4, 4])]; // [1, 2, 3, 4]
   

   1. Set 是 ES6 新出來的一種定義不重復數組的數據類型。
   2. Array.from 是將類數組轉化為數組。
   3. … 是擴展運算符，將 set 里面的值轉化為字符串。

   js 實現：可以根據雙層循環過濾掉重復項。

   Array.prototype.distinct = function () {
       let arr = this,
           result = [],
           i,
           j,
           len = arr.length;
   
       for (i = 0; i < len; i++) {
           for (j = i + 1; j < len; j++) {
               if (arr[i] === arr[j]) {
                   j = ++i
               }
           }
           result.push(arr[i])
       }
       return result;
   }
   

3. 數組排序

   [1, 2, 3, 4].sort(); // [1, 2, 3, 4] 默認是升序
   [1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]
   

   sort 是 js 內置的排序方法，參數為一個函數

   js 實現：冒泡排序

   Array.prototype.bubleSort = function () {
       let arr = this,
           len = arr.length;
       for (let i = 0; i < len; i++) {
           for (let j = i + 1; j < len; j++) {
               if (arr[j - 1] > arr[j]) {
                   [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]
               }
           }
       }
       return arr;
   }
   

   js 實現：選擇排序

   Array.prototype.selectSort = function () {
       let arr = this,
           len = arr.length;
   
       for (let i = 0; i < len; i++) {
           for (let j = i; j < len; j++) {
               if (arr[i] > arr[j]) {
                   [arr[i], arr[j]] = [arr[j], arr[i]];
               }
           }
       }
       return arr;
   }
   

4. 數組中的最大值

   Math.max(...[1, 2, 3, 4]); // 4
   Math.max.apply(this, [1, 2, 3, 4]); // 4
   [1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
   	return Math.max(prev, cur);
   }); // 4
   

5. 數組求和

   [1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
   	return prev + cur;
   }, 0); // 10
   

6. 數組合並

   var a = [1, 2, 3, 4];
   var b = [5, 6];
   a.concat(b); // [1, 2, 3, 4, 5, 6]
   
   [...a, ...b]; // [1, 2, 3, 4, 5, 6]
   
   [].push.apply(a, b); // [1, 2, 3, 4, 5, 6]
   
   b.map(item => {
   	a.push(item);
   }); // [1, 2, 3, 4, 5, 6]
   

7. 判斷數組中是否包含

   // includes(), find(), findIndex() 是 ES6 的 api。
   [1, 2, 3].includes(4); // false
   
   [1, 2, 3].indexOf(4); // -1 表示沒有
   
   [1, 2, 3].find(item => item === 3); // 3 如果沒有返回 undefined
   
   [1, 2, 3].findIndex(item => item === 3); // 2 如果沒有則返回 -1
   

8. 類數組轉換

   類數組：表示有 length 屬性，但是不具備數組的方法

   Array.prototype.slice.call(arguments); // arguments 是類數組（偽數組）
   Array.prototype.slice.apply(arguments);
   Array.from(arguments);
   [...arguments];
   
   // 可運行示例
   function a () {
   	return [...arguments];
   }
   a(1, 2); // array
   
   Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
   
   // document.querySelectorAll('.color'); 返回的也是類數組
   var targets = document.querySelectorAll('.color');
   [].forEach.apply(targets, function(item){
   	// do something.
   });
   
   // slice 實現
   Array.prototype.slice = function(start, end) {
     var result = new Array();
     start = start || 0;
     end = end || this.length;
     for(var i = start; i < end; i ++){
       result.push(this[i]);
     }
     return result;
   }
   

   1. call、apply：改變 slice 里面的 this 指向 arguments， 所以 arguments 也可以調用數組的方法。
   2. Array.from: 將類數組或可迭代對象創建為數組。
   3. … 將數組擴展為字符串，再定義為數組。

9. 為數組的每項設置值

   // fill 是 ES6 的方法。
   [1, 2, 3].fill(false); // [false, false, false]
   Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
   

10. 處理數組的單項數據

    // every 每項都滿足返回 true
    [1, 2, 3].every(item => { return item > 2 }); // false
    
    // 有一項滿足返回 true
    [1, 2, 3].some(item => { return item > 2 }); // true
    
    // 數組過濾
    [1, 2, 3].filter(item => { return item > 2 }); // [3]
    

    some、every、filter 是 ES5 的 api。

11. 對象數組間轉化

    Object.keys({name: 'zhangsan', age: 14}); // ["name", "age"]
    Object.values({name: 'zhangsan', age: 14}); // ["zhangsan", 14]
    Object.entries(["zhangsan", 14]); // [["name", "zhangsan"], ["age", 14]]
    Object.fromEntries(["name", "zhangsan"], ["age", 14]); // ES10 的 api，Chrome 不支持，firebox 輸出 { "name": "張三", "age": 14 }