javascript实用数组方法梳理

• 多维数组扁平化

  1. 利用reduce实现，以下：

  const flatArray = function (depth = 1) {
    let arr = Array.prototype.slice.call(this)
    if (depth === 0) return arr
      return arr.reduce((pre, cur) => {
        if (Array.isArray(cur)) {
          return [...pre, ...flatArray.call(cur, depth - 1)]
        } else {
          return [...pre, cur]
        }
      }, [])
  }
  
  const arr1 = [1, 2, [3, 4], [5, [6, 7]]]
  console.log(flatArray.call(arr1)) // [1, 2, 3, 4, 5, [6, 7]]
  console.log(flatArray.call(arr1, 2)) // [1, 2, 3, 4, 5, 6, 7]
  复制代码

  2. 使用Array.prototype.flat()方法

  const arr1 = [1, 2, [3, 4], [5, [6, 7]]]
  console.log(arr1.flat(1)) // [1, 2, 3, 4, 5, [6, 7]]
  console.log(arr1.flat(2)) // [1, 2, 3, 4, 5, 6, 7]
  复制代码

• 数组去重

  1. 利用对象(类map),以下

  function deleteArrayDuplicateElement (arr) {
    const mapObj = {}
    for (let i = 0; i < arr.length; i++) {
      if (mapObj[arr[i]]) {
        arr.splice(i, 1)
        i--
      } else {
        mapObj[arr[i]] = arr[i]
      }
    }
  }
  const testArr1 = [1, 2, 3, 3, 4, 6, 8, 8, 9]
  const testArr2 = [1, 2, 3, 3, 4, 6, 8, 8, 9, undefined, undefined, null, null]
  deleteArrayDuplicateElement(testArr1)
  console.log(testArr1) // [1, 2, 3, 4, 6, 8, 9]
  复制代码

  Note: 该方法不能处理含有undefined，null重复值的数组，结果以下：

  deleteArrayDuplicateElement(testArr2);
  console.log(testArr2) // [1, 2, 3, 4, 6, 8, 9, undefined, undefined, null, null]
  复制代码

  2. 利用Set

  Array.prototype.unique = function () {
    return [...new Set(this)];
  }
  const testArr1 = [1, 2, 3, 3, 4, 6, 8, 8, 9]
  console.log(testArr1.unique()) // [1, 2, 3, 4, 6, 8, 9]
  复制代码

  Note: 该方法能够处理含有undefined，null重复值的数组，结果以下

  const testArr2 = [1, 2, 3, 3, 4, 6, 8, 8, 9, undefined, undefined, null, null]
  console.log(testArr2.unique()) // [1, 2, 3, 4, 6, 8, 9, undefined, null]
  复制代码

  3. 利用reduce

  // from https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
  
  let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
  let result = arr.sort().reduce((init, current) => {
      if(init.length === 0 || init[init.length-1] !== current) {
          init.push(current);
      }
      return init;
  }, []);
  console.log(result); //[1,2,3,4,5]  
  复制代码

• 实现array.filter方法

  使用reduce实现

  const arrayFilter = function (fn, cxt) { 
     return cxt.reduce((pre, cur) => { 
       return fn(cur) ? [...pre, cur] : [...pre]
     }, [])
   }
   const arr3 = [1,2,3,4,5]
   function filter1 (ele) {
     return ele >= 3
   }
  console.log(arrayFilter(filter1, arr3)) // [3, 4, 5]
  console.log(arrayFilter(ele => ele >= 4, arr3))  // [4, 5]
  复制代码

• array.reduce

  在上面的数组扁平化和去重中，都有基于reduce方法的实现方式。除此以外，reduce还能实现更多功能。

  1. 计算数组里全部值的和

  var total = [ 1, 2, 3, 4, 5 ].reduce(
      ( acc, cur ) => acc + cur,
      0
  );
  console.log(total) // 15
  复制代码

  2. 累加对象数组里的值

  var initialValue = 0;
  var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
  },initialValue)
  
  console.log(sum) // 6
  复制代码

  3. 将二维数组转化为一维

  var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
    ( acc, cur ) => acc.concat(cur),
    []
   );
  // flattened is [0, 1, 2, 3, 4, 5]
  复制代码

  4. 计算数组中每一个元素出现的次数

  const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
  const countedNames = names.reduce((allNames, name) => { 
    if (name in allNames) {
      allNames[name]++;
    } else {
      allNames[name] = 1;
    }
    return allNames;
  }, {});
  console.log(countedNames) // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
  复制代码

• includes方法-判断一个数组是否包含一个指定的值

  适用场景： 若是你有发现别人或本身有这样写if判断条件时，可友善的提醒或者优化本身的代码。 code示例：

  // ||的个数>=3
  if (code === '001' || code === '003' || code === '005' || code === '008') {
      // do something
  }
  复制代码

  以上代码段建议优化成以下,精简代码的同时提高代码可读性：

  if (['001', '003', '005', '008'].includes(code)) {
      // do something
  }
  复制代码

欢迎在评论区留言提出补充点。 以为有用的但愿点赞支持下⊙∀⊙！