方法介绍

数组扁平化方法 Array.prototype.flat() 也叫数组拍平、数组拉平、数组降维。

Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。

该方法返回一个新数组，对原数据没有影响。

不传参数时，默认“拉平”一层，可以传入一个整数，表示想要“拉平”的层数。

传入 <=0 的整数将返回原数组，不“拉平”。

Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组。

如果原数组有空位，Array.prototype.flat() 会跳过空位。

代码示例：

const arr = [1,[2,3],[4,[5,[6]],7]];// 不传参数时，默认“拉平”一层
arr.flat()
// [1,2,3,4,[5,[6]],7];// 传入一个整数参数，整数即“拉平”的层数
arr.flat(2)
// [1,2,3,4,5,[6],7];// Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
arr.flat(Infinity);
// [1,2,3,4,5,6,7];// 传入 <=0 的整数将返回原数组，不“拉平”
arr.flat(0);
// [1,[2,3],[4,[5,[6]],7]]
arr.flat(-6);
// [1,[2,3],[4,[5,[6]],7]]// 如果原数组有空位，flat()方法会跳过空位
[1,2,3,4,5,6,,].flat();
// [1,2,3,4,5,6]

开始手写

思路：实现一个有数组扁平化功能的 flat 函数，要做的就是在数组中找到是数组类型的元素，然后将他们展开。这就是实现数组拍平 flat 方法的关键思路。

遍历数组方案：

for 循环；for...of；for...in；forEach()；entries()；keys()；values()；reduce()；map()

判断元素是数组方案：

instanceof；constructor；Object.prototype.toString；isArray

将数组的元素展开一层方案：

扩展运算符(…) ； concat；

apply：主要是利用 apply 在绑定作用域时，传入的第二个参数是一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。也就是在调用 apply 函数的过程中，会将传入的数组一个一个的传入到要执行的函数中，也就是相当对数组进行了一层的展开。

使用forEach+push递归实现：

const arr = [1,[2,3],[4,[5,[6]],7]];function func(array) {let newArr = []const rec = (arr) => {arr.forEach(item => {if (!Array.isArray(item)) {newArr.push(item)} else {rec(item)}})}rec(array)return newArr}let res = func(arr)console.log(res) //[1,2,3,4,5,6,7]

使用for循环+concat实现：

const arr = [1,[2,3],[4,[5,[6]],7]];function flatten(arr) {let result = [];for (let i = 0; i < arr.length; i++) {if (Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));} else {result = result.concat(arr[i])}}return result}console.log(flatten(arr));//[1,2,3,4,5,6,7]

增加参数控制扁平化深度，可以理解为手写flat()方法：

const arr = [1,[2,3],[4,[5,[6]],7]];//版本1：
// forEach 遍历数组会自动跳过空元素
const eachFlat = (arr = [], depth = 1) => {const result = []; (function flat(arr, depth) {arr.forEach((item) => {if (Array.isArray(item) && depth > 0) {flat(item, depth - 1)} else {result.push(item)}})})(arr, depth)return result;}console.log(eachFlat(arr,2))//[1,2,3,4,5,[6],7]//版本2：// for of 循环不能去除数组空位，需要手动去除const forFlat = (arr = [], depth = 1) => {const result = [];(function flat(arr, depth) {for (let item of arr) {if (Array.isArray(item) && depth > 0) {flat(item, depth - 1)} else {// 去除空元素，添加非 undefined 元素item !== void 0 && result.push(item);}}})(arr, depth)return result;}console.log(forFlat(arr,2))//[1,2,3,4,5,[6],7]

巧用reduce方法实现：

有关reduce方法的使用方法和具体细节请看我的这篇文章：戳我传送

const arr = [1,[2,3],[4,[5,[6]],7]];const flatten = (arr, deep = 1) => {if (deep <= 0) return arr;return arr.reduce((res, curr) => res.concat(Array.isArray(curr) ? flatten(curr, deep - 1) : curr), [])
}console.log(flatten(arr, Infinity));//[1,2,3,4,5,6,7]

JS手写数组扁平化（flat）方法相关推荐

JAVA数组扁平化整合_JS数组扁平化(flat)方法总结详解
需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_ ...
js树形结构数组扁平化
js树形结构数组扁平化 1. 树形结构 ---- > 扁平化数据一.树形结构 ---- > 扁平化数据 (数据) const newData: any = [{"id" ...
JS数组扁平化flat,reduce等六种方式实现
数组扁平化:将数组中嵌套的数组拉平变成一维数组. 方法1:reduce,遍历数组每一项,若值为数组则递归遍历,否则concat 代码如下 let arr = [1, [2, 3, [4, 5], 6] ...
php n维数组扁平化,js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解...
数组的扁平化:将多维数组变成一维数组对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr ...
es6删除数组某一项_精学手撕系列——数组扁平化
参考文章:面试官连环追问:数组拍平(扁平化) flat 方法实现编者荐语: 在前端面试中,手写flat是非常基础的面试题,通常出现在笔试或者第一轮面试中,主要考察面试者基本的手写代码能力和JavaS ...
JAVA数组扁平化整合_一文搞定数组扁平化（超全面的数组拉平方案及实现）
前言面试手写代码在大厂面试中非常常见,秋招中面试小米就手写了一道flat实现的代码题,当时通过递归方式实现了数组扁平化逻辑,但没有考虑多种实现方案及其边界条件(主要是对所涉及到高阶函数的知识点不够熟 ...
JAVA数组扁平化整合_数组扁平化的几种处理放法
清明节,这几天放假闲来无事,好好研究一下基础知识,今天看看数组扁平化该怎么处理: 先来看数组扁平化是什么: var arr = [1,2,3,4,[5,6,[7,8]],true] => [1, ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
实现JavaScript数组拍平/扁平化的方法
实现JavaScript数组拍平/扁平化的方法请写出一个数组拍平函数,效果如下: var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; ...

JS手写数组扁平化（flat）方法

方法介绍

开始手写

JS手写数组扁平化（flat）方法相关推荐

最新文章

热门文章