数组扁平化对象扁平化

1. 数组扁平化

数组扁平化就是将多维数组转化为一维数组：

[1, [2, 3, [4, 5]]]  ——>  [1, 2, 3, 4, 5]

1.1 toString + split

先将数组转化为字符串，在使用split将字符串转化为数组：

let arr = [1, [2, 3, [4, 5]]]
function flatten(arr) {return arr.toString().split(',').map( item => Number(item))
}
console.log(flatten(arr)) // [1, 2, 3, 4, 5]

用split形成的数组的每个元素仍然是字符串，需要将其转化为数字

注意： 仅适用于数组元素都是数字的情况

1.2 reduce

reduce方法会对根据回调函数对数组的每个元素进行操作：

let arr = [1, [2, 3, [4, 5]]]
const newArr = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5]

更多reduce()方法的使用：《数组reduce()方法的妙用》

1.3 join + split

join()方法和上面的toString方法类似，都能将数组转化为字符串

function flatten(arr) {return arr.join(',').split(',').map( item => parseInt(item) )
}

1.4 递归 + 循环

function flatten(arr) {var res = [];arr.map(item => {if(Array.isArray(item)) {res = res.concat(flatten(item));} else {res.push(item);}});return res;
}

1.5 扩展运算符

...扩展运算符可以取出参数的所有的可以遍历的对象，并拷贝到当前的对象中

let arr = [1, [2, 3, [4, 5]]] function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);}return arr;}console.log(flatten(arr)); // [1, 2, 3, 4, 5]

1.6 flat()

flat()是ES6中的一个数组方法，该方法会按照一个可指定的深度depth递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。该方法不会改变原数组

语法： let newArray = arr.flat(depth)

注意：

depth为指定要提取嵌套数组的结构深度，默认值为 1
flat() 方法会移除数组中的空项

 let arr1 = [1, 2, [3, 4]];arr1.flat(); // [1, 2, 3, 4]// 指定要提取嵌套数组的结构深度为1层let arr2 = [1, 2, [3, 4, [5, 6]]];arr2.flat(1); // [1, 2, 3, 4, [5, 6]]// 指定要提取嵌套数组的结构深度为2层let arr3 = [1, 2, [3, 4, [5, 6]]];arr3.flat(2); // [1, 2, 3, 4, 5, 6]// 使用 Infinity 作为深度，展开任意深度的嵌套数组let arr4 = [1, 2, [3, 4, [5, 6]]]arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]// 移除数组中的空项let arr5 = [1, 2, , 4, 5];arr5.flat(); // [1, 2, 4, 5]

2. 对象扁平化

对象扁平化就是将复杂的多层的对象转化为一维对象：

let obj = { a: { d: 1 }, d:  2, e: [1, 2] }
function flatten(data) {var result = {};function recurse(cur, prop) {// 如果输入进来的是不是对象，就将其放在数组中，返回if (Object(cur) !== cur) {result[prop] = cur;// 如果输入进来的是数组，长度不为0就递归数组，得出结果} else if (Array.isArray(cur)) {for (var i = 0, len = cur.length; i < len; i++)recurse(cur[i], prop + "[" + i + "]");if (len == 0)  result[prop] = [];} else {var isEmpty = true;for (var p in cur) {isEmpty = false;recurse(cur[p], prop ? prop + "." + p : p);}if (isEmpty && prop)result[prop] = {};}}recurse(data, "");return result;
};
console.log(flatten(obj))  // {a.d: 1, d: 2, e[0]: 1, e[1]: 2}

数组扁平化对象扁平化相关推荐

js的tree数组对象扁平化思否_JS专题之数组展开
前言首先什么是数组展开? 假如现在有这样一个需求:将后台的一个多重 List 数据,展开成一个 List 后,并去重后排序: ["a", "b", [&quo ...
实现 flatten 扁平化对象和数组
/** * 对象扁平化 * 说明:请实现 flatten(input) 函数,input 为一个 javascript 对象(Object 或者 Array),返回值为扁平化后的结果. * ...
JavaScript 对象扁平化
JavaScript对象扁平化我们平时肯定遇到过多层嵌套的对象,name如何将它扁平化呢?一起来看看吧! 函数封装如下: function flatten (obj) {const ans = {} ...
JSON数据处理之扁平化对象输出
有时候返回json的数据中的属性存在在多个对象之中.我们期望它能够整合起来,去掉对象的外衣.这个简单理解为对象扁平化 @Getter @Setter @ToString public class Ac ...
问你觉得iOS7为什么要扁平化，扁平化和之前的比有什么优势
问你觉得iOS7为什么要扁平化,扁平化和之前的比有什么优势苹果首席设计师谈为何会在iOS上选择扁平风格http://ndnews.oeeee.com/html/201306/11/71078.htm ...
在asp.net2.0中使用串行化对象实现自定义配置
在一次升级一个entlib1.0到entlib的高版本程序时,碰到entlib的一个通过XmlSerializer方式实现的自定义配置.而在entlib的高版本中这样的配置不再被支持.可是又不希望修改 ...
池化对象 RecyclableMemoryStream 在 .netcore 中的使用
Microsoft.IO.RecyclableMemoryStream 是一个被设计为专门用于提高 Stream 操作的高性能类库,意思很明显,专用于取代 MemoryStream 而生,Recycl ...
实列化对象自动调用构造方法
package day18;public class WaDIu {public static void main(String[] args) {//实列化对象自动调用构造方法Student s ...
【Android 插件化】插件化原理 ( JVM 内存数据 | 类加载流程 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
iOS 组件化，插件化，模块化设计思路分析
iOS 组件化,插件化设计思路分析前言随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,V ...

数组扁平化对象扁平化

目录

1. 数组扁平化

1.1 toString + split

1.2 reduce

1.3 join + split

1.4 递归 + 循环

1.5 扩展运算符

1.6 flat()

2. 对象扁平化

数组扁平化对象扁平化相关推荐

最新文章

热门文章

数组扁平化 对象扁平化

目录

1. 数组扁平化

1.1 toString + split

1.2 reduce

1.3 join + split

1.4 递归 + 循环

1.5 扩展运算符

1.6 flat()

2. 对象扁平化

数组扁平化 对象扁平化相关推荐

最新文章

热门文章

数组扁平化对象扁平化

数组扁平化对象扁平化相关推荐