• JS: 数组扁平化


    数组扁平化

    1. 什么是数组扁平化

      数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层。

      // 多层嵌套
      [1, 2, [3, 4]]
      
      // 一层
      [1, 2, 3, 4]
      
    2. 递归实现

      思路是先循环数组,遇到嵌套就递归。

      function flatten(arr) {
          let res = [];
          for (let i=0; i<arr.length;  i++) {
              if (Array.isArray(arr[i])) {
                  res = res.concat(flatten(arr[i]));
              } else {
                  res.push(arr[i]);
              }
          }
          return res;
      }
      
      flatten([1, 2, [3, 4]]); // [1, 2, 3, 4]
      
    3. reduce实现

      reduce方法接受一个函数作为参数,这个函数作为一个累加器,从左到右遍历 (升序) 整个类型数组,最后将结果汇总为单个值返回。

      reduce方法还接受一个可选的参数initialValue,作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

      reducer 函数接收4个参数:

      1. Accumulator (acc) (累计器)
      2. Current Value (cur) (当前值)
      3. Current Index (idx) (当前索引) 可选
      4. Source Array (src) (源数组) 可选

      reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

      function flatten(arr) {
          return arr.reduce((acc, cur)=> {
              // 遇到嵌套就递归
              return acc.concat(Array.isArray(cur) ? flatten(cur) : cur);
          }, []);
      }
      
      flatten([1, 2, [3, 4]]); // [1, 2, 3, 4]
      
    4. 使用扩展运算符...

      some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试,返回boolean值。

      注意:对于放在空数组上的任何条件,此方法返回false

      function flatten(arr) {
          // 循环展开嵌套的数组,直到没有嵌套
          while(arr.some(item => Array.isArray(item))) {
              arr = [].concat(...arr);
          }
          return arr;
      }
      
      flatten([1, 2, [3, [5, 6], 4]]); // [1, 2, 3, 5, 6, 4]
      
    5. 去重

      数组去重要考虑的太多了,这里只简单的用Set返回一个不重复的值

      function flatten(arr) {
          // 循环展开嵌套的数组,直到没有嵌套
          while(arr.some(item => Array.isArray(item))) {
              arr = [].concat(...arr);
          }
          return Array.from(new Set(arr));;
      }
      
      flatten([1, 1, 2, [3, [3, 5, 6], 4]]); // [1, 2, 3, 5, 6, 4]
      
    6. 排序

      扁平化的同时实现排序也是很常见的,前面提到的去重就可以在排序的同时进行,但排序要看具体需求来进行封装方法,这里就不进行探讨了。

  • 相关阅读:
    RecyclerView 数据刷新的几种方式 局部刷新 notify MD
    【图片】批量获取几万张图片
    RV BaseRecyclerViewAdapterHelper 总结 MD
    RecyclerView.ItemDecoration 间隔线
    Kotlin【简介】Android开发 配置 扩展
    Kotlin 特性 语法糖 优势 扩展 高阶 MD
    一个十分简洁实用的MD风格的UI主框架
    折叠伸缩工具栏 CollapsingToolbarLayout
    FloatingActionButton FAB 悬浮按钮
    Glide Picasso Fresco UIL 图片框架 缓存 MD
  • 原文地址:https://www.cnblogs.com/guolao/p/10155127.html
Copyright © 2020-2023  润新知