flat与flatMap 数组浅扁平化 深扁平化 手写myFlat myFlatMap

已于 2022-10-11 20:00:39 修改
阅读量498 收藏 2
点赞数 1
分类专栏： js 文章标签： es6 javascript 前端
于 2022-10-05 18:53:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65402230/article/details/127173917
版权

flat

Array.prototype.flat
扁平化 多维数组 -> 一维数组

const arr = [0, 1, [2, 3], 4, 5];
const newArr = arr.flat();

console.log(newArr);//[0, 1, 2, 3, 4, 5]

返回一个新的数组
将二维数组转化为一维数组

const arr = [0, 1, [2, 3], 4, 5];
const newArr = arr.flat();

console.log(arr === newArr);//false

flat默认情况下参数是1 -> 向内深入一层

const arr = [0, 1, [2, [3, 4], 5], 6];

const newArr = arr.flat();
console.log(newArr);

在这里插入图片描述

参数

结构深度
默认为1 向数组内部深入一层 变成两层
flat默认情况下是浅的扁平化

参数 正无穷 Infinity 结构深度无穷大的设置

const arr = [0, [1, 2, [3, 4, [5, 6, [7, 8, [9]]]]]];
const newArr = arr.flat(Infinity);
console.log(newArr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

当参数为负数的时候 不做任何扁平化处理

const arr = [0, 1, [2, [3, 4], 5], 6];

const newArr = arr.flat(-2);
console.log(newArr);

在这里插入图片描述
字母字符串也不做处理

const arr = [0, 1, [2, [3, 4], 5], 6];

const newArr = arr.flat('a');
console.log(newArr);

在这里插入图片描述
数字字符串 -> Number -> 数字类型

const arr = [0, 1, [2, [3, 4], 5], 6];

const newArr = arr.flat('2');
console.log(newArr);//[0, 1, 2, 3, 4, 5, 6]

当为0时 也不做任何处理

const arr = [0, 1, [2, [3, 4], 5], 6];

const newArr = arr.flat(0);
console.log(newArr);

在这里插入图片描述

true / fasle 都要经过Number转化为数字类型在处理

对于稀松数组

剔除所有的数组空隙empty

const arr = [1, , [2, , [3, 4, , 5, , , 6, [7, , , 8, 9, , [0]]]]];

const newArr = arr.flat(Infinity);
console.log(newArr);

在这里插入图片描述

浅扁平化实现

concat 是可以放入多个数组元素或者其他数组

var a = 1,
  b = [2, 3],
  c = [3, 4];
const newArr = b.concat(a, c);

console.log(newArr);//[2, 3, 1, 3, 4]

1.用reduce实现

function shallowFlat(arr) {
  return arr.reduce(function (prev, current) {
    return prev.concat(current);
  }, []);
}

2.ES6展开运算符

function shallowFlat(arr) {
  return [].concat(...arr);
}

深扁平化

reduce + concat + isArray + 递归

Array.prototype.deepFlat = function () {
  var arr = this,
    deep = arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity;
  return deep > 0
    ? arr.reduce(function (prev, current) {
        return prev.concat(Array.isArray(current) ? current.deepFlat(deep - 1) : current);
      }, [])
    : arr;
};

forEach + isArray + push + 递归

Array.prototype.deepFlat = function () {
  var arr = this,
    deep = arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity,
    res = [];
  (function _() {
    arr.forEach(function (item) {
      if (Array.isArray(item) && deep > 0) {
        _(item, deep - 1);
      } else {
        res.push(item);
      }
    });
  })(arr, deep);
  return res;
};

for of + isArray + push 去掉empty

Array.prototype.deepFlat = function(){
	var arr = this,
	deep = arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity,
	res = [];
	(function _(arr,deep){
		for(var item of arr){
			if(Array.isArray(item) && deep > 0){
				_(item,deep - 1)
			}else{
				//判断是否时empty 用void 0
				item !== void 0 && res.push(item)
			}
		}		
	})(arr,deep)
	return res
}

用栈 + 展开运算符 vue 用过的方法

Array.prototype.deepFlat = function () {
  var arr = this,
    stack = [...arr],
    res = [];
  while (stack.length) {
    const popItem = stack.pop();
    console.log(stack);
    if (Array.isArray(popItem)) {
      stack.push(...popItem);
    } else {
      popItem !== void 0 && res.push(popItem);
    }
  }
  return res.reverse();
};

纯递归

Array.prototype.deepFlat = function () {
  var arr = this,
    res = [];
  (function _(arr) {
    arr.forEach(function (item) {
      if (Array.isArray(item)) {
        _(item);
      } else {
        res.push(item);
      }
    });
  })(arr);
  return res;
};

生成器函数

function* deepFlat(arr) {
  for (var item of arr) {
    if (Array.isArray(item)) {
      yield* deepFlat(item);
    } else {
      yield item;
    }
  }
}

数组扁平化后数组去重并升序排列

原始写法

      var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
      function flatten(arr) {
        var _arr = arr || [],
          fArr = [],
          len = _arr.length,
          item;
        for (var i = 0; i < len; i++) {
          item = _arr[i];
          if (_isArr(item)) {
            fArr = fArr.concat(flatten(item));
          } else {
            fArr.push(item);
          }
        }
        return fArr;
        function _isArr(item) {
          return {}.toString.call(item) === '[object Array]';
        }
      }
      console.log(flatten(arr));// [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

挂载到原型上

      Array.prototype.flatten = function () {
        var _arr = this,
          toStr = {}.toString;
        if (toStr.call(_arr) !== '[object Array]') {
          throw new Error('只有数组才能调用flatten方法');
        }
        var fArr = [];
        return _arr.reduce(function (prev, item) {
          return prev.concat(toStr.call(item) === '[object Array]' ? item.flatten() : item);
        }, []);
      };
      console.log(arr.flatten());

      Array.prototype.flatten = function () {
        var _arr = this,
          toStr = {}.toString;
        if (toStr.call(_arr) !== '[object Array]') {
          throw new Error('只有数组才能调用flatten方法');
        }
        var fArr = [];
        _arr.forEach(function (item) {
          toStr.call(item) === '[object Array]'
            ? (fArr = fArr.concat(item.flatten()))
            : fArr.push(item);
        });
        return fArr;
      };
      console.log(arr.flatten());

ES6 箭头函数写法

      const flatten = (arr) =>
        arr.reduce((prev, item) => {
          return prev.concat({}.toString.call(item) === '[object Array]' ? flatten(item) : item);
        }, []);
      console.log(flatten(arr));

flatMap

Array.prototype.flatMap
flat + map
遍历 + 扁平化

const arr = ['123', '456', '789'];
const newArr = arr.flatMap(function (item) {
  return item.split('');
});
console.log(newArr);

在这里插入图片描述

返回一个新的数组

const arr = ['123', '456', '789'];
const newArr = arr.flatMap(function (item) {
  return item.split('');
});
console.log(newArr === arr); //false

回调参数

当前遍历的元素 当前遍历元素在数组中对应的下标 数组本身

const arr = ['123', '456', '789'];

const newArr = arr.flatMap(function (item, index, arr) {
  console.log(item, index, arr);
});

在这里插入图片描述
回调中this默认指向window

const arr = ['123', '456', '789'];

const newArr = arr.flatMap(function (item, index, arr) {
  console.log(this);
});

在这里插入图片描述
严格模式下 this为undefined

'use strict';
const arr = ['123', '456', '789'];

const newArr = arr.flatMap(function (item, index, arr) {
  console.log(this);
});

在这里插入图片描述

第二个参数

改变回调内this的指向

const arr = ['123', '456', '789'];

const newArr = arr.flatMap(
  function (item, index, arr) {
    console.log(this);
  },
  { a: 1 }
);

在这里插入图片描述

实例

对字符串进行分段处理 并生成新的数组

const arr = ["My name's kobe", "I'm 35", 'years old.'];

const newArr = arr.flatMap(function (item) {
  return item.split(' ');
});
console.log(newArr);

在这里插入图片描述

对数组进行遍历的过程中进行某些运算 并添加回数组中

const arr = [1, -2, -3, 5, 8, -9, 6, 7, 0];

const newArr = arr.flatMap(function (item, index) {
  if (item < 0 && index >= 1) {
    return [item, `${item} + ${arr[index - 1]} = ${item + arr[index - 1]}`];
  }
  return item;
});

console.log(newArr);

在这里插入图片描述

重写myFlatMap

Array.prototype.myFlatMap = function () {
  if (typeof cb !== 'function') {
    throw new TypeError('Callback must be a function');
  }
  var arr = this,
    arg2 = arguments[1],
    res = [];
  for (var i = 0; i < arr.length; i++) {
    item = cb.apply(arg2, [arr[i], i, arr]);
    item && res.push(item);
  }
  return res.flat();
};
_聪明勇敢有力气
关注
专栏目录
JS数组扁平化(flat)方法总结详解
10-16
在JavaScript中，数组扁平化（Array Flattening）是一个常见的操作，特别是在处理嵌套数组时。这个过程的目的是将一个多维数组转换成一个单一的一维数组。在本篇文章中，我们将深入探讨JavaScript中实现数组扁平化的...
实现一个数组无限摊平的方法
weixin_41489378的博客
06-25 238
// 定于无限常量 const INFINITY = 1/0; // 定义用于判断是否可继续摊平的方法 function isFlattenable(value){ return Array.isArray(value) } function flatMapDeep(array){ return baseFlatten(array, INFINITY) } function baseFlatten(array, deep, result){ result || (result.
手撸 JS flat 和 flatMap 函数
写好每一行代码
06-02 1032
偶然看到 flat 和 flatMap 函数，原来一直用 lodash 的 flatten 函数，所以自己手撸一个 flat 和 flatMap 惩罚下自己没有好好阅读 es6 手册。
前端问答：flat()和flatMap()有啥不同？
最新发布
前端达人
08-28 1138
在JavaScript中，数组可以说是最常用的数据结构之一。然而，当你开始接触嵌套数组时，它们可能会变得相当复杂。幸运的是，ES2019为我们带来了两个非常实用的数组方法：flat()和flatMap()。这两个方法不仅让数组的处理变得更加优雅，还大大简化了对嵌套数组的操作。接下来，我们将详细解析这两个方法的细节、它们之间的区别，以及在实际开发中的应用场景，并配上详细的代码示例，帮助你彻底掌握这两...
Vue 使用 array.flatMap()例子
宁夏前端工程师，马卫斌，wx：1457508895
03-28 503
在Vue中，.flatMap() 是 JavaScript ES6 提供的一个数组实例方法，它可以将数组中的每个元素应用一个映射函数，然后将所有映射结果放入一个新的扁平化数组中返回。我们使用 .flatMap() 来扁平化地映射这个数组，将每个元素的id和其子项转换为新格式后合并到一个单一的新数组中。注意，.flatMap() 方法并不会对原始数组做任何修改，而是返回一个新的数组。此外，它要求映射函数返回的是一个数组，这样就可以自动将所有返回的数组合并成一个单一的扁平数组。
【项目复盘-vue2.0】常见接口数据处理方式-需要修改数据结构
Weiqian_的博客
11-28 1021
常见接口数据处理方式-需要修改数据结构
Lodash学习-Collection篇
weixin_33851429的博客
10-12 145
作者： YeaseonBlog：yeaseonzhang.github.io原文链接 上篇文章，我们已经把关于Array部分的API学习了一遍，现在我们来开始下一篇Collection。 下列API的collection参数指代Array | Object两种类型。 _.countBy _.countBy(collection, [iteratee=_.identity]) 创建一个ke...
你不知道的JavaScript数组扁平化五种方法
01-08
ES6引入了`flat()`方法，它可以将数组中的子数组展开，从而达到扁平化的效果。不过，此方法的兼容性较差，不支持IE浏览器，并且需要Node.js 11及以上版本。例如： ```javascript let arr = [1, [2, 3, 4], [3, 5,...
javscript 数组扁平化的实现
10-15
在JavaScript开发中，数组扁平化是一个常见的操作，用于将嵌套的数组转换成一个没有嵌套的、单一维度的数组。这个操作在处理某些数据结构时非常有用，例如，当你需要从多层级的数据结构中提取信息时。本文将介绍几种...
JS扁平化输出数组的2种方法解析
10-16
扁平化数组的方法有很多，但本文重点介绍了两种方法，包括使用数组的flat方法和自定义递归扁平化函数。 第一种方法是使用ES2019中引入的Array.prototype.flat()方法。这是一个非常方便的内置函数，能够将嵌套的数组...
ES6中flat与flatMap使用
逆袭的菜鸟X
05-19 1865
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。
数组方法（flat，flatMap 和 fill）
weixin_45368324的博客
04-10 413
手册地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 语法：var newArray = arr.flat([depth]) depth 可选 指定要提...
数据方法 flat和flatMap的区别
m0_61899713的博客
04-24 413
了解flat 和 flatMap的区别
数组的fill()和flat()方法
想好了再写！
04-20 487
fill() 功能：用给定值填充一个数组 参数 第一个参数：value 必需。填充的值。 第二个参数：start可选。开始填充位置。 第三个参数：end 可选。停止填充位置 (默认为 array.length) 传递一个参数： ['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] 传递了第二，第三个参数 var result = ["a", "b", "c"].fill(3, 1, 2); 上面代码表示，fill
面试官：JavaScript如何实现数组拍平（扁平化）方法?
qq_38650754的博客
11-01 2043
1 什么叫数组拍平？ 概念很简单，意思是将一个“多维”数组降维，比如： // 原数组是一个“三维”数组 const array = [1, 2, [3, 4, [5, 6], 7], 8, 9] // 可以降成二维 newArray1 = [1, 2, 3, 4, [5, 6], 7, 8, 9] // 也可以降成一维 newArray2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] 数组拍平也称数组扁平化、数组降维。 2 JS标准库中的数组拍平方法 JavaScript标准库中已经实现
使用 flatMap 进行扁平化映像处理数据
Mr.小灰狼_随笔
08-16 354
使用 flatMap 进行扁平化映像处理数据 Map.flat 循环 + 二维 变 一维 就是 flatMap 了
自从学会这些奇技淫巧，日常开发可以快乐地摸了
Web面试那些事儿的博客
11-09 79
假定需求场景是：项目中存在一个比较臃肿的vue文件，为了使文件具有可读性，需要将定义在vue中的部分变量和方法抽取到js文件中。那么，定义在计算属性中(且与vue文件存在较强的关联性)的表单配置文件，该如何抽取到js文件中呢？既然js文件需要使用定义在vue文件中的变量，就一定要拿到vue实例，也就是vue文件中的this对象；既然如此，我们可以在js文件中导出一个自定义函数，并在vue文件中引入这个函数；在vue文件需要使用到表单配置文件时，将这个函数的this指向vue的实例，并执行该函数；
4种数组扁平化的方式
油墨香^-^的博客
06-27 388
什么是数组扁平化？ 数组扁平化其实就是将多维数组转为一维数组。今天与你一起来分享4种数组扁平化的方式。 方式一：ES6的flat方法 const arr = [1,[2,[3,[4,5]]],6]// 方法一：数组自带的扁平化方法,flat的参数代表的是需要展开几层，如果是Infinity的话，就是不过嵌套几层，全部都展开console.log(arr.flat(Infinity)) 使用的是ES6的flat(),flat方法的参数可以是n也可以直接写死Infinity，n代表
彻底弄懂Java8中的flatMap流的扁平化
抽象的螺旋
03-07 484
java8 flatMap
JS数组扁平化、去重与排序操作深度解析
在JavaScript中，处理嵌套数组时，我们经常会遇到数组扁平化的需求，即把一个多维数组转换为一维数组。接着，去重是为了确保数组中的元素不重复，而排序则是按照特定规则调整数组元素顺序。以下是四种常见的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_聪明勇敢有力气

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值