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 }